0

私のプレーヤーは絵を描いていません。どんな助けでもいただければ幸いです！エンティティクラスのプレーヤーオブジェクトを作成したいと思います。基本的に、私のプレイヤーは描画していません。このエンティティクラスのアイデアを維持したいと思います。動かしたい、重力を持っているなど、ゲーム内のあらゆるものに使用できます。

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

2 に答える 2

0

コードにいくつかの小さな問題が見つかりました:)しかし、コードの複雑さに基づいて見つけることができると思います。

いくつかの全体的なコメント:

関数名を指定した 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-21T01:57:14.820 に答える