Dactyl

[Dactyl][link] [link]: http://smassola.github.io/Dactyl

![preview] [preview]: ./assets/Dactyl_Preview.png

Description

Dactyl is web game inspired by the classic i-phone game Dactyl. The technologies used for this web application are pure Javascript, HTML and CSS. Graphics were displayed on the webpage using canvas.

How To Play

The rules of the game are simple:

![instructions] [instructions]: ./assets/Instructions.png

Implementation

Two canvas elements were required as multiple graphical effects are performed simultaneously. The first canvas element renders the color changing of the bomb images and the second canvas renders the moving particles after a bomb explodes.

The canvas at the top level was mapped out and an event listener was enabled to it to register user clicks. The clicks were crossed referenced against the mapped coordinates of the canvas to determine if the user defused a bomb.

function _handleClick(e) {
  var dim = ctx.canvas.height*0.25;
  var clickPos = [e.pageX, e.pageY];

  if (clickPos[0]> 10 && clickPos[0] < dim-40 && clickPos[1] > 45 && clickPos[1] < dim) {
    ctx.putImageData(originalData, 0, 0);
    if (ignited["00"] === "red") {
      clearTimeout(redchecker["00"]);
      score += 1;
      document.getElementById('score').innerHTML = "Score: " + score;
      ignited["00"] = false;
    } else if (ignited["00"] === "blue") {
      score -= 1;
      lives -= 1;
      document.getElementById('score').innerHTML = "Score: " + score;
      document.getElementById('lives').innerHTML = "Lives: " + lives;
      ignited["00"] = false;
    }
  }
}

SetTimeout and SetInterval were an integral part of the functionality of the game. SetTimeout allowed for the user to respond to changes to the state of the game before unfavorable code was evaluated. SetInterval allowed for continuous flow of the game, repeating necessary game functionality and game state checks.

function colorShifter(positions) {

  positions.forEach((pos) => {
    if (ignited[`${pos[0]}${pos[1]}`] === "red") {
      colorshift[`${pos[0]}${pos[1]}`] = 0;
      redchecker[`${pos[0]}${pos[1]}`] = setTimeout(
        redCheck.bind(null, pos), 3000
      );
    } else {
      colorshift[`${pos[0]}${pos[1]}`] = 1;
    }
  });
  if (transitions) {
    var shift = setInterval(function() {
      positions.forEach((pos) => {
        recolorBombs(pos, colorshift[`${pos[0]}${pos[1]}`]);
        colorshift[`${pos[0]}${pos[1]}`] += .0006;
      }, 1);
    });
    setTimeout(function() {
      clearInterval(shift);
    }, 1000);
  } else {
    positions.forEach((pos) => {
      ctx.putImageData(
        originalData,
        pos[0]*ctx.canvas.height*0.25,
        pos[1]*ctx.canvas.height*0.25
      );
      recolorBombs(pos, colorshift[`${pos[0]}${pos[1]}`] + .24);
    });
  }
}