案例十三、模仿微信打飞机游戏

来源：互联网发布：微博mac客户端是什么编辑：程序博客网时间：2024/06/08 16:50

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。
1.生成自己，且可以通过左右键来进行左右移动。

//生成自己，且可以左右移动//控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外    if(aligh < 260){        var img = new Image();        img.src = "../images/self.png";        img.onload = function(){            context.drawImage(img, aligh,100);            }        aligh += 10 ;    }//当飞机即将移出背景外时，让它停在最右端 if (aligh == 260){         var img = new Image();         img.src = "../images/self.png";         img.onload = function(){        context.drawImage(img, 260,100);             }         }      } //控制飞机向左移动的函数 function moveLeft(event){     context.clearRect(aligh,100,47,47);//防止飞机移出最左边的边界    if(aligh > 0){    var img = new Image();    img.src = "../images/self.png";    img.onload = function(){        context.drawImage(img, aligh,100);         }        aligh -= 10 ;    }//使其控制在最左侧    if (aligh == 0){        var img = new Image();        img.src = "../images/self.png";        img.onload = function(){        context.drawImage(img, 0,100);         }     }}//判断按下的是哪个键，然后控制飞机左右移动 document.onkeydown = function(event){    if(event.keyCode == 37){             moveLeft();          }    if(event.keyCode == 39){             moveRight();                   } }

2.生成敌机。敌机就是在背景上随机生成图片。每隔一秒使其从上面下落。

var createId = setInterval(function(){    var top = 0+'px';     var enemy  = document.createElement("img");    enemy.src = "../images/enemy.png";    //生成随机的位置    var randomleft = Math.floor(Math.random() * 300) ;    //如果生成的位置出现在背景外，则就取260left = randomleft > 260 ? 260 + 'px': randomleft + 'px';    leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算    arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除    main.appendChild(enemy);    enemy.style.paddingLeft = left ;    enemy.style.paddingTop = top;    var spandom = $("#main>img:last-child");//这儿利用jquery找到最后一个img//让最后一个img动起来。则就相当于为每一个img都绑定了动画spandom.animate({"paddingTop":420},6000,function(){    //当下落到底部时移除元素    this.remove();    arrPic.splice(0,1);  //从数组中移除图片    leftArr.splice(0,1);  //从数组中移除距离    fallCount ++;   //检测下落了多少个飞机，超过十个没被打中，游戏就结束    });    //如果落下的飞机数超过十个没有被打中，则游戏结束        if(fallCount > 10){            clearInterval(createId);            clearInterval(crashId);            alert("当前得分 ："+count+" , 很遗憾，游戏结束!")         }    },1000);

3。现在主要是碰撞检测。每隔2.2秒进行一次检测，因为检测台频繁的话，直接长按向左向右键，都可以直接消除。就没有意义了

function checkCrash(){    crashId = setInterval(function(){    //由于每次自由落下的飞机在上面函数中都被移除了。所以leftArr数组中保存的就是当前页面存在的飞机的左距离数组。    for(var i = 0; i < leftArr.length; i++)    {    //首先将两种都转换成int型进行比较    var tempL = parseInt(leftArr[i]);    var tempA = parseInt(aligh); //表示自己距左侧的位置   //当自己的中心距离处于敌机的左右两侧范围内，则表示被击中    if(tempL <= (tempA + 20)  && (tempA + 20) <= (tempL + 40)){        arrPic[i].remove(); //碰撞检测，移除敌机的图片        arrPic.splice(i,1); //从图片数组中移除图片        leftArr.splice(i,1); //从记录敌机左侧距离数组中移除该敌机的距离        count++;    score.innerHTML = "当前得分 "+count;                            break; //检测到之后直接跳出循环，进行下一个2.2秒的碰撞检测       }        }               },2200);    }    checkCrash();

这个游戏还不太完整，没有生成子弹。大部分功能都已经实现了。

4。效果图如下：

这里写图片描述

这里写图片描述
最后附上源代码：
html&css

<!DOCTYPE html><html><head><meta charset = "utf-8"/ >    <title></title>    <script type="text/javascript" src = "./fightFlight.js"></script>    <script src = "../jQuery/jquery-3.2.0.min.js"></script>    <style type="text/css">    *{        margin: 0px;        padding: 0px;    }    #main{        width: 300px;        height: 500px;        border:1px solid red;        margin: 0 auto;    }    #my{        position: absolute;        z-index: 2;        top:350px;    }    #background{        position: absolute;        z-index: 1;        width: 300px;        height:500px;        border: 1px solid green;        background-image: url(../images/background.jpg);    }    img{        position: absolute;        z-index: 2;    }    #enmey{        width: 50px;        height: 50px;    }    #score{        position: absolute;        margin-left: 50%;        left: 150px;        top:100px;        width: 160px;        font-size: 20px;        font-family: "微软雅黑";        font-weight: bold;        line-height: 70px;        text-align: center;    }    </style></head><body><div id = "main"><canvas id = "background"></canvas><canvas id = "my"></canvas><div id = "score">当前得分：0</div></div></body></html>

JavaScript

    var main = document.getElementById('main');    var my = document.getElementById('my');    var score = document.getElementById("score");    var context = my.getContext('2d');    var crashId;    var fallCount = 0;  //记录没被打中的飞机数，如果超过10，游戏结束    var aligh = 0 ;    var count = 0;  //记录打中的飞机数，即当前得分    var leftArr = [];    var arrPic = [];    var left;    var img = new Image();    img.src = "../images/self.png";    img.onload = function(){        context.drawImage(img,aligh,100);    }        //生成自己，且可以左右移动         function move(event){            event = EventUtil.getEvent(event);            context.clearRect(aligh,100,47,47);          if(event.keyCode == 39 && aligh < 260 ){                var img = new Image();                img.src = "../images/self.png";                img.onload = function(){                    context.drawImage(img, aligh,100);                 }                    aligh += 10 ;            }        if (aligh == 260){                 var img = new Image();                 img.src = "../images/self.png";                 img.onload = function(){                    context.drawImage(img, 260,100);                  }             }         }        document.onkeypress = move;        //随机生成敌机        (function(){            var createId = setInterval(function(){            var top = 0+'px';             var enemy  = document.createElement("img");            enemy.src = "../images/enemy.png";            var randomleft = Math.floor(Math.random() * 300) ;            left = randomleft > 260 ? 260 + 'px': randomleft + 'px';            leftArr.push(left); //保存每个敌机的距左边的距离，方便碰撞检测的计算            arrPic.push(enemy); //将每个敌机的图片保存在数组中，方便碰撞检测后移除            main.appendChild(enemy);            enemy.style.paddingLeft = left ;            enemy.style.paddingTop = top;            var spandom = $("#main>img:last-child");//找到最后一个span            spandom.animate({"paddingTop":420},6000,function(){            //移除元素            this.remove();            arrPic.splice(0,1);  //移除图片            leftArr.splice(0,1);  //从数组中移除距离            fallCount ++;            });            //如果落下的飞机数超过十个没有被打中，则游戏结束            if(fallCount >= 10){                clearInterval(createId);                clearInterval(crashId);                alert("当前得分 ："+count+" , 很遗憾，游戏结束!")              }         },1000);        })();      //碰撞检测        function checkCrash(){        crashId = setInterval(function(){            for(var i = 0; i < leftArr.length; i++)            {                var tempL = parseInt(leftArr[i]);                var tempA = parseInt(aligh);                if(tempL <= (tempA + 20)  && (tempA + 20) <= (tempL + 40)){                    arrPic[i].remove(); //碰撞检测，移除敌机的图片                    count++;                    score.innerHTML = "当前得分 "+count;                        continue;                }            }            console.log(count);        },2200);    }        checkCrash();}

0 0