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

最新推荐文章于 2024-07-02 18:30:38 发布

画一生情入颜容

最新推荐文章于 2024-07-02 18:30:38 发布

阅读量2.2k

点赞数

文章标签：游戏 canvas 打飞机游戏键盘事件

本文链接：https://blog.csdn.net/csdn_zsdf/article/details/70766967

版权

首先实现微信打飞机游戏，首先会有自己和敌机，采用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) ;
    //如果生成的位置出现在背景外，则就取260
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");//这儿利用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
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
案例十三、模仿微信打飞机游戏

首先实现微信打飞机游戏，首先会有自己和敌机，采用canvas绘图来生成自己和敌人。 1.生成自己，且可以通过左右键来进行左右移动。//生成自己，且可以左右移动//控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ v
复制链接

扫一扫