Question

我需要帮助为我的飞鸟游戏做颜色检测脚本。我正在使用画布。我尝试在线搜索，但没有找到答案。

我需要帮助检测颜色。这是我的代码的一部分我需要被障碍物碰到时停止游戏

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

请检查您的密码笔

   window.onload = startGame();
var x = 20;
var y = 110;
var oldx = 20;
var oldy = 110;
var stopGame = false;


var start = true;//you could use
function startGame() {
createBackground();
createGamePiece();
createObstacles();
getObstaclesready();
makeObstaclesMOVE();
}

function createBackground() {
  var canvas = document.getElementById("canvas");
  var ctx = canvas.getContext("2d");
  ctx.fillStyle = "lightblue";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
}

 moveOBstacles = setInterval(makeObstaclesMOVE, 5);

makeObstaclesMOVE();

var canvas = document.getElementById("canvas");
window.addEventListener( "keydown", this.check, false);

function createGamePiece() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "lightblue";
  ctx.fillRect(oldx, oldy, 40, 35);
  ctx.fillStyle = "#ff6961";
  ctx.fillRect(x, y, 40, 35);
}

function createObstacles() {
  obstacle1();
  obstacle2();
  obstacle3();
}
var xOB1;
var xOB2;
var xOB3;

function obstacle1() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  createGamePiece();
  ctx.fillStyle = "lightblue";
  ctx.fillRect(xOB1+3, 100, 40 , 205);
  ctx.fillStyle = "green";
  ctx.fillRect(xOB1, 100, 40, 205); //switch with x and y
}

function obstacle2() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  createGamePiece();
  ctx.fillStyle = "lightblue";
  ctx.fillRect(xOB2+3, 0, 40 , 205);
  ctx.fillStyle = "green";
  ctx.fillRect(xOB2, 0, 40, 205);//switch with x and y
}

function obstacle3() {
  var c = document.getElementById("canvas");
  var ctx = c.getContext("2d");
  ctx.fillStyle = "green";
  ctx.fillRect(xOB3, 0, 40, 110);//switch with x and y
  ctx.fillRect(xOB3, 200, 40, 300);//switch with x and y
}

function getObstaclesready() {
  xOB1 = 500;
  xOB2 = 500;
  xOB3 = 500;
  obstacle1();
 console.log("get the OBSTCLE ready");
}

function makeObstaclesMOVE() {
      if (!stopGame) {
        if (xOB1 > -40) {
        xOB1 = xOB1 - 1;// **change obstacle position**   **SET INTERVAL*!!!
        obstacle1();
        console.log(" ...... \nmove them");
      }if (xOB1 < 0.40*500) {
        xOB2 = xOB2 - 1;
        obstacle2();
      }
      if (x + 39 > xOB1 & y > 100-35 & xOB1 > 50) {
          stopGame = true;
      }
    }
  }


function check(e) {

if ( e.keyCode == 38 ) { //up arrow
  console.log("up");
 //****for velocity like*****
 oldx = x;
 oldy = y;
  for(var i = 0; i<2.1; i+=0.5){
    y -=i;
    const context = canvas.getContext('2d');
  }
  console.log(y);
  //createGamePiece();
}
if ( e.keyCode == 40 ) { //down arrow
console.log("down");
oldx = x;
oldy = y;
for(var i = 0; i<2.1; i+=0.5){
  y += i;
  //createGamePiece();
}
const context = canvas.getContext('2d');

console.log(y);
//createGamePiece();
 }
}

Answer 1

实际上是您在寻找Axis-Aligned Bounding Box Collisions。也就是说，这里的代码存在一些问题，我将在我的答案中进行讨论以有效使用冲突。仍然有几处可以改进，这仅仅是为了涵盖更多关键项。

对于任何进行开发（或一般而言，开发）的人，我建议的最大建议是使用Object Oriented Programming (OOP)。您可以创建自己的对象以与属性一起使用，而不必在游戏中到处都是一堆魔幻数字并为游戏中的x，y，宽度，高度等分别设置变量（会很快变得混乱）。和您定义的方法。尽管我建议使用ES6 classes，但我将在此示例中使用ES5（因为这是代码的样子），

我们想要的第一件事是障碍和玩家都可以使用的通用Block类。只是一个存储其位置（x，y），尺寸（宽度，高度）的类。还有一种绘制和移动自身的方法：

function Block(x, y, w, h) {
  this.x = x;
  this.y = y;
  this.w = w;
  this.h = h;

  this.draw = function() {
    ctx.fillStyle = "lightblue";
    ctx.fillRect(this.x+3, this.y, this.w , this.h);
    ctx.fillStyle = "green";
    ctx.fillRect(this.x, this.y, this.w, this.h);
  }

  this.move = function(dx, dy) {
    this.x += dx;
    this.y += dy;
  }
}

这样，您可以制造许多障碍并将它们存储在一个数组中，以轻松地绘制和移动每个障碍。接下来，我们要为Player提供一个类。 Player类似于Block类，但是当用户使用箭头键时，它将需要一种更新自身的方法：

function Player(x, y, w, h) {
  this.moveingUp = this.movingDown = false; // Tracks if the arrow keys are pressed/released
  this.speed = 1;
  Block.call(this, x, y, w, h); // Player inherits from Block

  this.draw = function() {
    ctx.fillStyle = "#ff6961";
    ctx.fillRect(this.x, this.y, this.w, this.h);
  }

  this.update = function() {
    if(this.movingUp) this.move(0, -this.speed);
    if(this.movingDown) this.move(0, this.speed);
  }
}

您可能会注意到，播放器的移动似乎与您在Word中保留空格时的移动类似，这样它的移动会先移动一点，然后再移动后记。为了使移动平稳，您可以使用布尔变量（this.moveingUp，this.movingDown）来跟踪，当按下箭头键时为true，在释放箭头键时为false：

window.addEventListener( "keydown", function(e) { check(e, true)} );
window.addEventListener( "keyup", function(e) { check(e, false)} );

function check(e, isDown) {
  if ( e.keyCode == 38 ) player.movingUp = isDown; // player is defined below
  if ( e.keyCode == 40 ) player.movingDown = isDown;
}

您可以使用startGame作为初始化游戏的方式（并可以用作重新启动）。在这里您可以创建播放器和障碍物：

function startGame() {
  canvas = document.getElementById("canvas");
  ctx = canvas.getContext("2d");
  obstacles = [ new Block(500, 100, 40, 205), 
                new Block(800, 0, 40, 205), new Block(1200, 100, 40, 300) ];
  player = new Player(20, 110, 40, 35);
}

定义了两个具有共享属性（x，y，w，h）的对象。您可以使collides方法类似于第一个链接中的方法：

function collides(a, b) {
  return (a.x < b.x + b.w && a.x + a.w > b.x &&  a.y < b.y + b.h && a.y + a.h > b.y);
};

最后，在定义了对象的情况下，核心游戏逻辑变得非常简单且易于遵循：

function makeObstaclesMOVE() {
  createBackground(); // Draw the background
  player.update();    // Moves the player if the user moved them
  player.draw();      // Draws the player on the screen  
  obstacles.forEach(function(obstacle) {
    obstacle.move(-1, 0);          // Moves all obstacles to the left
    obstacle.draw();               // Draws all obstacles 
    if(collides(player, obstacle)) // If the player touches an obstacle it's game over
        stopGame = true;
  });
  if(stopGame) clearInterval(moveOBstacles); // Clear the interval when the game is over 
}

Here is the full code as a codepen

如何检测画布游戏的颜色？

1 个答案: