爲什麼「螃蟹」（一個實體）不像「怪物」（也是一個實體）？

我正在開發一款遊戲，我想知道爲什麼不是像「怪物」（也是一個實體）那樣的「螃蟹」（一個實體）。我的意思是，如果我觸摸妖精怪物，我會得到一個點，但我只是走過螃蟹。我試圖添加一個if..else，但隨後玩家每秒獲得數千個點數。我做錯了什麼？爲什麼「螃蟹」（一個實體）不像「怪物」（也是一個實體）？

// 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/monster.png"; 
 

 
// Crab image 
 
var crabReady = false; 
 
var crabImage = new Image(); 
 
crabImage.onload = function() { 
 
    crabReady = true; 
 
}; 
 
crabImage.src = "images/old/hero.png"; 
 

 
// Game objects 
 
var hero = { 
 
    speed: 300 // movement in pixels per second 
 
}; 
 
var monster = {}; 
 
var crab = {}; 
 
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)); 
 

 
    // Throw the crab somewhere on the screen randomly 
 
    crab.x = 32 + (Math.random() * (canvas.width - 64)); 
 
    crab.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); 
 
    } 
 

 
    if (crabReady) { 
 
    ctx.drawImage(crabImage, crab.x, crab.y); 
 
    } 
 

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

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

 
    update(delta/1000); 
 
    render(); 
 

 
    then = now; 
 

 
    // Request to do this again ASAP 
 
    requestAnimationFrame(main); 
 
}; 
 

 
// Cross-browser support for requestAnimationFrame 
 
var w = window; 
 
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; 
 

 
// Let's play this game! 
 
var then = Date.now(); 
 
reset(); 
 
main();

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <title>Underbound</title> 
 
    <link rel="stylesheet" type="text/css" href="style.css"> 
 
</head> 
 
<body> 
 
    <div class="game"> 
 
    <script src="js/game.js"></script> 
 
    </div> 
 
</body> 
 
</html>

來源

2016-02-02 svalis

您的'update（）'函數在檢查「touch」時不會注意螃蟹。 – Pointy

我爲螃蟹添加了別的東西，但正如我所說的那樣，玩家在幾秒鐘內就獲得了數千分。 – svalis

如果你沒有發佈不起作用的代碼，沒有人能告訴你爲什麼它不起作用。 – Pointy

因爲如果英雄monster碰撞你只是檢查。

hero.x <= (monster.x + 32) && monster.x <= (hero.x + 32) && hero.y <= (monster.y + 32) && monster.y <= (hero.y + 32)

相反，你應該創建一個函數來檢查，如果他們碰撞：

function isColliding(a, b) { 
    return a.x <= (b.x + 32) && b.x <= (a.x + 32) && 
     a.y <= (b.y + 32) && b.y <= (a.y + 32); 
} 

if (isColliding(hero, monster)) { ...

然後還用檢查他們是否有crab碰撞。

if (isColliding(hero, crab)) { ...

它會更持久（直到你有一大堆的怪物），如果你把所有的「怪物」到一個數組，然後檢查對陣列中的每個怪物。

對於快速獲得大量積分的問題：您必須從遊戲區域移除怪物（或螃蟹），並在update階段停止檢查碰撞，否則玩家將繼續與螃蟹相撞並獲得收益點。

對此的一個解決方案是給你的怪物一個active（或類似的屬性）。默認情況下，這是真實的，但是當玩家與他們碰撞時，這將是錯誤的。那麼你只會畫他們，並檢查碰撞，如果active是真的。

來源

2016-02-02 18:26:03

我應該在'function isColliding（a，b）'中保留'a，b'嗎？ – svalis

@svalis當然，或者任何你想要的名字。他們只是參數名稱。他們可以是任何你想要的。 'a'和'b'只對我有意義。 –

爲什麼「螃蟹」（一個實體）不像「怪物」（也是一個實體）？

回答

相關問題