飞机大作战游戏 1----（运用H5和Js制作）

飞机大作战一

首先建立一个div将canvas包住使其居中：

<div style="text-align: center;">
<canvasid="canvas"width="480px"height="650px"></canvas>
</div>

接下来是在script标签中进行

首先我们需要获取画布的对象和工具

var canvas=document.getElementById("canvas")
var context=canvas.getContext("2d")

第一步：初始化数据

定义游戏的初始状态

var START=0;        /*加载*/
var STARTING = 1;   /*加载中*/
var RUNNING = 2;    /*游戏开始*/
var PAUSE = 3;      /*暂停*/
var GAMEOVER = 4;   /*结束*/

开始加载状态：

           var start=START;
//         设置宽和高
           var WIDTH=480;
           var HEIGHT=650;
//         设置游戏得分
           var score=0;
//         设置飞机生命值
           var life = 5;

设置背景

先获取到图片的对象

将图片的数据用一个定义对象列出来

var bg={
                img:img,
                width:480,
                height:852
            }

再利用构建函数来绘制背景

因为背景图片是滚动的所以利用两张图片先后放入画布

当一张图片快要走出画布时，到达这个零界点，将此张图片返回到列一张图片的后面

使用paint方法绘制，step方法让图片运动起来

function Bg(unm){
                this.width=unm.width;
                this.height=unm.height;
                this.Image=unm.img;
//              第一张图片的位置
                this.x1=0;
                this.y1=0;
//              第二张图片位置
                this.x2=0;
                this.y2=-this.height;
//              绘制的方法paint
                this.paint=function(){
                    context.drawImage(this.Image,this.x1,this.y1);
                    context.drawImage(this.Image,this.x2,this.y2);
                }
//              运动的方法step
                this.step=function(){
                    this.y1++;
                    this.y2++;
                    if(this.y1==this.height){
                        this.y1=-this.height
                    }
                    if(this.y2==this.height){
                        this.y2=-this.height
                    }
                }
                
            }

//          创建背景对象
            var sky=new Bg(bg)

绘制最外层的log

var log=new Image();
 log.src="img/start.png"

使用定时器调用函数

 setInterval(function(){
sky.paint();
sky.step();）1000}

效果图：

飞机大作战游戏 1----（运用H5和Js制作）

猜你喜欢