用 p 元素完成布局，运用 HTML5 中的 canvas 元素使用 JavaScript 在网页上绘制图 像。画布是一个矩形区域，可以控制其中的每一个像素。

canvas 具有拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。代码如下所示。论文网

<p style=”margin:0px auto;width:480px;height:650px;background:#323232; text-align:center;vertical-align:middle;”>

<canvas id=”canvas” width=”480px” height=”650px”></canvas>

</p>

5。3 游戏运行主要功能的实现

5。3。1 初始化游戏相关内容

1。创建 HTML 页面，显示游戏画面

（1）使用 HTML5 中的 canvas 内容

（2）HTML 页面中定义<canvas></canvas>元素

（3）JavaScript 实现 先获取<canvas>元素，再创建画布对象：getContext()，代码如下。 var canvas=document。getElementById(“canvas”);

var context=canvas。getContext(“2d”);

（4）游戏的初始化

第一步将游戏分解成 5 个阶段，先定义 5 个常量分别表示 5 个阶段，包括欢迎阶段 START、过渡动画阶段 STARTTING、运行阶段 RUNNING、暂停阶段 PAUSED 以及结束阶段 GAMEOVER，分别初始化五个阶段为 0、1、2、3、4；再定义变量，表示当前游戏处在哪个 阶段 var state=START;第二步将当前画布的宽度和高度获取，赋值给常量，代码如下。 const WIDTH=canvas。width;const HEIGHT=canvas。height;

2。引入游戏所需要的图片，代码如下。

//加载游戏背景图片 var bg=new Image();

bg。src="images/background.png";

5。3。2 游戏欢迎阶段

1。完成背景图片的绘制及移动的效果，具体过程如下所示。

（1）在画布中绘制背景图片 第一步加载游戏背景图片，代码如下。 var bg=new Image(); bg。src=”images/background.png”;

第二步初始化背景图片的数据，代码如下。

{

imgs：加载的图片数据, width：背景图的宽度, height：背景图的高度

}

第三步创建背景图片的构造器，代码如下。 function Sky(config){文献综述

//定义相关的属性 this。imgs=config。imgs; this。width=config。width; this。height=config。height;

//定义绘制第一张图以及第二张图的 y 值 this。y1=-this。height;

this。y2=0;

//定义绘制方法，背景图有向下移动的动画效果，背景图片实际只有一张，但实 际绘制时，绘制两张相同的图片，一上一下，控制一起向下移动。如果两张中任 意一张已经运行到画布外面，将这张图的 y 值重新设置到画布的正上方，然后继 续向下运行。绘制方法为 context。drawImage(img,x,y)，在画布上定位图像，其 中第一张：(0,-height)、第二张：(0,0),第一张正好在第二张的正上方。 this。paint=function(){

context。drawImage(this。imgs,0,this。y1); context。drawImage(this。imgs,0,this。y2);

}//定义移动方法:控制两张图片同时向下移动，即控制 y 轴的值，同时还要判断两 张图片是否移出画面，判断条件是：图片的 y 值大于画布的高度，就移出了画面； 如果移出画面，图片的 y 值就要重新赋值为-height，即图片的高度。