Проверить, когда объект сталкивается с границей холста

Question

Я довольно новичок в Canvas 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; 
}; 

С уважением.