Как добавить черные блоки случайного размера, которые перемещаются горизонтально по холсту при нажатии кнопки? - PullRequest
Новая
       1

Как добавить черные блоки случайного размера, которые перемещаются горизонтально по холсту при нажатии кнопки?

0 голосов
/ 06 мая 2018

Как добавить черные блоки произвольного размера, которые перемещаются по горизонтали по холсту при нажатии кнопки?

Вот как работает игра: игра, которую вы будете реализовывать, называется «Block Avoider». Это игра, в которой пользователь перемещает вокруг себя добродетельный синий блок и старается избегать как можно большего количества черных блоков, которые спешат попасть из крайней правой части экрана влево. Пользователь использует клавиши со стрелками для перемещения синего блока вокруг. Если происходит любое столкновение между пользователем и черным блоком, то черный блок, с которым столкнулся пользователь, стирается с экрана и обнаруживается столкновение. Отображается статистика игры - количество блоков, которых удалось избежать, количество предотвращенных столкновений и количество пройденных шагов с начала игры (количество шагов - это количество повторных прорисовок холста).

Вот мой код:

Код JavaScript 

const WIDTH = 640;
const HEIGHT = 480;
const PLAYER_SIZE = 20;
const REPAINT_DELAY = 50;
const EASY_DELAY = 1750
const MODERATE_DELAY = 1000;
const HARD_DELAY = 750;
const MAX_BLOCKS = 100;

// You might want to add more constants...
var playerX = WIDTH / 2 - PLAYER_SIZE / 2,
  playerY = HEIGHT / 2 - PLAYER_SIZE / 2;
// You will definitely NEED to add more variables...

document.onkeydown = function(e) {
  if (e.keyCode == 37) left();
  else if (e.keyCode == 38) up();
  else if (e.keyCode == 39) right();
  else if (e.keyCode == 40) down();
};

function up() {
  playerY -= 10;
  repaint();
}

function left() {
  playerX -= 10;
  repaint();
}

function right() {
  playerX += 10;
  repaint();
}

function down() {
  playerY += 10;
  repaint();
}

window.onload = repaint;

function startGame() {
  if (repaintTimer == null)
    repaintTimer = setInterval(repaint, 50);
  var rand = Math.floor(Math.random() * 2);
  if (rand >= 80)
  {
    var ulX = Math.floor(Math.random() * WIDTH),
      ulY = Math.floor(Math.random() * HEIGHT),
      width = Math.floor(Math.random() * 100),
      height = Math.floor(Math.random() * 100);
    context.fillStyle = "#000000";
    context.fillRect(ulX, ulY, width, height);
  } else
  {
    return false;
  }
}

function repaint() {
  var canvas = document.getElementById("myCanvas"),
    context = canvas.getContext("2d");
  context.fillStyle = "#0000FF";
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.fillRect(playerX, playerY, PLAYER_SIZE, PLAYER_SIZE);
}

HTML-код 

<!doctype html>
<html lang="en">
<head>
  <title>Block-Avoider</title>
  <meta charset="utf-8">
  <script type="text/javascript" src="project.js"></script>
</head>
<body>
  <div style="text-align: center;">
    <h1>Block Avoider</h1>
    <canvas id="myCanvas" width="640" height="480" style=" background-color: #fff8dc;vertical-align:bottom; border:solid 5px#000000;">
</canvas>
    <p>
      <input type="button" value="Start" id="startGame ();">
    </p>
    <p>
      <input type="radio" name="difficulty" checked="true"> Easy &nbsp;
      <input type="radio" name="difficulty"> Moderate &nbsp;
      <input type="radio" name="difficulty"> Hard
    </p>
    <p>
      Collisions = <span id="collisions">0</span> &nbsp; Avoisions = <span id="escaped">0</span> &nbsp; Steps elapsed = <span id="steps">0</span> &nbsp;
    </p>
    <h1 id="gameover"></h1>
    <p id="pct"></p>
  </div>
</body>
</html>

1 Ответ

0 голосов
/ 07 мая 2018

Я думаю, вы неправильно поняли, "как работает анимация на холсте". Это не какая-то анимация CSS. В канве вам нужно собрать все кадры, необходимые для анимации, вы можете найти несколько библиотек, чтобы сделать это проще.

Итак, вам нужно перекрашивать черный блок непрерывно с уменьшением значения x, чтобы заставить его двигаться. Так что ваша логика количества шагов = количество перерисовок может быть неправильной.

В любом случае, перемещая часть черного блока, вы можете добиться этого с помощью этого кода. 

const WIDTH = 640;
const HEIGHT = 480;

/* Moving Block */
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var SPEED = 10;

function Block() {
    this.width = Math.floor(Math.random() * 100);
    this.height = Math.floor(Math.random() * 100);

    // Make sure the block doesn't go out of view
    this.y = Math.floor(Math.random() * (HEIGHT - this.height));

    // Randomize the direction from which to calculate ulY
    if (Math.random() > 0.5) {
        this.y = HEIGHT - this.y - this.height;
    }

    // Make sure the block doesn't go out of view
    this.x = WIDTH - this.width;

    this.distanceToCross = WIDTH - this.width;
    this.timeToCross = (this.distanceToCross / SPEED) * 100;
    requestAnimationFrame(this.animate.bind(this));
}

Block.prototype.draw = function () {
    context.clearRect(0, 0, WIDTH, HEIGHT);
    context.fillStyle = "#000000";
    context.fillRect(this.x, this.y, this.width, this.height);
};

Block.prototype.animate = function (timestamp) {
    if (!this.start) {
        this.start = timestamp;
    }

    this.x = this.distanceToCross * (1 - ((timestamp - this.start) / this.timeToCross));
    this.draw();

    if (this.x <= 0 - this.width) {
        console.log(new Block());
    } else {
       requestAnimationFrame(this.animate.bind(this));
    }
};

console.log(new Block());

https://codepen.io/anon/pen/ZoXdPB

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...