HTML5畫布遊戲產卵間隔

我想使用HTML5 Canvas和Javascript製作遊戲。我想要做的是在特定的時間間隔週圍在屏幕上移動一隻瓢蟲。當鼠標懸停在瓢蟲上時，它會增加間隔並在不同的地方產卵。現在我擁有它，所以當你刷新頁面時，瓢蟲會在不同的地方產生。我不知道如何使它自己更新或如何讓它檢測鼠標懸停。HTML5畫布遊戲產卵間隔

謝謝你提前。

這是我到目前爲止有：

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
</head> 
<body> 

<canvas id="myCanvas" width="600" height="480"></canvas> 
<script> 
    var canvas = document.getElementById('myCanvas'); 
    var context = canvas.getContext('2d'); 
    var posX = (Math.random() * 520) + 1; 
    var posY = (Math.random() * 400) + 1; 
    var ladybug = new Image(); 
    var background = new Image(); 
    var velocity = 5; 
    var FPS = 30; 

    update(); 
    draw(); 
    background(); 
    function background() { 
     background.onload = function() { 
      context.drawImage(background, 50, 50); 
     } 
     background.src = 'Images/grass.png'; 
    } 
    function draw() { 
     context.clearRect(0, 0, myCanvas.width, myCanvas.height); 
     context.fillStyle = "black"; // Set color to black 
     context.font = "bold 16px Arial"; 
     context.fillText("Sup Bro!", posX, posY); 
     ladybug.onload = function() { 
      context.drawImage(ladybug, posX, posY); 
     }; 

     ladybug.src = 'Images/Ladybug.png'; 

    } 
    function update() { 


    } 
</script> 


</body> 
</html>

來源

2013-10-20 justinC19

問題是什麼？ – Thew

第一。自行更新。

爲了讓錯誤在屏幕上移動，應定期用更新：

// instead of update() use setInterval(update, 1000/FPS) 
//update(); 
setInterval(update, 1000/FPS);

其中1000 = 1秒，1000/FPS =正是FPS每秒運行。您可以通過添加日誌更新您的瀏覽器控制檯檢查，它每秒執行30次：

function update(){ 
    console.log("Here we go"); 
}

但要小心：這將垃圾郵件的瀏覽器控制檯努力。

在這裏，您應該從畫布中清除舊的錯誤，重新計算座標並在新位置繪製新圖。

接下來的事情是去和修復你的背景。將你的background函數重命名爲drawBackground（或其他），因爲你有一個錯誤：已經定義了背景，它是一個圖像。

二。檢測懸停。

要檢查用戶是否懸停在錯誤你應該在畫布上使用的OnMouseMove事件：

function init() { 
    canvas.onmousemove = function(event) { 
    if (window.event) event = window.event; // IE hack 
    var mousex = event.clientX - canvas.offsetLeft; 
    var mousey = event.clientY - canvas.offsetTop; 
    mousemove(mousex, mousey); 
    } 
} 
function mousemove(x, y) { 
    console.log (x, y); 
    // here check, if mousex and mousey is in rectangle (x, y, x + width, y + width) 
    // where x, y, width and height are parameters of lady bug 
}

PS：

有很多討厭的框架在那裏了帆布和操作HTML和dom。他們讓生活更輕鬆。但在探索它們之前，在純粹的JS中做這件事很好。

來源

2013-10-20 17:15:09 Waterlink

謝謝你，這幫了我。如果我想這樣做，我只是點擊圖像，它顯示了一個警告，我會怎麼做？ – justinC19

@ justinC19你可以使用'onmousedown'和'onmouseup'事件。就像'onmousemove'一樣。 – Waterlink

HTML5畫布遊戲產卵間隔

回答

相關問題