Question

我正在制作像飘扬的小鸟这样的游戏，唯一的不同是，小鸟通过使用鼠标指针在画布上的任意位置移动。因此，对于障碍物，我筑起了围墙，但围墙成堆出现。我无法使墙以规则的间隔出现在画布中。

所需的图片：-

我得到了：-

var context;
var screenWidth;
var screenHeight;
var ball;
var wall = [];
var gameStatus;
var mouseX;
var mouseY;

var running = false;
var raf;

gameIntialize();
gameDraw();

function Ball() {
  this.radius = 16;
  this.x = 25;
  this.y = screenHeight / 2;
  this.ballDraw = function() {
    context.beginPath();
    context.arc(this.x, this.y, 16, 0, 2 * Math.PI);
    context.fillStyle = 'green';
    context.fill();
  }
};


function Wall() {
  this.thickness = 10;
  this.wallPositionY = screenHeight;
  this.wallPositionX = screenWidth;

  this.spacing = 0;

  if (this.wallPositionY > 400 && this.wallPositionY <= 500) {
    this.spacing = Math.floor(Math.random() * (100 - 50) + 50);
  } else if (this.wallPositionY > 500) {
    this.spacing = Math.floor(Math.random() * (200 - 100) + 100);
  } else {
    this.spacing = 45;
  }

  this.heightFromTheTop = Math.floor(Math.random() * (this.wallPositionY / 6 - 3 / 4 * this.wallPositionY) + this.wallPositionY);
  this.heightFromTheBottom = this.wallPositionY - (this.heightFromTheTop + this.spacing);
  this.speed = 6;

  this.draw = function() {

    context.fillStyle = 'yellow';
    context.fillRect(this.wallPositionX, 0, this.thickness, this.heightFromTheTop);
    context.fillRect(this.wallPositionX, this.wallPositionY - this.heightFromTheBottom, this.thickness, this.heightFromTheBottom);
  }

  this.update = function() {
    this.wallPositionX = this.wallPositionX - this.speed;
  }

  this.offscreen = function() {
    if (this.wallPositionX < -this.thickness) {
      return true;
    } else {
      return false;
    }
  }
  this.newWall = function() {
    if (this.wallPositionX < screenWidth / 2) {
      return true;
    } else {
      return false;
    }
  }
};


function gameIntialize() {
  var canvass = document.getElementById('canvas');
  context = canvas.getContext('2d');

  screenWidth = window.innerWidth;
  screenHeight = window.innerHeight;

  canvas.width = screenWidth;
  canvas.height = screenHeight;

  ball = new Ball();
  wall.push(new Wall());


  // window.addEventListener('resize', resizeScreen, false);

  canvas.addEventListener('mousemove', function(e) {
    if (!running) {
      ball.x = e.clientX;
      ball.y = e.clientY;

    }
  });


}

function gameDraw() {
  context.fillStyle = "#aaaaaa";
  context.fillRect(0, 0, screenWidth, screenHeight);

  ball.ballDraw();

  for (var i = wall.length - 1; i >= 0; i--) {

    wall[i].draw();
    wall[i].update();

    if (wall[i].offscreen()) {
      wall.splice(i, 1);
    }
    var test_interval = setInterval(function() {
      wall.push(new Wall());
    }, 5000);

  }


  raf = window.requestAnimationFrame(gameDraw);

}

body {
  margin: 0px
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>game-run</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <canvas id="canvas"></canvas>

</body>
<script src="game.js"></script>


</html>

此代码有什么问题？感谢您的帮助！

Answer 1

您的setInterval创建代码位于游戏循环中。

这意味着您要为每个帧创建一个新的5秒间隔！

从那里拿走，一切都会好起来的。

修改后的代码段：

var context;
var screenWidth;
var screenHeight;
var ball;
var wall = [];
var gameStatus;
var mouseX;
var mouseY;

var running = false;
var raf;

gameIntialize();
gameDraw();

function Ball() {
  this.radius = 16;
  this.x = 25;
  this.y = screenHeight / 2;
  this.ballDraw = function() {
    context.beginPath();
    context.arc(this.x, this.y, 16, 0, 2 * Math.PI);
    context.fillStyle = 'green';
    context.fill();
  }
};


function Wall() {
  this.thickness = 10;
  this.wallPositionY = screenHeight;
  this.wallPositionX = screenWidth;

  this.spacing = 0;

  if (this.wallPositionY > 400 && this.wallPositionY <= 500) {
    this.spacing = Math.floor(Math.random() * (100 - 50) + 50);
  } else if (this.wallPositionY > 500) {
    this.spacing = Math.floor(Math.random() * (200 - 100) + 100);
  } else {
    this.spacing = 45;
  }

  this.heightFromTheTop = Math.floor(Math.random() * (this.wallPositionY / 6 - 3 / 4 * this.wallPositionY) + this.wallPositionY);
  this.heightFromTheBottom = this.wallPositionY - (this.heightFromTheTop + this.spacing);
  this.speed = 6;

  this.draw = function() {

    context.fillStyle = 'yellow';
    context.fillRect(this.wallPositionX, 0, this.thickness, this.heightFromTheTop);
    context.fillRect(this.wallPositionX, this.wallPositionY - this.heightFromTheBottom, this.thickness, this.heightFromTheBottom);
  }

  this.update = function() {
    this.wallPositionX = this.wallPositionX - this.speed;
  }

  this.offscreen = function() {
    if (this.wallPositionX < -this.thickness) {
      return true;
    } else {
      return false;
    }
  }
  this.newWall = function() {
    if (this.wallPositionX < screenWidth / 2) {
      return true;
    } else {
      return false;
    }
  }
};


function gameIntialize() {
  var canvass = document.getElementById('canvas');
  context = canvas.getContext('2d');

  screenWidth = window.innerWidth;
  screenHeight = window.innerHeight;

  canvas.width = screenWidth;
  canvas.height = screenHeight;

  ball = new Ball();
  wall.push(new Wall());


  // window.addEventListener('resize', resizeScreen, false);

  canvas.addEventListener('mousemove', function(e) {
    if (!running) {
      ball.x = e.clientX;
      ball.y = e.clientY;

    }
  });


}

function gameDraw() {
  context.fillStyle = "#aaaaaa";
  context.fillRect(0, 0, screenWidth, screenHeight);

  ball.ballDraw();

  for (var i = wall.length - 1; i >= 0; i--) {

    wall[i].draw();
    wall[i].update();

    if (wall[i].offscreen()) {
      wall.splice(i, 1);
    }

  }



  raf = window.requestAnimationFrame(gameDraw);

}

var test_interval = setInterval(function() {
  wall.push(new Wall());
}, 1500);

body {
  margin: 0px
}

<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <meta charset="utf-8">
  <title>game-run</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
  <canvas id="canvas"></canvas>

</body>
<script src="game.js"></script>


</html>

javascript-多个移动墙

1 个答案: