Question

如何在单击按钮时添加在画布上水平移动的随机大小的黑色块？

以下是游戏的工作原理：您将实施的游戏称为“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>

Answer 1

我认为你得到了＃34;动画如何在画布中运作＆＃34;错误。它不是一些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

如何在单击按钮时添加在画布上水平移动的随机大小的黑色块？

1 个答案: