在画布上创建一个点击计数器

Question

在我学习的过程中，我用JavaScript创建了一个小游戏。我想在其中获得一个计数点击器。所以你可以看到你在死之前点击了画布的次数。 （所以它会在“游戏结束后”重置。

这是我目前的JS代码：

window.addEventListener("load", function () {

  //constants
  var GAME_WIDTH = 640;
  var GAME_HEIGHT = 360;

  //keep the game going
  var gameLive = true;

  //current level
  var level = 1;



  //enemies
  var enemies = [{
      x: 100, //x coordinate
      y: 100, //y coordinate
      speedY: 2, //speed in Y
      w: 40, //width
      h: 40 //heght
    },
    {
      x: 200,
      y: 0,
      speedY: 2,
      w: 40,
      h: 40
    },
    {
      x: 330,
      y: 100,
      speedY: 3,
      w: 40,
      h: 40
    },
    {
      x: 450,
      y: 100,
      speedY: -3,
      w: 40,
      h: 40
    }
  ];

  //the player object
  var player = {
    x: 10,
    y: 160,
    speedX: 2.5,
    isMoving: false, //keep track whether the player is moving or not
    w: 40,
    h: 40
  };

  //the goal object
  var goal = {
    x: 580,
    y: 160,
    w: 50,
    h: 36
  }
  // var zonder waarde
  var img = {};

  var movePlayer = function () {
    player.isMoving = true;
  }

  var stopPlayer = function () {
    player.isMoving = false;
  }


  //grab the canvas and context
  var canvas = document.getElementById("mycanvas");
  var ctx = canvas.getContext("2d");

  //event listeners to move player
  canvas.addEventListener('mousedown', movePlayer);
  canvas.addEventListener('mouseup', stopPlayer);
  canvas.addEventListener('touchstart', movePlayer);
  canvas.addEventListener('touchend', stopPlayer);

  var load = function () {
    img.player = new Image();
    img.player.src = 'images/ping.png';

    img.background = new Image();
    img.background.src = 'images/sea.png';

    img.enemy = new Image();
    img.enemy.src = 'images/enemy.png';

    img.goal = new Image();
    img.goal.src = 'images/fish.png';
  };

  //update the logic
  var update = function () {



    //check if you've won the game
    if (checkCollision(player, goal)) {

      // leven +1
      level++;
      // level in console 
      console.log(level);

      // get player back in position
      player.x = 10;
      player.y = 160;
      //increase the speed of the enemies by 1

      //increase the speed of the enemies by 1
      enemies.forEach(function (enemies) {
        if (enemies.speedY > 0) {
          enemies.speedY++;
        } else {
          enemies.speedY--;
        }
      });

    }

    //update player
    if (player.isMoving) {
      player.x = player.x + player.speedX;
    }


    enemies.forEach(function (element, index) {

      //check for collision with player
      if (checkCollision(player, element)) {
        //stop the game
        gameLive = false;

        alert('Game Over!');

        //reload page
        window.location = "";
      };

      //move enemy
      element.y += element.speedY;

      //check borders
      if (element.y <= 10) {
        element.y = 10;
        //element.speedY = element.speedY * -1;
        element.speedY *= -1;
      } else if (element.y >= GAME_HEIGHT - 50) {
        element.y = GAME_HEIGHT - 50;
        element.speedY *= -1;
      }

    });
  };

  //show the game on the screen
  var draw = function () {

    //clear the canvas
    ctx.clearRect(0, 0, GAME_WIDTH, GAME_HEIGHT);

    //draw background
    ctx.drawImage(img.background, 0, 0);

    //draw player
    ctx.drawImage(img.player, player.x, player.y);

    //draw enemies
    enemies.forEach(function (element, index) {
      ctx.drawImage(img.enemy, element.x, element.y);
    });

    //draw goal
    ctx.drawImage(img.goal, goal.x, goal.y);

    //for seeing the level in canvas

    //color points
    ctx.fillStyle = "#339900";
    //font points
    ctx.font = "60px Michroma";
    //point shower
    ctx.fillText(level, 10, 55);

  };

  //gets executed multiple times per second
  var step = function () {

    update();
    draw();

    if (gameLive) {
      window.requestAnimationFrame(step);
    }
  };

  //check the collision between two rectangles
  var checkCollision = function (rect1, rect2) {

    var closeOnWidth = Math.abs(rect1.x - rect2.x) <= Math.max(rect1.w, rect2.w);
    var closeOnHeight = Math.abs(rect1.y - rect2.y) <= Math.max(rect1.h, rect2.h);
    return closeOnWidth && closeOnHeight;

  }

  //initial kick
  load();
  step();
});

我尝试了一些无法控制的事情，但我无法理解。非常感谢你的帮助！ :)

亲切的问候

Answer 1

添加一个新变量以递增，然后在movePlayer函数中递增此值。游戏结束后，您可以将变量重置为0。

例如，在当前级别变量下面添加var clickCount = 0;

然后在movePlayer函数内添加clickCount += 1;

当您在游戏结束时正在重新加载页面时，变量将被重置。

此变量可以在页面上的简单DIV中输出，而不必是画布的一部分。

如果你有一个关于图像的工作示例，那将是最好的。你可以在https://codesandbox.io/或https://codepen.io/上做到这一点

UPDATE

将DOM元素<div id="clickCount">0</div>添加到您的页面上。然后用下面的方法替换movePlayer。

var movePlayer = function () {
  clickCount += 1;
  player.isMoving = true;
  document.getElementById('clickCount').innerHTML = clickCount;
}

然后，这将使用新计数更新DIV，然后您可以使用CSS根据需要定位和设置DIV样式。