JavaScript用200行代码制作打飞机小游戏实例


Posted in Javascript onJune 21, 2017

我去,我的图片分数被这个录屏软件的水印盖上了,扎心。

JavaScript用200行代码制作打飞机小游戏实例

这个程序的文件以及代码全部上传到了github

程序下载链接传送门

这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了。所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西。

当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创。

JavaScript用200行代码制作打飞机小游戏实例

代码部分我是通过一个大的函数直接进行所有的封装,当然写这个的时候的我完完全全对jquery么有一丁点认识,所以自己写了渐隐渐现的函数。所以开始的代码很简单。

window.onload = function(){
  var Base = new base();
  var start = document.getElementById('start');
  start.onclick = function(){
    Base.fadehide('start');
    getId('path').style.display='block';
    Base.fadeshow('path');
    Base.createBullteAndMovePlain();

  }

}

这就是开始接入的函数。渐隐渐现的函数是这个。

this. fadehide = function (name){
      var   i = 1;
      var odiv = document.getElementById(name);
      function show(){  
        odiv.style.opacity = i;
        i-=0.1; 
         if(i<0){odiv.style.display = 'none';clearInterval(t);
         }
      }
       var t = setInterval(show,10);
       return this;
    }

    this.fadeshow = function (name){
      var i = 0;
      var odiv = document.getElementById(name);
      function show(){  
        odiv.style.opacity = i;
        i+=0.1; 
         if(i>1){clearInterval(t);}
      }
       var t = setInterval(show,100);  
      return this;
    }

剩下的代码,懒得解释了,里面有注释。

//生成子弹
      this.createBullteAndMovePlain = function (){
      var arr= [];
      var bulletNum=[];
      var way = path.getElementsByClassName('way');
      var play =document.getElementById('bullet');
      var flag =0;
      var score=0;

      //获取按键
      document.onkeydown = function(evt){
        var ev = evt||event;
        //left keyCode is 39
        //right keyCode is 37
        switch(ev.keyCode){
          case 39:
          flag=(flag+1)%5;
          break;
          case 37:
          if(flag==0){
          flag=Math.abs(flag-4);
          }else if(flag>0){
            flag=(flag-1)%5;
          }
          break;
        }

      //移动飞机
          function movePlain (){
            var plain = document.getElementById('player');
            switch(flag){
            case 0:player.style.left='0px';break;
            case 1: player.style.left='100px';break;
            case 2: player.style.left='200px';break;
            case 3: player.style.left='300px';break;
            case 4:player.style.left='400px';break;

          }
          }
          movePlain();
      }


      function createBulltes(){


        //生成敌人
          var newenemy = document.createElement('img');
          newenemy.src = 'img/enemy.png';
          newenemy.style.position='absolute';
          newenemy.style.zIndex='5';
          var enemyTop=0;
          var sign=0;
          var randomNum = Math.random()*5;
          sign=Math.floor(randomNum);
          newenemy.style.top='0px';
          switch(sign){
            case 0:newenemy.style.left='0px';break;
              case 1: newenemy.style.left='100px';break;
              case 2: newenemy.style.left='200px';break;
              case 3: newenemy.style.left='300px';break;
              case 4:newenemy.style.left='400px';break;

          }way[0].appendChild(newenemy);
          arr.unshift(newenemy);
      //生成子弹    
          var bullet = document.getElementById('bullet');
          var newbullet = document.createElement('img');
          var plain = document.getElementById('player');
          newbullet.className='bullet';
          newbullet.style.position='absolute';
          newbullet.style.top='560px';  
          newbullet.src='img/bullet.png';
          newbullet.style.zIndex='4';      
          var bulletTop=0;


          switch(flag){
            case 0: newbullet.style.left='45px';player.style.left='0px';;break;
            case 1: newbullet.style.left='145px';player.style.left='100px';;break;
            case 2: newbullet.style.left='245px';player.style.left='200px';break;
            case 3: newbullet.style.left='345px';player.style.left='300px';break;
            case 4: newbullet.style.left='445px';player.style.left='400px';break;

          }way[2].appendChild(newbullet);
          bulletNum.unshift(newbullet);
        //分数图片
          function scoreup(score){
            var imgs = document.getElementsByClassName('score');
            var imgsnum=score.toString().split('');

            for(var i=0; i<imgsnum.length; i++){

              imgs[4-i].src='img/'+imgsnum[i]+'.png';  
            }

        }

        //判定触碰
        function decide(){
        for(var i = 0;i<arr.length; i++){
          for(var j=0; j<bulletNum.length; j++)
        if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)<bulletNum[j].offsetTop+10)){
          score++;
          scoreup(score);
          arr[i].parentNode.removeChild(arr[i]);
            bulletNum[j].parentNode.removeChild(bulletNum[j]);    
            }
          }
          var player=document.getElementById('player');
          for(var i=0; arr.length; i++){
            if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){
              alert('game over');location.reload();
            }
          }
        }

        //放在一起的移动
          function bulletmove (){
                  bulletTop=newbullet.offsetTop;
                    enemyTop=newenemy.offsetTop;
                //    alert('buller:'+newbullet.offsetLeft);
                  //  alert(newenemy.offsetLeft);
                function move (){
                  bulletTop-=6;
                  enemyTop+=1;
                  newbullet.style.top=bulletTop+'px';
                  newenemy.style.top=enemyTop+'px';
                   decide();
                  if(bulletTop==0&&enemyTop==560){
                        newbullet.style.opacity='0';
                          newenemy.style.opacity='0';

                          clearInterval(t);
                          }else if(bulletTop==0){
                          newbullet.parentNode.removeChild(newbullet);  
                          bulletNum.pop();
                          }else if(enemyTop==560){
                          newenemy.parentNode.removeChild(newenemy);arr.pop();
                          }


                }

                    var t = setInterval(move,20);  
          }  
                bulletmove();

          }

          var s=setInterval(createBulltes,3000);

      }
  }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 全选效果实现代码
Mar 23 Javascript
jquery checkbox全选、取消全选实现代码
Mar 05 Javascript
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
使用js简单实现了tree树菜单
Nov 20 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
js检测用户输入密码强度
Oct 22 Javascript
将List对象列表转换成JSON格式的类实现方法
Jul 04 Javascript
javascript实现延时显示提示框效果
Jun 01 Javascript
详解react内联样式使用webpack将px转rem
Sep 13 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 Javascript
React组件设计模式之组合组件应用实例分析
Apr 29 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
Angular.JS中指令ng-if的注意事项小结
Jun 21 #Javascript
jquery.validate表单验证插件使用详解
Jun 21 #jQuery
JS实现简单拖拽效果
Jun 21 #Javascript
详解Vue路由开启keep-alive时的注意点
Jun 20 #Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
Jun 20 #jQuery
详解Node.js access_token的获取、存储及更新
Jun 20 #Javascript
详解angular 中的自定义指令之详解API
Jun 20 #Javascript
You might like
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
用正则获取指定路径文件的名称
2007/02/27 Javascript
JavaScript面向对象程序设计三 原型模式(上)
2011/12/21 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jQuery如何将选中的对象转化为原始的DOM对象
2014/06/09 Javascript
js实现飞入星星特效代码
2014/10/17 Javascript
浅谈javascript 归并方法
2015/01/21 Javascript
使用纯javascript实现放大镜效果
2015/03/18 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
JS实现放大、缩小及拖拽图片的方法【可兼容IE、火狐】
2016/08/23 Javascript
简单实现js选项卡切换效果
2017/02/09 Javascript
详解vue 模拟后台数据(加载本地json文件)调试
2017/08/25 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序实现多张图片上传功能
2020/11/18 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
2020/12/04 Javascript
Python实现多线程抓取妹子图
2015/08/08 Python
Python中常用的8种字符串操作方法
2019/05/06 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
简单了解django文件下载方式
2020/02/10 Python
利用CSS3制作简单的3d半透明立方体图片展示
2017/03/25 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
2018/07/03 HTML / CSS
阿迪达斯德国官方网站:adidas德国
2017/07/12 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
电气工程及其自动化专业毕业生自荐信
2014/06/21 职场文书
自习课吵闹检讨书范文
2014/09/26 职场文书
2014红色之旅心得体会
2014/10/07 职场文书
2014城乡环境综合治理工作总结
2014/12/19 职场文书
2015入党自荐书范文
2015/03/05 职场文书
2015年社区工会工作总结
2015/05/26 职场文书