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遊戲 - 實體類

回答

相關問題