我会尽量做到精确。
第一期:如果您在代码中查看,我有一个drawObjects
函数,该函数调用collisionDetection
函数。
在collisionDetection
内部,如果player(mario)
碰到了object(Goomba)
,则游戏应该结束并且动画应该停止。
但是,即使取消动画帧,动画也不会以某种方式停止。
第二个问题:我想加快Objects(Goomba)
的速度,但是如果我尝试将其x
的排名降低两个以上(例如objects[i].x -= 3
) ,object(goomba)
除了第一个以外什么都没有显示。
那么,在这个问题上,我寻求的是,还有另一种更好的方法来加速古姆巴吗?
代码:
var startTime = 0;
var rAF;
var cnv = document.getElementById("canvas");
var ctx = cnv.getContext("2d");
var cWidth = cnv.width = window.innerWidth-10;
var cHeight = cnv.height = window.innerHeight-20;
var bgImg = new Image();
var playerImg = new Image();
var goombaImg = new Image();
bgImg.src = "images/mariobg.png";
playerImg.src = "images/mario.png";
goombaImg.src = "images/goomba.png";
var game = {
state : true,
score : 0
}
var player = {
x : 15,
y : cHeight-110,
w : 75,
h : 75,
canJump : true,
xVelocity : 0,
yVelocity : 0
}
var objects = [];
objects[0]={
x : cWidth-110,
y : cHeight-90,
w : 50,
h : 50,
}
var controller = {
moveLeft : false,
moveUp : false,
moveRight : false,
keyListener : function(event){
var keyState = (event.type == 'keydown') ? true : false ;
switch (event.keyCode) {
case 37:
controller.moveLeft = keyState;
break;
case 38:
controller.moveUp = keyState;
break;
case 39:
controller.moveRight = keyState;
break;
}
}
}
document.addEventListener('keydown', controller.keyListener);
document.addEventListener('keyup', controller.keyListener);
function draw(timestamp){
//console.log(performance.now);
ctx.drawImage(bgImg, 0, 0 , cWidth, cHeight);
drawPlayer();
drawObjects();
drawScore();
drawDevInfo();
rAF = requestAnimationFrame(draw);
}
function drawPlayer(){
if(controller.moveLeft){
player.xVelocity -= 0.5;
}
if(controller.moveRight){
player.xVelocity += 0.5;
}
if(controller.moveUp && player.canJump == true){
player.yVelocity -= 25;
player.canJump = false;
}
player.x += player.xVelocity;
player.y += player.yVelocity;
player.xVelocity *= 0.95;
player.yVelocity *= 0.95;
player.yVelocity += 1.3;
if(player.y > cHeight-110){
player.y = cHeight-110;
player.yVelocity = 0;
player.canJump = true;
}
if(player.x > cWidth || player.x < 0){
player.x = 0;
}
ctx.drawImage(playerImg, player.x, player.y, player.w, player.h);
}
function drawObjects(){
for (let i = 0; i < objects.length; i++) {
ctx.drawImage(goombaImg, objects[i].x, objects[i].y, objects[i].w, objects[i].h);
objects[i].x-=1;
//var now = Date.now;
//timeElapsed = now - startTime;
//console.log(timeElapsed);
if(objects[i].x == cWidth/2){
objects.push({
x : cWidth-110,
y : cHeight-90,
w : 50,
h : 50
});
}
collisionDetection(i);
}
}
function collisionDetection(i){
if (player.x+player.w > objects[i].x && player.x < objects[i].x+objects[i].w && (player.y+player.h > objects[i].y)) {
ctx.font = "25px Verdana";
ctx.fillText("GAME OVER",cWidth/2, cHeight/2 );
drawScore();
drawDevInfo();
cancelAnimationFrame(rAF);
}
else {
game.score = game.score + 1;
}
}
function drawScore(){
ctx.font = "15px Verdana";
ctx.fillText("Score : "+ game.score, 15, 20);
ctx.fillStyle="white";
}
function drawDevInfo(){
ctx.font = "15px Verdana";
ctx.fillText("@KaushikCodeArts - 2019 ", cWidth/2-15, 20 );
ctx.fillStyle="white";
}
//draw();
rAF = requestAnimationFrame(draw);