HTML5 Canvas游戏-实体类

HTML5 Canvas game - Entity class

本文关键字：实体 游戏 Canvas HTML5      更新时间：2023-09-26

我的播放器没有绘图。任何帮助将不胜感激!我想做一个播放器对象，那是实体类。基本上，我的玩家不画画，我想保留这个实体类的想法。我可以在游戏中使用它来移动任何我想要移动的东西，拥有重力等等。

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;
});

在你的代码中发现了几个小问题:)但是我相信你能够根据你代码的复杂性找到它们，呵呵，我的建议是:使用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>

我认为你试图在画布加载之前绘制图像。使用onLoad来确保页面首先完成加载

相关文章：