更新

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/

上执行此操作

更新

在页面上添加一个DOM元素<div id="clickCount">0</div>。然后用以下内容替换movePlayer。

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

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

在画布上创建点击计数器

1 个答案:

更新