交互是游戲的根本。缺少了用戶交互，游戲就不能稱之為游戲，只能說是動畫或電影。事件是瀏覽器響應用戶交互操作的一種機制。
1．事件和事件執行
事件定義了用戶與頁面交互時產生的各種操作（主要通過鼠標或熱鍵的動作引發），例如單擊頁面中某一個對象時，就產生一個單擊（onClick）操作事件。瀏覽器在程序運行的大部分時間都等待交互事件的發生，並在事件發生時，自動調用事件處理函數，完成事件處理過程。
事件不僅可以在用戶交互過程中產生，而且瀏覽器自己的一些動作也可以產生事件，例如，當載入一個頁面時，就會發生onLoad事件，卸載一個頁面時，就會發生onUnload事件等。
常見的HTML事件有：
onchange HTML元素改變
onclick 用戶點擊 HTML 元素
onmouseover 用戶在一個HTML元素上移動鼠標
onmouseout 用戶從一個HTML元素上移開鼠標
onkeydown 用戶按下鍵盤按鍵
onload 瀏覽器已完成頁面的加載
當在HTML頁面中使用JavaScript時，JavaScript可以觸發這些事件。這樣，可以在事件觸發時通過JavaScript執行一些代碼完成特定的操作。
例如，通過單擊一個“改變”按鈕激活change（）事件處理程序的方法為：
<button onclick='change ()'>改變</button>
在onClick等號后，可以使用自己編寫的函數作為事件處理程序，也可以使用JavaScript中內部的函數，還可以直接使用JavaScript的代碼等。例如：
<button onclick= alert("這是一個確定按鈕">確定</button>
在HTML頁面中，可以使用下列幾種方法來執行JavaScript事件代碼。
（1）HTML事件屬性可以直接執行JavaScript代碼或調用 JavaScript 函數。
例1 水平運動的小木塊。
在HTML頁面中有一塊畫布和兩個按鈕，單擊“開始”按鈕后，在畫布中有一個紅色小木塊進行水平移動，單擊“暫停”按鈕后，小木塊停止移動，再次單擊“開始”按鈕，小木塊繼續移動。
編寫兩個事件處理函數start()和stop()，並為兩個按鈕的onClick事件屬性指定各自調用的函數。
編寫如下的HTML代碼。
<!DOCTYPE html>
<head>
<title>按鈕控制的簡單動畫</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="200" style="border:3px double #996633;">
</canvas><br>
<button onClick='start()'>開始</button>
<button onClick='stop()'>暫停</button><br>
<script type="text/javascript">
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 id="myCanvas" width="300" height="200" style="border:3px double #996633;">
</canvas><br>
<button id="start">開始</button>
<button id="stop">暫停</button><br>
<script type="text/javascript">
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 id="myCanvas" width="300" height="200" style="border:3px double #996633;">
</canvas><br>
<button id="start">開始</button>
<button id="stop">暫停</button><br>
<script type="text/javascript">
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 id="myCanvas" width="300" height="200" style="border:3px double #996633;">
</canvas><br>
<button id="start">開始</button>
<button id="stop">暫停</button><br>
<script type="text/javascript">
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>
<script type="text/javascript">
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>
<body onload="draw();">
<canvas id="myCanvas" width="400" height="300" style="border:3px double #996633;">
</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 id="myCanvas" width="500" height="400" style="border:3px double #996633;">
</canvas>
<script type="text/javascript">
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 id="myCanvas" width="500" height="400" style="border:3px double #996633;">
</canvas>
<script type="text/javascript">
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>
<title>塗鴉</title>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" style="border:3px double #996633;">
</canvas>
<script type="text/javascript">
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 id="myCanvas" width="500" height="400" style="border:3px double #996633;">
</canvas>
<script type="text/javascript">
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 通過鍵盤控制小木塊的移動