Question

我的播放器没有画画。任何帮助，将不胜感激！我想制作一个玩家对象，即实体类。基本上，我的播放器不是绘图，我想保留这个实体类的想法。我可以将它用于我想要移动的游戏中的任何东西，有引力等等。

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

Answer 1

我认为您在画布加载之前尝试绘制图像。使用onLoad之类的内容确保页面首先加载

Answer 2

发现你的代码存在几个小问题:)但我相信你可以根据代码的复杂程度找到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>

HTML5 Canvas游戏 - 实体类

2 个答案: