Javascript HTML5画布游戏-实体类_Javascript_Html_Canvas_Entity_Html5 Canvas

Javascript HTML5画布游戏-实体类

javascript html canvas html5-canvas

Javascript HTML5画布游戏-实体类,javascript,html,canvas,entity,html5-canvas,Javascript,Html,Canvas,Entity,Html5 Canvas,我的球员没有画画。任何帮助都将不胜感激！我想创建一个player对象，即实体类。基本上，我的播放器不是画画，我想保留这个实体类的想法。我可以用它来做游戏中任何我想移动的东西，比如重力等等 const FPS = 60; var playerSprite = new Image(); playerSprite.src = 'http://placehold.it/50x75'; var canvas = null; var context = null; var keys = []; window

我的球员没有画画。任何帮助都将不胜感激！我想创建一个player对象，即实体类。基本上，我的播放器不是画画，我想保留这个实体类的想法。我可以用它来做游戏中任何我想移动的东西，比如重力等等

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

const FPS=60；
var playerSprite=新图像（）；
playerSprite.src=http://placehold.it/50x75';
var=null；
var-context=null；
var键=[]；
window.onload=init；
setInterval（函数（）{
更新（）；
draw（）；
},
1000/帧
);
函数init（）{
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
设定间隔（绘图，1000/FPS）；
}
函数更新（）{
player.update（）；
}
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
player.draw（player.xpos，player.ypos）；
}
功能实体（xpos、YPO、xd、yd、速度、yvel、重力、宽度、高度、图像SRC、控件）{
this.xpos=xpos；
this.ypos=ypos；
速度=速度；
this.yvel=yvel；
重力=重力；
这个。宽度=宽度；
高度=高度；
this.imagesrc=imagesrc；
这个。控制=控制；
}
Entity.prototype.draw=函数（x，y）{
context.drawImage（this.imagesrc，x，y）；
}
Entity.prototype.update=函数（）{
this.xpos+=this.xd；
this.ypos+=this.yd；
//伊维尔城市
if（this.ypos>=canvas.height-this.height）{
这是0.yvel=0；
}否则{
this.yvel+=this.gravity；
this.ypos+=this.yvel；
}
//伊韦洛城的尽头
//墙
如果（this.xpos>=canvas.width-this.width）{
this.xpos=canvas.width-this.width；
}else if（this.xpos我认为您正在尝试在画布加载之前绘制图像。请使用类似于onLoad
的方法确保页面首先加载完毕发现您的代码存在一些小问题：）但我相信，基于代码的复杂性，您将能够找到，呵呵，我的建议是：使用console.debug（），它是您最好的朋友
一些总体意见：
带有函数名的setInterval看起来更可读，
setInterval(gameLoop, 1000 / FPS);

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

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

看起来比：
setInterval( function() {
    console.debug('game loop');
    update();
    draw();
}, 1000 / FPS);

检查映像是否已加载，有时http请求花费的时间比我们预期的要长…
setInterval(gameLoop, 1000 / FPS);

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

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>


常数FPS=60；
var imgReady=假；
var playerSprite=新图像（）；
playerSprite.onload=function（）{imgReady=true；}；
playerSprite.src=http://placehold.it/50x75.jpg';
var=null；
var-context=null；
var键=[]；
var播放器；
window.onload=init；
函数init（）{
调试（'init（）'）；
canvas=document.getElementById（'canvas'）；
context=canvas.getContext（'2d'）；
player=新实体（20,20,0,0,3,0,1,50,75，playerSprite，true）；
设置间隔（gameLoop，1000/FPS）；
}
函数gameLoop（）{
调试（“游戏循环”）；
更新（）；
draw（）；
}
函数更新（）{
player.update（）；
}
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
player.draw（）；
}
功能实体（xpos、YPO、xd、yd、速度、yvel、重力、宽度、高度、图像SRC、控件）{
this.xpos=xpos；
this.ypos=ypos；
this.xd=xd；
this.yd=yd；
速度=速度；
this.yvel=yvel；
重力=重力；
这个。宽度=宽度；
高度=高度；
this.imagesrc=imagesrc；
这个。控制=控制；
}
Entity.prototype.draw=函数（）{
如果（imgReady）{
context.drawImage（this.imagesrc、this.xpos、this.ypos）；
}
}
Entity.prototype.update=函数（）{
this.xpos+=this.xd；
this.ypos+=this.yd；
//伊维尔城市
if（this.ypos>=canvas.height-this.height）{
这是0.yvel=0；
}否则{
this.yvel+=this.gravity；
this.ypos+=this.yvel；
}
//伊韦洛城的尽头
//墙
如果（this.xpos>=canvas.width-this.width）{
this.xpos=canvas.width-this.width；
}否则如果（this.xpos问题到底是什么？您的代码包含几个问题：您不必在画布上使用“setInterval”，而是requestAnimationFrame
，您不需要为playerSprite声明加载事件，您有2个setInterval。您的结构使用对象表示法，但以过程方式设计。您可能应该在尝试渲染图像之前，请在总体OOP中对代码进行签名。我相信您会对应用程序有更好的了解，并找到不显示播放器的原因。我始终建议用户使用此库来处理用户输入，而不是自己编写所有事件处理程序：谢谢！我也将切换到requestAnimationLoop。我的代码有点邋遢，哈哈。谢谢你帮我清理。我只是一个15岁的孩子，试图弄明白这一点，哈哈。