HTML5 Canvas小游戲基礎：用戶互動-有解無憂

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

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 通過鍵盤控制小木塊的移動

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/25037.html

標籤：JavaScript

上一篇：《JavaScript語言入門教程》記錄整理：入門和資料型別

下一篇：JavaScript基礎-03