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 相关文章推荐
在textarea中屏蔽js的某个function的javascript代码
Apr 20 Javascript
DOM 基本方法
Jul 18 Javascript
JavaScript中的bold()方法使用详解
Jun 08 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
Vue过滤器的用法和自定义过滤器使用
Feb 08 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
Jan 06 Javascript
如何在JavaScript中谨慎使用代码注释
Jun 21 Javascript
js实现图片区域可点击大小随意改变(适用移动端)代码实例
Sep 11 Javascript
JavaScript 作用域scope简单汇总
Oct 23 Javascript
JavaScript onclick事件使用方法详解
May 15 Javascript
原生JavaScript实现换肤
Feb 19 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
dedecms模版制作使用方法
2007/04/03 PHP
php实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
基于MySQL分区性能的详细介绍
2013/05/02 PHP
浅析php创建者模式
2014/11/25 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
收集的网上用的ajax之chat.js文件
2007/04/08 Javascript
jQuery:节点(插入,复制,替换,删除)操作
2013/03/04 Javascript
二叉树先序遍历的非递归算法具体实现
2014/01/09 Javascript
js实现一个链接打开两个链接地址的方法
2015/05/12 Javascript
微信小程序 向左滑动删除功能的实现
2017/03/10 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
JS模拟超市简易收银台小程序代码解析
2017/08/18 Javascript
基于elementUI使用v-model实现经纬度输入的vue组件
2019/05/12 Javascript
使用vue-cli3 创建vue项目并配置VS Code 自动代码格式化 vue语法高亮问题
2019/05/14 Javascript
Python 爬虫爬取指定博客的所有文章
2016/02/17 Python
浅谈Python中的作用域规则和闭包
2018/03/20 Python
django框架模型层功能、组成与用法分析
2019/07/30 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
python利用opencv实现SIFT特征提取与匹配
2020/03/05 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
浅析border-radius如何兼容IE
2016/04/19 HTML / CSS
欧洲高端品牌直销店:Fashionesta
2016/08/31 全球购物
泰国排名第一的家居用品中心:HomePro
2020/11/18 全球购物
物业管理求职自荐信
2013/09/25 职场文书
环境建设实施方案
2014/03/14 职场文书
关于拾金不昧的感谢信
2015/01/21 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
计划生育责任书
2015/05/09 职场文书
创业计划书之废品回收
2019/09/26 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
15个值得收藏的JavaScript函数
2021/09/15 Javascript
SSM VUE Axios详解
2021/10/05 Vue.js