3.3案例7使用canvas元素制作简单小游戏.docVIP

3.3　案例7：使用canvas元素制作简单小游戏 3.3.1　案例概述 接下来看一个使用canvas元素制作的简单小游戏。该案例为一个用户捕捉处于弹跳状态的小球的小游戏。案例中有一个canvas元素，该canvas元素用来模拟一个游戏桌面。单击案例页面中的开始游戏按钮后桌面上出现一个处于弹跳状态的小球，用户单击该小球，如果击中小球则弹出提示信息，提示用户游戏成功并结束。 3.3.2　页面显示效果 首先看一下案例页面在浏览器中打开时的显示效果，如图3-6所示。 图3-6　案例程序在浏览器中打开时的效果 单击开始游戏按钮后，画面中出现一个矩形桌面，桌面中有一个蓝色小球，该小球在该边框中处于不断游走弹跳（小球位置不断变换）的状态，同时开始按钮也变为无效状态，如图3-7所示。 用户单击该小球，击中小球后将弹出提示信息框，提示用户获胜，如图3-8所示。 图3-7　单击开始游戏按钮后画面中出现一个不断游走的小球 （点击查看大图）图3-8　用户击中小球后游戏结束 单击提示信息框中的确定按钮后游戏结束，小球处于静止状态，开始游戏按钮恢复为有效状态，如图3-9所示。 图3-9　单击信息提示框中的确定按钮后开始游戏按钮恢复为有效状态 3.3.3　案例知识点 接下来看一下这个案例中所使用的Canvas API中的一些属性与方法。除了前面已经介绍过的属性与方法外，为了使案例中利用canvas元素绘制的彩色桌面尽量具有立体效果，分别使用了填充矩形与绘制矩形边框两种方法，其中填充矩形的使用方法如下所示。 context.fillRect x,y,width,height fillRect方法使用4个参数，其中x是指矩形起点的横坐标，y是指矩形起点的纵坐标，坐标原点为canvas画布的左上角，width是指矩形的长度，height是指矩形的高度。通过这四个参数，矩形的大小也同时被确定了。 绘制矩形边框的方法如下所示。 context.strokeRect x,y,width,height strokeRect方法中4个参数的含义与fillRect方法中4个参数的含义完全相同。 本程序绘制了一个填充色为淡绿色的桌面，并且绘制黑色桌面外框，为了能完全显示左边框与上边框，所绘制的矩形的坐标起点为（3，3），程序代码如下所示。 context.fillStyle lightgreen; context.strokeStyle black; context.linewidth 3; context.fillRect 3,3,width-5,height-5 ; context.strokeRect 3,3,width-5,height-5 ; 3.3.4　代码剖析（1） 最后来看一下该案例程序的完整代码，如代码清单3-5所示，稍后将对案例代码进行详细分析。 代码清单3-5　小球弹跳游戏的完整代码 !DOCTYPE html meta charset UTF-8 小球弹跳游戏 script type text/javascript var BallX,BallY; var AddX,AddY; var width,height; var canvas; var context; var functionId; function btnBegin_onclick canvas document.getElementById canvas ; width canvas.width; height canvas.height; context canvas.getContext 2d ; BallX parseInt Math.random *canvas.width ; BallY parseInt Math.random *canvas.height ; AddX -5; AddY -5; draw ; document.getElementById btnBegin .disabled disabled; functionId setInterval draw ,100 ; function draw context.clearRect 0,0,width,height ; context.save ; context.fillStyle lightgreen; context.strokeStyle black; context.linewidth 3; context.fillRect 3,3,width-5,height-5 ; context.strokeRect 3,3,width-5,height-5 ; context.beginPath ; context.fillSty