HTML5 Canvas小遊戲基礎：用戶交互

2020 年 7 月 30 日
筆記
JavaScript程式設計

交互是遊戲的根本。缺少了用戶交互，遊戲就不能稱之為遊戲，只能說是動畫或電影。事件是瀏覽器響應用戶交互操作的一種機制。

1．事件和事件執行

事件定義了用戶與頁面交互時產生的各種操作（主要通過滑鼠或熱鍵的動作引發），例如單擊頁面中某一個對象時，就產生一個單擊（onClick）操作事件。瀏覽器在程式運行的大部分時間都等待交互事件的發生，並在事件發生時，自動調用事件處理函數，完成事件處理過程。

事件不僅可以在用戶交互過程中產生，而且瀏覽器自己的一些動作也可以產生事件，例如，當載入一個頁面時，就會發生onLoad事件，卸載一個頁面時，就會發生onUnload事件等。

常見的HTML事件有：

onchange HTML元素改變

onclick 用戶點擊 HTML 元素

onmouseover 用戶在一個HTML元素上移動滑鼠

onmouseout 用戶從一個HTML元素上移開滑鼠

onkeydown 用戶按下鍵盤按鍵

onload 瀏覽器已完成頁面的載入

當在HTML頁面中使用JavaScript時，JavaScript可以觸發這些事件。這樣，可以在事件觸發時通過JavaScript執行一些程式碼完成特定的操作。

例如，通過單擊一個「改變」按鈕激活change（）事件處理程式的方法為：

在onClick等號後，可以使用自己編寫的函數作為事件處理程式，也可以使用JavaScript中內部的函數，還可以直接使用JavaScript的程式碼等。例如：

在HTML頁面中，可以使用下列幾種方法來執行JavaScript事件程式碼。

（1）HTML事件屬性可以直接執行JavaScript程式碼或調用 JavaScript 函數。

例1 水平運動的小木塊。

在HTML頁面中有一塊畫布和兩個按鈕，單擊「開始」按鈕後，在畫布中有一個紅色小木塊進行水平移動，單擊「暫停」按鈕後，小木塊停止移動，再次單擊「開始」按鈕，小木塊繼續移動。

編寫兩個事件處理函數start()和stop()，並為兩個按鈕的onClick事件屬性指定各自調用的函數。

編寫如下的HTML程式碼。

<!DOCTYPE html>

<head>

<title>按鈕控制的簡單動畫</title>

</head>

<body>

</canvas><br>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var handle = 0;

var i=0;

var running=false;

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "red";

ctx.fillRect(i,90, 20, 20);

i=i+3;

if (i>=canvas.width) i=0;

handle = window.requestAnimationFrame(move);

}

function start()

{

if (!running)

{

handle=requestAnimationFrame(move);

running=true;

}

function stop()

{

window.cancelAnimationFrame(handle);

handle=null;

running=false;

}

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中看到受按鈕控制的水平移動的小木塊，如圖1所示。

圖1 水平運動的小木塊

（2）為HTML元素指定相應的事件處理程式。

可以在JavaScript程式碼中為為HTML元素指定相應的事件處理程式。例如，例1的程式也可以編寫如下。

<!DOCTYPE html>

<head>

<title>按鈕控制的簡單動畫</title>

</head>

<body>

</canvas><br>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var handle = 0;

var i=0;

var running=false;

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "red";

ctx.fillRect(i,90, 20, 20);

i=i+3;

if (i>=canvas.width) i=0;

handle = window.requestAnimationFrame(move);

}

var startBtn=document.getElementById('start');

var stopBtn=document.getElementById('stop');

startBtn.onclick=function()

{

if (!running)

{

handle=requestAnimationFrame(move);

running=true;

}

stopBtn.onclick=function()

{

window.cancelAnimationFrame(handle);

handle=null;

running=false;

}

</script>

</body>

</html>

（3）使用addEventListener()方法。

通過addEventListener()方法可以為指定的HTML元素添加事件句柄，調用格式為：

element.addEventListener(event, function, useCapture)

其中：參數event必選。它是一個字元串，用於指定事件名。需要注意的是，指定事件名不要使用「on」前綴。例如，使用"click"，而不是使用"onclick"。

參數function 也是必選。用於指定要事件觸發時執行的函數。

參數useCapture可選。它是一個布爾值，指定事件是否在捕獲或冒泡階段執行。參數值為true時，事件句柄在捕獲階段執行；為false（默認值）時，事件句柄在冒泡階段執行。

例如，語句

canvas.addEventListener('mousedown', function(){

alert("Mouse pressed on canvas.");

}, false);

就為canvas綁定了滑鼠點擊事件，當在canvas上按下滑鼠時，就會彈出一個對話框，該對話框中顯示資訊「Mouse pressed on canvas.」。

例1中的程式若採用addEventListener()方法為兩個按鈕添加事件句柄，可以改寫如下。

<!DOCTYPE html>

<head>

<title>按鈕控制的簡單動畫</title>

</head>

<body>

</canvas><br>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var handle = 0;

var i=0;

var running=false;

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "red";

ctx.fillRect(i,90, 20, 20);

i=i+3;

if (i>=canvas.width) i=0;

handle = window.requestAnimationFrame(move);

}

function start()

{

if (!running)

{

handle=requestAnimationFrame(move);

running=true;

}

function stop()

{

window.cancelAnimationFrame(handle);

handle=null;

running=false;

}

var startBtn=document.getElementById('start');

var stopBtn=document.getElementById('stop');

startBtn.addEventListener('click', start);

stopBtn.addEventListener('click', stop);

</script>

</body>

</html>

有時候，可以直接把事件處理函數寫在addEventListener()方法中。例如，上面的程式碼也可以編寫如下。

<!DOCTYPE html>

<head>

<title>按鈕控制的簡單動畫</title>

</head>

<body>

</canvas><br>

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var handle = 0;

var i=0;

var running=false;

function move()

{

ctx.clearRect(0,0,canvas.width,canvas.height);

ctx.fillStyle = "red";

ctx.fillRect(i,90, 20, 20);

i=i+3;

if (i>=canvas.width) i=0;

handle = window.requestAnimationFrame(move);

}

var startBtn=document.getElementById('start');

var stopBtn=document.getElementById('stop');

startBtn.addEventListener('click', function () {

if (!running)

{

handle=requestAnimationFrame(move);

running=true;

}

});

stopBtn.addEventListener('click', function () {

cancelAnimationFrame(handle);

handle=null;

running=false;

});

</script>

</body>

</html>

我們可以通過addEventListener()方法在HTML文檔中添加許多事件，添加的事件不會覆蓋已存在的事件。

例如，為「開始」按鈕添加兩個單擊事件：

startBtn.addEventListener('click', function () {

if (!running)

{

handle=requestAnimationFrame(move);

running=true;

}

});

startBtn.addEventListener('click', function(){

alert("Mouse pressed on canvas.");

}, false);

執行時，這兩個事件處理程式碼都會被執行到。

也可以為同一個元素中添加不同類型的事件。

例如，為canvas畫布添加多個事件：

canvas.addEventListener('click', function(){

alert("Mouse click on canvas.");

}, false);

canvas.addEventListener('mouseover', function(){

alert("Mouse mouseover to canvas.");

}, false);

canvas.addEventListener('mouseout', function(){

alert("Mouse mouseout from canvas.");

}, false);

2．滑鼠事件

滑鼠事件是由滑鼠或類似用戶動作觸發的事件。滑鼠事件屬性及觸發時機描述如下：

onclick 元素上發生滑鼠點擊時觸發。

ondblclick 元素上發生滑鼠雙擊時觸發。

ondrag 元素被拖動時運行的腳本。

ondragend 在拖動操作末端運行的腳本。

ondragenter 當元素元素已被拖動到有效拖放區域時運行的腳本。

ondragleave 當元素離開有效拖放目標時運行的腳本。

ondragover 當元素在有效拖放目標上正在被拖動時運行的腳本。

ondragstart 在拖動操作開端運行的腳本。

ondrop 當被拖元素正在被拖放時運行的腳本。

onmousedown 當元素上按下滑鼠按鈕時觸發。

onmousemove 當滑鼠指針移動到元素上時觸發。

onmouseout 當滑鼠指針移出元素時觸發。

onmouseover 當滑鼠指針移動到元素上時觸發。

onmouseup 當在元素上釋放滑鼠按鈕時觸發。

onmousewheel 當滑鼠滾輪正在被滾動時運行的腳本。

onscroll 當元素滾動條被滾動時運行的腳本。

每一個滑鼠事件e都包含兩個屬性來決定當前滑鼠的位置：pageX和pageY。通過pageX和pageY，還有canvas元素的偏移位置，我們就能夠計算出滑鼠具體是在canvas元素的什麼位置。

例2 湖面的小水滴。

用滑鼠點擊畫布，在滑鼠點擊的位置一個小圓慢慢變大向外擴展，顏色慢慢變淡，像在湖面上仍一個小石子，一個小水滴慢慢擴散。

編寫如下的HTML程式碼。

<!DOCTYPE html>

<html>

<head>

<title>湖面的小水滴</title>

var ctx;

var cw;

var ch;

var waterDrops = [];

var maxRadius;

function draw()

{

canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

cw = canvas.width;

ch = canvas.height;

maxRadius=Math.sqrt(cw*cw+ch*ch)/2;

setInterval("drawEverything()",30);

canvas.addEventListener('mousedown',createWaterDrop);

}

function createWaterDrop(evt)

{

waterDrops.push(new WaterDrop(evt.pageX,evt.pageY));

}

function drawEverything()

{

ctx.fillStyle = 'black';

ctx.fillRect(0,0, cw,ch);

var i=waterDrops.length;

while (i--)

{

waterDrops[i].draw();

waterDrops[i].update();

if (waterDrops[i].radius > maxRadius)

{

waterDrops.splice(i, 1);

}

function WaterDrop(posX, poxY)

{

this.radius = 0;

this.x = posX;

this.y = poxY;

}

WaterDrop.prototype.draw= function()

{

ctx.strokeStyle = "rgb("+ (255 - this.radius) + "," + (255-this.radius) +","+ (255-this.radius) +")";

ctx.beginPath();

ctx.arc(this.x, this.y, this.radius, 0, 2*Math.PI, true);

ctx.stroke();

}

WaterDrop.prototype.update= function()

{

this.radius+=2;

}

</script>

</head>

</canvas>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中如圖2所示的向外擴散的小水滴效果。

圖2 向外擴散的小水滴

例3 滑鼠單擊選擇圓球。

在畫布中繪製10個隨機大小的填充色為藍色的圓球，用滑鼠單擊某個圓球，被單擊的圓球的填充色變成紅色。

本例的關鍵在於判斷滑鼠點擊當前位置是否在所繪製的圓球的路徑內，可以採用isPointInPath()來完成。其調用格式為：

ctx.isPointInPath(x,y);

如果指定的點(x,y)位於當前路徑中，isPointInPath() 方法返回 true；否則返回 false。

isPointPath方法檢測的是當前的路徑，這樣在點擊的過程中需要重新畫圓的路徑（遍歷圓球的數組畫圓），每畫一個圓就檢測滑鼠點擊的點是否在當前的圓的路徑中。

編寫HTML程式碼如下。

<!DOCTYPE html>

<html>

<head>

<title>滑鼠單擊選擇圓球</title>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

var balls = [];

for (var i = 0; i<10; i++)

{

var ball = {

X: random(30,canvas.width-30),

Y: random(30,canvas.height-30),

R: random(10,30)

}

balls[i] = ball;

}

ctx.fillStyle = "blue";

for (var i = 0; i < balls.length; i++)

{

ctx.beginPath();

ctx.arc(balls[i].X, balls[i].Y, balls[i].R, 0, Math.PI*2);

ctx.fill();

}

function random(min,max)

{

return Math.floor(Math.random()*(max-min)+min)

}

canvas.addEventListener('click', function(){

var x = event.pageX - canvas.getBoundingClientRect().left;

var y = event.pageY - canvas.getBoundingClientRect().top;

for (var i = 0; i < balls.length; i++)

{

ctx.beginPath();

ctx.arc(balls[i].X, balls[i].Y, balls[i].R, 0, Math.PI*2);

if (ctx.isPointInPath(x, y))

{

ctx.fillStyle = "red";

ctx.fill();

}

});

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中看到如圖3所示的交互效果。

圖3 滑鼠單擊圓球變色

例4 通過滑鼠拖曳移動圓球。

在畫布中繪製7個隨機大小的圓球，用滑鼠點擊某個圓球，然後按住滑鼠左鍵移動滑鼠，被選中的圓球跟隨滑鼠進行移動。

<!DOCTYPE html>

<html>

<head>

<title通過滑鼠拖曳圓球</title>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

var colors = ["red", "orange","yellow", "green", "cyan", "blue","purple"];

var balls = [];

for (var i = 0; i<7; i++)

{

var ball = {

X: random(40,canvas.width-40),

Y: random(40,canvas.height-40),

R: random(20,40),

C: colors[i],

isSelected: false

}

balls[i] = ball;

}

function drawBalls()

{

ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i=0; i<balls.length; i++)

{

var ball = balls[i];

ctx.globalAlpha = 0.85;

ctx.beginPath();

ctx.arc(ball.X, ball.Y, ball.R, 0, Math.PI*2);

ctx.fillStyle = ball.C;

ctx.strokeStyle = "black";

if (ball.isSelected)

ctx.lineWidth = 5;

else

ctx.lineWidth = 1;

ctx.fill();

ctx.stroke();

}

function random(min,max)

{

return Math.floor(Math.random()*(max-min)+min)

}

var preSele;

var isDragging = false;

drawBalls();

canvas.addEventListener('mousedown', function(){

var x = event.pageX - canvas.getBoundingClientRect().left;

var y = event.pageY - canvas.getBoundingClientRect().top;

// 查找被單擊的圓球

for (var i=balls.length-1; i>=0; i--)

{

var ball = balls[i];

var dist = Math.sqrt(Math.pow(ball.X-x,2)+ Math.pow(ball.Y- y,2));

if (dist<= ball.R)

{

if (preSele!= null) preSele.isSelected = false;

preSele = ball;

ball.isSelected = true;

isDragging = true;

drawBalls();

return;

}

});

canvas.addEventListener('mouseup', function(){

isDragging = false;

});

canvas.addEventListener('mouseout', function(){

isDragging = false;

});

canvas.addEventListener('mousemove', function(){

if (isDragging == true)

{

if (preSele!= null)

{

var x = event.pageX - canvas.getBoundingClientRect().left;

var y = event.pageY - canvas.getBoundingClientRect().top;

preSele.X = x;

preSele.Y = y;

drawBalls();

}

});

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中看到如圖4所示的交互效果。

圖4 通過滑鼠拖曳移動圓球

例5 塗鴉。

編寫一個簡單的塗鴉程式。滑鼠按下開始塗鴉，滑鼠移動劃線，滑鼠鬆開，結束塗鴉。用到滑鼠事件mousedown、mousemove和mouseup。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

var started = false;

canvas.addEventListener('mousedown', function(){

var x = event.pageX - canvas.getBoundingClientRect().left;

var y = event.pageY - canvas.getBoundingClientRect().top;

ctx.beginPath();

ctx.moveTo(x,y);

started = true;

});

canvas.addEventListener('mousemove', function(){

var x = event.pageX - canvas.getBoundingClientRect().left;

var y = event.pageY - canvas.getBoundingClientRect().top;

if (started)

{

ctx.lineTo(x,y);

ctx.stroke();

}

});

canvas.addEventListener('mouseup', function(){

started=false;

});

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中看到如圖5所示的交互效果。

圖5 塗鴉

3．鍵盤事件

鍵盤事件主要的有三個：

onkeydown 當按下按鍵時運行腳本

onkeypress 當按下並鬆開按鍵時運行腳本

onkeyup 當鬆開按鍵時運行腳本

其中，onkeypress在按鍵持續按住的過程中會不斷地運行腳本，而keydown只會在按鍵按下時執行一次，keypress在遊戲開發中適用於使用鍵盤操控遊戲角色的移動。

HTML5 Canvas本身不支援鍵盤事件監聽與獲取，一般通過windows對象來實現Canvas鍵盤事件監聽與處理，例如：

window.addEventListener('keydown', doKeyDown,true);

例6 通過鍵盤移動矩形小木塊。

鍵盤事件有許多重要的應用，例如在遊戲中通過上下左右鍵來控制角色的移動。本例就是通過上下左右鍵來控制一個矩形小木塊的移動。

<!DOCTYPE html>

<html>

<head>

<title>通過鍵盤移動小木塊</title>

</head>

<body>

</canvas>

var canvas = document.getElementById('myCanvas');

ctx = canvas.getContext('2d');

var x = canvas.width/2;

var y = canvas.height/2;

ctx.fillStyle = "blue";

ctx.fillRect(x, y, 40, 40);

window.addEventListener('keydown', function(e){

var keyID = e.keyCode ? e.keyCode :e.which;

if (keyID === 37) // left

{

ctx.clearRect(0,0,canvas.width,canvas.height);

if (x>=10) x = x - 10;

else x=0;

ctx.fillRect(x, y, 40, 40);

e.preventDefault();

}

if (keyID === 38) // up

{

ctx.clearRect(0,0,canvas.width,canvas.height);

if (y>=10) y = y - 10;

else y=0;

ctx.fillRect(x, y, 40, 40);

e.preventDefault();

}

if (keyID === 39) // right

{

ctx.clearRect(0,0,canvas.width,canvas.height);

if (x+50<=canvas.width) x = x + 10;

else x=canvas.width-40;

ctx.fillRect(x, y, 40, 40);

e.preventDefault();

}

if (keyID === 40) // down

{

ctx.clearRect(0,0,canvas.width,canvas.height);

if (y+50<=canvas.height) y = y + 10;

else y=canvas.height-40;

ctx.fillRect(x, y, 40, 40);

e.preventDefault();

}

},true);

</script>

</body>

</html>

在瀏覽器中打開包含這段HTML程式碼的html文件，可以看到在瀏覽器窗口中看到如圖6所示的交互效果。

圖6 通過鍵盤控制小木塊的移動

Tags: JavaScript程式設計