/* AVENGERS - THE INFINITY GAUNTLET CREATED BY: VITRUVIAN APRIL 02, 2018 */ window.onload = function() { $(document).ready(function() { ww = $(window).width(); $("#cover,#info,canvas").css({ "left":((ww-360)/2)+"px" }); $("#cover").show(); $("body").delegate("#play","click", function() { $("#cover").hide(); newGame(); }); $("body").delegate("#new_game","click", function() { newGame(); }); $("body").delegate("#help","click", function() { $("#info").show(); }); $("body").delegate("#info_close","click", function() { $("#info").hide(); }); }); // ****** // Images var images = []; // Image loading global variables var loadcount = 0; var loadtotal = 0; var preloaded = false; // Load images function loadImages(imagefiles) { // Initialize variables loadcount = 0; loadtotal = imagefiles.length; preloaded = false; // Load the images var loadedimages = []; for (var i=0; i animationtimetotal) { // Check if there are moves available findMoves(); if (moves.length > 0) { // Get a random valid move var move = moves[Math.floor(Math.random() * moves.length)]; // Simulate a player using the mouse to swap two tiles mouseSwap(move.column1, move.row1, move.column2, move.row2); } else { // No moves left, Game Over. We could start a new game. // newGame(); } animationtime = 0; } } } else if (gamestate == gamestates.resolve) { // Game is busy resolving and animating clusters animationtime += dt; if (animationstate == 0) { // Clusters need to be found and removed if (animationtime > animationtimetotal) { // Find clusters findClusters(); if (clusters.length > 0) { // Add points to the score for (var i=0; i animationtimetotal) { // Shift tiles shiftTiles(); // New clusters need to be found animationstate = 0; animationtime = 0; // Check if there are new clusters findClusters(); if (clusters.length <= 0) { // Animation complete gamestate = gamestates.ready; } } } else if (animationstate == 2) { // Swapping tiles animation if (animationtime > animationtimetotal) { // Swap the tiles swap(currentmove.column1, currentmove.row1, currentmove.column2, currentmove.row2); // Check if the swap made a cluster findClusters(); if (clusters.length > 0) { // Valid swap, found one or more clusters // Prepare animation states animationstate = 0; animationtime = 0; gamestate = gamestates.resolve; } else { // Invalid swap, Rewind swapping animation animationstate = 3; animationtime = 0; } // Update moves and clusters findMoves(); findClusters(); } } else if (animationstate == 3) { // Rewind swapping animation if (animationtime > animationtimetotal) { // Invalid swap, swap back swap(currentmove.column1, currentmove.row1, currentmove.column2, currentmove.row2); // Animation complete gamestate = gamestates.ready; } } // Update moves and clusters findMoves(); findClusters(); } } function updateFps(dt) { if (fpstime > 0.25) { // Calculate fps fps = Math.round(framecount / fpstime); // Reset time and framecount fpstime = 0; framecount = 0; } // Increase time and framecount fpstime += dt; framecount++; } // Draw text that is centered function drawCenterText(text, x, y, width) { var textdim = context.measureText(text); context.fillText(text, x + (width-textdim.width)/2, y); } // Render the game function render() { // Draw the frame drawFrame(); // Draw score context.fillStyle = "#d0d0d0"; context.font = "19px Verdana"; drawCenterText("Score:",0,25,100); drawCenterText(score,100,25,70); // Draw buttons drawButtons(); // Draw level background var levelwidth = level.columns * level.tilewidth; var levelheight = level.rows * level.tileheight; context.fillStyle = "transparent"; context.fillRect(level.x,level.y, levelwidth,levelheight); // Render tiles renderTiles(); // Render clusters renderClusters(); // Render moves, when there are no clusters if (showmoves && clusters.length <= 0 && gamestate == gamestates.ready) { renderMoves(); } // Game Over overlay if (gameover) { context.fillStyle = "rgba(0, 0, 0, 0.8)"; context.fillRect(level.x, level.y, levelwidth, levelheight); context.fillStyle = "#d0d0d0"; context.font = "24px Verdana"; drawCenterText("Game Over!", level.x, level.y + levelheight / 2 + 10, levelwidth); $("#new_game").show(); } } // Draw a frame with a border function drawFrame() { // Draw background and a border context.fillStyle = "black"; context.fillRect(0,0,canvas.width,canvas.height); } // Draw buttons function drawButtons() { for (var i=0; i= 0) { // Get the color of the tile var col = tilecolors[level.tiles[i][j].type]; // Draw the tile using the color drawTile(coord.tilex, coord.tiley, col[0], col[1], col[2]); } // Draw the selected tile if (level.selectedtile.selected) { if (level.selectedtile.column == i && level.selectedtile.row == j) { // Draw a red tile drawTile(coord.tilex, coord.tiley, 255, 0, 0); } } } } // Render the swap animation if (gamestate == gamestates.resolve && (animationstate == 2 || animationstate == 3)) { // Calculate the x and y shift var shiftx = currentmove.column2 - currentmove.column1; var shifty = currentmove.row2 - currentmove.row1; // First tile var coord1 = getTileCoordinate(currentmove.column1, currentmove.row1, 0, 0); var coord1shift = getTileCoordinate(currentmove.column1, currentmove.row1, (animationtime / animationtimetotal) * shiftx, (animationtime / animationtimetotal) * shifty); var col1 = tilecolors[level.tiles[currentmove.column1][currentmove.row1].type]; // Second tile var coord2 = getTileCoordinate(currentmove.column2, currentmove.row2, 0, 0); var coord2shift = getTileCoordinate(currentmove.column2, currentmove.row2, (animationtime / animationtimetotal) * -shiftx, (animationtime / animationtimetotal) * -shifty); var col2 = tilecolors[level.tiles[currentmove.column2][currentmove.row2].type]; // Draw a black background drawTile(coord1.tilex, coord1.tiley, 0, 0, 0); drawTile(coord2.tilex, coord2.tiley, 0, 0, 0); // Change the order, depending on the animation state if (animationstate == 2) { // Draw the tiles drawTile(coord1shift.tilex, coord1shift.tiley, col1[0], col1[1], col1[2]); drawTile(coord2shift.tilex, coord2shift.tiley, col2[0], col2[1], col2[2]); } else { // Draw the tiles drawTile(coord2shift.tilex, coord2shift.tiley, col2[0], col2[1], col2[2]); drawTile(coord1shift.tilex, coord1shift.tiley, col1[0], col1[1], col1[2]); } } } // Get the tile coordinate function getTileCoordinate(column, row, columnoffset, rowoffset) { var tilex = level.x + (column + columnoffset) * level.tilewidth; var tiley = level.y + (row + rowoffset) * level.tileheight; return { tilex: tilex, tiley: tiley}; } // Draw a tile with a color function drawTile(x, y, r, g, b) { rgb = ""+r+g+b; switch (rgb) { case "255128128": context.drawImage(images[0],x,y,50,60); break; case "128255128": context.drawImage(images[5],x,y,50,60); break; case "128128255": context.drawImage(images[2],x,y,50,60); break; case "255255128": context.drawImage(images[3],x,y,50,60); break; case "250180120": context.drawImage(images[4],x,y,50,60); break; case "255128255": context.drawImage(images[1],x,y,50,60); break; case "200200200": context.drawImage(images[6],x,y,50,60); break; case "25500": context.fillStyle = "transparent"; context.fillRect(x,y,level.tilewidth,level.tileheight); break; default: context.fillStyle = "rgb(" + r + "," + g + "," + b + ")"; context.fillRect(x,y,level.tilewidth,level.tileheight); break; } } // Render clusters function renderClusters() { for (var i=0; i 0) { done = true; } } } // Get a random tile function getRandomTile() { return Math.floor(Math.random() * tilecolors.length); } // Remove clusters and insert tiles function resolveClusters() { // Check for clusters findClusters(); // While there are clusters left while (clusters.length > 0) { // Remove clusters removeClusters(); // Shift tiles shiftTiles(); // Check if there are clusters left findClusters(); } } // Find clusters in the level function findClusters() { // Reset clusters clusters = [] // Find horizontal clusters for (var j=0; j= 3) { // Found a horizontal cluster clusters.push({ column: i+1-matchlength, row:j, length: matchlength, horizontal: true }); } matchlength = 1; } } } // Find vertical clusters for (var i=0; i= 3) { // Found a vertical cluster clusters.push( {column: i, row: j+1-matchlength, length: matchlength, horizontal: false } ); } matchlength = 1; } } } } // Find available moves function findMoves() { // Reset moves moves = [] // Check horizontal swaps for (var j=0; j 0) { // Found a move moves.push({column1: i, row1: j, column2: i+1, row2: j}); } } } // Check vertical swaps for (var i=0; i 0) { // Found a move moves.push({column1: i, row1: j, column2: i, row2: j+1}); } } } // Reset clusters clusters = [] } // Loop over the cluster tiles and execute a function function loopClusters(func) { for (var i=0; i=0; j--) { // Loop from bottom to top if (level.tiles[i][j].type == -1) { // Tile is removed, increase shift shift++; level.tiles[i][j].shift = 0; } else { // Set the shift level.tiles[i][j].shift = shift; } } } } // Shift tiles and insert new tiles function shiftTiles() { // Shift tiles for (var i=0; i=0; j--) { // Loop from bottom to top if (level.tiles[i][j].type == -1) { // Insert new random tile level.tiles[i][j].type = getRandomTile(); } else { // Swap tile to shift it var shift = level.tiles[i][j].shift; if (shift > 0) { swap(i, j, i, j+shift) } } // Reset shift level.tiles[i][j].shift = 0; } } } // Get the tile under the mouse function getMouseTile(pos) { // Calculate the index of the tile var tx = Math.floor((pos.x - level.x) / level.tilewidth); var ty = Math.floor((pos.y - level.y) / level.tileheight); // Check if the tile is valid if (tx >= 0 && tx < level.columns && ty >= 0 && ty < level.rows) { // Tile is valid return { valid: true, x: tx, y: ty }; } // No valid tile return { valid: false, x: 0, y: 0 }; } // Check if two tiles can be swapped function canSwap(x1, y1, x2, y2) { // Check if the tile is a direct neighbor of the selected tile if ((Math.abs(x1 - x2) == 1 && y1 == y2) || (Math.abs(y1 - y2) == 1 && x1 == x2)) { return true; } return false; } // Swap two tiles in the level function swap(x1, y1, x2, y2) { var typeswap = level.tiles[x1][y1].type; level.tiles[x1][y1].type = level.tiles[x2][y2].type; level.tiles[x2][y2].type = typeswap; } // Swap two tiles as a player action function mouseSwap(c1, r1, c2, r2) { // Save the current move currentmove = {column1: c1, row1: r1, column2: c2, row2: r2}; // Deselect level.selectedtile.selected = false; // Start animation animationstate = 2; animationtime = 0; gamestate = gamestates.resolve; } // On mouse movement function onMouseMove(e) { // Get the mouse position var pos = getMousePos(canvas, e); // Check if we are dragging with a tile selected if (drag && level.selectedtile.selected) { // Get the tile under the mouse mt = getMouseTile(pos); if (mt.valid) { // Valid tile // Check if the tiles can be swapped if (canSwap(mt.x, mt.y, level.selectedtile.column, level.selectedtile.row)){ // Swap the tiles mouseSwap(mt.x, mt.y, level.selectedtile.column, level.selectedtile.row); } } } } // On mouse button click function onMouseDown(e) { // Get the mouse position var pos = getMousePos(canvas, e); // Start dragging if (!drag) { // Get the tile under the mouse mt = getMouseTile(pos); if (mt.valid) { // Valid tile var swapped = false; if (level.selectedtile.selected) { if (mt.x == level.selectedtile.column && mt.y == level.selectedtile.row) { // Same tile selected, deselect level.selectedtile.selected = false; drag = true; return; } else if (canSwap(mt.x, mt.y, level.selectedtile.column, level.selectedtile.row)){ // Tiles can be swapped, swap the tiles mouseSwap(mt.x, mt.y, level.selectedtile.column, level.selectedtile.row); swapped = true; } } if (!swapped) { // Set the new selected tile level.selectedtile.column = mt.x; level.selectedtile.row = mt.y; level.selectedtile.selected = true; } } else { // Invalid tile level.selectedtile.selected = false; } // Start dragging drag = true; } // Check if a button was clicked for (var i=0; i= buttons[i].x && pos.x < buttons[i].x+buttons[i].width && pos.y >= buttons[i].y && pos.y < buttons[i].y+buttons[i].height) { // Button i was clicked if (i == 0) { // New Game newGame(); } else if (i == 1) { // Show Moves showmoves = !showmoves; buttons[i].text = (showmoves?"Hide":"Show") + " Moves"; } else if (i == 2) { // AI Bot aibot = !aibot; buttons[i].text = (aibot?"Disable":"Enable") + " AI Bot"; } } } } function onMouseUp(e) { // Reset dragging drag = false; } function onMouseOut(e) { // Reset dragging drag = false; } // Get the mouse position function getMousePos(canvas, e) { var rect = canvas.getBoundingClientRect(); return { x: Math.round((e.clientX - rect.left)/(rect.right - rect.left)*canvas.width), y: Math.round((e.clientY - rect.top)/(rect.bottom - rect.top)*canvas.height) }; } // Call init to start the game init(); };

Avengers - The Infinity Gauntlet Game