我需要帮助为我的飞鸟游戏做颜色检测脚本。 我正在使用画布。我尝试在线搜索,但没有找到答案。
我需要帮助检测颜色。 这是我的代码的一部分 我需要被障碍物碰到时停止游戏
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();
}
}
答案 0 :(得分:0)
实际上是您在寻找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
}