檢查對象時，用帆布

Question

的邊界衝突我是相當新的畫布HTML5和很好奇，想知道如何檢查，如果在我的遊戲中「英雄」已與畫布的邊界衝突，因爲我想給它一個警報或者其他的東西。

這裏是我當前的代碼：

// Create the canvas 
var canvas = document.createElement("canvas"); 
var ctx = canvas.getContext("2d"); 
canvas.width = 512; 
canvas.height = 480; 
document.body.appendChild(canvas); 

// Background image 
var bgReady = false; 
var bgImage = new Image(); 
bgImage.onload = function() { 
    bgReady = true; 
}; 
bgImage.src = "images/background.png"; 

// Hero image 
var heroReady = false; 
var heroImage = new Image(); 
heroImage.onload = function() { 
    heroReady = true; 
}; 
heroImage.src = "images/hero.png"; 

// Monster image 
var monsterReady = false; 
var monsterImage = new Image(); 
monsterImage.onload = function() { 
    monsterReady = true; 
}; 
monsterImage.src = "images/flamingo.png"; 

// Game objects 
var hero = { 
    speed: 256 // movement in pixels per second 
}; 
var monster = {}; 
var monstersCaught = 0; 

// Handle keyboard controls 
var keysDown = {}; 

addEventListener("keydown", function (e) { 
    keysDown[e.keyCode] = true; 
}, false); 

addEventListener("keyup", function (e) { 
    delete keysDown[e.keyCode]; 
}, false); 

// Reset the game when the player catches a monster 
var reset = function() { 
    hero.x = canvas.width/2; 
    hero.y = canvas.height/2; 

    // Throw the monster somewhere on the screen randomly 
    monster.x = 32 + (Math.random() * (canvas.width - 64)); 
    monster.y = 32 + (Math.random() * (canvas.height - 64)); 
}; 

// Update game objects 
var update = function (modifier) { 
    if (38 in keysDown) { // Player holding up 
     hero.y -= hero.speed * modifier; 
    } 
    if (40 in keysDown) { // Player holding down 
     hero.y += hero.speed * modifier; 
    } 
    if (37 in keysDown) { // Player holding left 
     hero.x -= hero.speed * modifier; 
    } 
    if (39 in keysDown) { // Player holding right 
     hero.x += hero.speed * modifier; 
    } 

    // Are they touching? 
    if (
     hero.x <= (monster.x + 32) 
     && monster.x <= (hero.x + 32) 
     && hero.y <= (monster.y + 32) 
     && monster.y <= (hero.y + 32) 
    ) 
    { 
     ++monstersCaught; 
     reset(); 
    } 


}; 

// Draw everything 
var render = function() { 
    if (bgReady) { 
     ctx.drawImage(bgImage, 0, 0); 
    } 

    if (heroReady) { 
     ctx.drawImage(heroImage, hero.x, hero.y); 
    } 

    if (monsterReady) { 
     ctx.drawImage(monsterImage, monster.x, monster.y); 
    } 

    // Score 
    ctx.fillStyle = "rgb(250, 250, 250)"; 
    ctx.font = "24px Helvetica"; 
    ctx.textAlign = "left"; 
    ctx.textBaseline = "top"; 
    ctx.fillText("Flamingos slaughtered: " + monstersCaught, 32, 32); 

}; 

// The main game loop 
var main = function() { 
    var now = Date.now(); 
    var delta = now - then; 

    update(delta/1000); 
    render(); 

    then = now; 
}; 

// Let's play this game! 
reset(); 
var then = Date.now(); 
setInterval(main, 1); // Execute as fast as possible 

Answer 1

基本上什麼GameAlchemist告訴，應該工作。

但是，如果調整屏幕大小或類似的東西。

你應該去

0 <= x < window.innerWidth 

和

0 <= x < window.innerHeight 

條件：窗口的大小和畫布大小應該等於

Answer 2

我解決了這個問題：

var update = function (modifier) { 
    if (38 in keysDown) { // Player holding up 
     hero.y -= hero.speed * modifier; 
    } 
    if (40 in keysDown) { // Player holding down 
     hero.y += hero.speed * modifier; 
    } 
    if (37 in keysDown) { // Player holding left 
     hero.x -= hero.speed * modifier; 
    } 
    if (39 in keysDown) { // Player holding right 
     hero.x += hero.speed * modifier; 
    } 

    // Are they touching? 
    if (
     hero.x <= (monster.x + 32) 
     && monster.x <= (hero.x + 32) 
     && hero.y <= (monster.y + 32) 
     && monster.y <= (hero.y + 32) 
    ) { 
     ++monstersCaught; 
     reset(); 
    } 
    if(hero.x <= 0){ 
     hero.x = 0; 
    } 
    else if(isMaxWidth()){ 
     hero.x = canvas.width -32 
    } 
    if(hero.y <= 0){ 
     hero.y = 0; 
    } 
    else if(isMaxHeight()){ 
     hero.y = canvas.height -32 
    } 

}; 

var isMaxWidth = function(){ 
    return hero.x >= canvas.width - 32; 
}; 

var isMaxHeight = function(){ 
    return hero.y >= canvas.height - 32; 
}; 

問候。