Создание счетчика кликов на холсте - PullRequest
Новая
       11

Создание счетчика кликов на холсте

0 голосов
/ 12 февраля 2019

Я создал небольшую игру на 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();
});

Я попробовал некоторые вещи из-под контроля, но не смогпонять это. Большое спасибо за вашу помощь! :) 1006

С уважением

1 Ответ

0 голосов
/ 12 февраля 2019

Добавьте новую переменную для увеличения, а затем в функции 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 по своему усмотрению.

...