HTML5 Canvas游戏 - 实体类

我的播放器没有绘制。任何帮助，将不胜感激！我想制作一个播放器对象，即实体类。基本上，我的球员没有绘画，我想保留这个实体类的想法。我可以用它在，我不想动，有重力游戏的东西，等HTML5 Canvas游戏 - 实体类

const FPS = 60; 
var playerSprite = new Image(); 
playerSprite.src = 'http://placehold.it/50x75'; 
var canvas = null; 
var context = null; 
var keys = []; 
window.onload = init; 

setInterval (function() { 
       update(); 
       draw(); 
       }, 
       1000/FPS 
      ); 

function init(){ 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 
    setInterval(draw, 1000/FPS); 
} 

function update(){ 
    player.update(); 
} 

function draw(){ 
    context.clearRect(0,0,canvas.width,canvas.height); 
    player.draw(player.xpos, player.ypos); 
} 

function Entity(xpos,ypos,xd,yd,speed,yvel,gravity,width,height,imagesrc,controls){ 
    this.xpos = xpos; 
    this.ypos = ypos; 
    this.speed = speed; 
    this.yvel = yvel; 
    this.gravity = gravity; 
    this.width = width; 
    this.height = height; 
    this.imagesrc = imagesrc; 
    this.controls = controls; 
} 

Entity.prototype.draw = function(x,y){ 
    context.drawImage(this.imagesrc, x, y); 
} 

Entity.prototype.update = function(){ 
    this.xpos += this.xd; 
    this.ypos += this.yd; 

    // yVelocity 
    if(this.ypos >= canvas.height - this.height){ 
     this.yvel = 0; 
    }else{ 
     this.yvel += this.gravity; 
     this.ypos += this.yvel; 
    } 
    // end of yVelocity 




    // walls 
    if(this.xpos >= canvas.width - this.width){ 
     this.xpos = canvas.width - this.width; 
    }else if(this.xpos <= canvas.width - canvas.width){ 
     this.xpos = canvas.width - canvas.width; 
    } 
    // end of walls 




    // player controls 
    if(this.controls){ 
     if (keys[39]) { 
      this.moveRight(); 
     }else if (keys[37]){ 
      this.moveLeft(); 
     }else{ 
      this.stopMove(); 
     } 
    } 

     Entity.prototype.moveRight = function(speed){ 
     this.xd = speed; 
    } 

    Entity.prototype.moveLeft = function(speed){ 
     this.xd = speed; 
    } 

    Entity.prototype.stopMove = function(){ 
     this.xd = 0; 
    } 
    // end of player controls 
} 

var player = new Entity(20,20,0,0,3,0,1,50,75,playerSprite,true); {} 

// key events 
document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 
document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
});

来源

2013-03-20 Benji Lee Hansen

究竟是什么问题？您的代码包含以下几个问题：您不必为Canvas使用'setInterval'，而是使用'requestAnimationFrame'，而不是为您的playerSprite声明加载事件，并且您有2个setInterval。你的结构使用对象符号，但是以程序方式设计。可能你应该在设计你的图像之前，在总体OOP中设计你的代码。我很肯定你会更好地了解你的应用，并找出你的播放器不显示的原因。 – 2013-03-20 23:40:04

我总是建议人们使用这个库来处理用户输入，而不是自己编写所有的事件处理程序：http://georgealways.github.com/gee/ – Saturnix 2013-03-21 01:39:34

发现与您的代码的几个小问题:)但我相信你会能够找到然后根据您的代码的复杂性hehehe，我的重新塑造是：使用console.debug（），它是你最好的朋友！

一些总体评论：

的setInterval与函数看起来更具可读性的名称，

setInterval(gameLoop, 1000/FPS); 

function gameLoop() { 
    console.debug('game loop'); 
    update(); 
    draw(); 
}

看起来优于：

setInterval(function() { 
    console.debug('game loop'); 
    update(); 
    draw(); 
}, 1000/FPS);

检查，如果加载图像，有时http请求比我们预计的要长...

playerSprite.onload = function(){ imgReady = true; };

玩得开心的代码，请评论你的进步！

<html> 
<body> 
<canvas width="640" height="480" id="canvas" /> 

<script> 
const FPS = 60; 
var imgReady = false; 
var playerSprite = new Image(); 
playerSprite.onload = function(){ imgReady = true; }; 
playerSprite.src = 'http://placehold.it/50x75.jpg'; 

var canvas = null; 
var context = null; 
var keys = [ ]; 
var player; 
window.onload = init; 

function init() { 
    console.debug('init()'); 
    canvas = document.getElementById('canvas'); 
    context = canvas.getContext('2d'); 

    player = new Entity(20, 20, 0, 0, 3, 0, 1, 50, 75, playerSprite, true); 
    setInterval(gameLoop, 1000/FPS); 
} 

function gameLoop() { 
    console.debug('game loop'); 
    update(); 
    draw(); 
} 

function update() { 
    player.update(); 
} 

function draw() { 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    player.draw(); 
} 

function Entity(xpos, ypos, xd, yd, speed, yvel, gravity, width, height, imagesrc, controls) { 
    this.xpos = xpos; 
    this.ypos = ypos; 
    this.xd = xd; 
    this.yd = yd; 
    this.speed = speed; 
    this.yvel = yvel; 
    this.gravity = gravity; 
    this.width = width; 
    this.height = height; 
    this.imagesrc = imagesrc; 
    this.controls = controls; 
} 

Entity.prototype.draw = function() { 
    if(imgReady){ 
     context.drawImage(this.imagesrc, this.xpos, this.ypos); 
    } 
} 

Entity.prototype.update = function() { 

    this.xpos += this.xd; 
    this.ypos += this.yd; 

    // yVelocity 
    if (this.ypos >= canvas.height - this.height) { 
     this.yvel = 0; 
    } else { 
     this.yvel += this.gravity; 
     this.ypos += this.yvel; 
    } 
    // end of yVelocity 

    // walls 
    if (this.xpos >= canvas.width - this.width) { 
     this.xpos = canvas.width - this.width; 
    } else if (this.xpos <= canvas.width - canvas.width) { 
     this.xpos = canvas.width - canvas.width; 
    } 
    // end of walls 

    // player controls 
    if (this.controls) { 
     if (keys[39]) { 
      this.moveRight(); 
     } else if (keys[37]) { 
      this.moveLeft(); 
     } else { 
      this.stopMove(); 
     } 
    } 
    // end of player controls 

    console.debug('update() x=' + this.xpos + ' y=' + this.ypos); 
} 

Entity.prototype.moveRight = function (speed) { 
    this.xd = this.speed; 
} 

Entity.prototype.moveLeft = function (speed) { 
    this.xd -= this.speed; 
} 

Entity.prototype.stopMove = function() { 
    this.xd = 0; 
} 

// key events 
document.body.addEventListener("keydown", function (e) { 
    keys[e.keyCode] = true; 
}); 

document.body.addEventListener("keyup", function (e) { 
    keys[e.keyCode] = false; 
}); 

</script> 

</body> 
</html>

来源

2013-03-21 01:57:14

谢谢！我也切换到requestAnimationLoop。我的代码有点草率，哈哈。感谢您帮助我清理它。我只是一个15岁的孩子，试图解决这个问题，哈哈。 – 2013-03-24 03:59:42

我想你想绘制图像画布加载之前。使用类似onLoad以确保页面完成加载第一

来源

2013-03-21 01:16:43 Jarrod

HTML5 Canvas游戏 - 实体类

回答

相关问题