原生javascript开发仿微信打飞机小游戏

　　今天闲来无事，于是就打算教一个初学javascript的女童鞋写点东西，因此为了兼顾趣味性与简易程度，果断想到了微信的打飞机小游戏。。

本来想用html5做的，但是毕竟人家才初学，连jquery都还不会，所以最终还是决定用原生的javascript。虽说相对于园内的高手们而言代码算不上优雅，效率算不上高，不过对于初学者来练手还是足以。。

　　　三个文件，main.js(主函数)，entity.js(实体类与工厂类)，util.js(工具类)，基本原理就是把位置信息保存在对象里面，然后在setInterval里面统一对所有对象进行更新显示。程序所用到的飞机与子弹图片都是从微信上截屏得来的。

先上图:

再上代码:

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>打飞机</title>

<script type="text/javascript" src="js/util.js"></script>

<script type="text/javascript" src="js/entity.js"></script>

<script type="text/javascript" src="js/main.js"></script>

<script type="text/javascript">

window.onload=function(){

    Main.init();

    Util.g("startBtn").onclick=function(){

        Main.start();

        this.style.display="none";

    }

}

</script>

</head>

<body>

<div id="parent" style="

        margin: 0 auto;

        width:350px; height:480px;

        background-color:#c3c9c9;

        position: relative;

        overflow:hidden;">

    <div style="

        position:absolute;

        left:5px;

        top:5px;">积分:<span id="score">0</span></div>

    <button

        style="

            position:absolute;

            left:150px;

            top:240px;

            display:block;"

        id="startBtn">

    点击开始

    </button>

</div>

</body>

</html>

main.js:

// JavaScript Document

var Main={

    init:function(){

        Util.init();

    },

    _totalEnemies:8,

    start:function(){

        //初始化敌机

        enemyPlaneFactory.creatEnemyPlane(this._totalEnemies);

        //初始化自己

        selfPlane.init();

        //初始化子弹

        bulletFactory.creatBullet(100);

        //开始渲染画面

        this._render();

        //开始射击子弹

        this._startShoot();

        //初始化键盘事件响应

        this._initEvent();

    },

    //渲染定时器

    _render_t:null,

    _render:function(){

        this._render_t=setInterval(function(){

            var enemys=enemyPlaneFactory.enemys;

            for(var i in enemys){

                var enemy=enemys[i];

                enemy.move(0,enemy.speed);

                if(enemy.x+enemy.e.width>selfPlane.x+10

                    &&enemy.x<selfPlane.x+selfPlane.e.width-10

                    &&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2

                    &&enemy.y<selfPlane.y+selfPlane.e.height){

                        enemy.isDied=true;

                        clearInterval(Main._render_t);

                        clearInterval(Main._startShoot_t);

                        var b=window.confirm("对不起，您已经挂了，是否重玩?")

                        if(b){

                            window.location.reload();

                        }

                }

                if(enemy.y>Util.windowHeight||enemy.isDied){

                    enemy.restore();

                }

            }

            var bullets=bulletFactory.bullets;

            for(var i in bullets){

                var bullet=bullets[i];

                bullet.move(0,-bullet.speed);

                for(var i in enemys){

                    var enemy=enemys[i];

                    //判断子弹是否击中敌机，如果击中则隐藏子弹，杀死敌机,增加积分..

                    if(bullet.y>10

                        &&bullet.x>enemy.x

                        &&bullet.x<enemy.x+enemy.e.width

                        &&bullet.y<enemy.y+enemy.e.height){

                            enemy.isDied=true;

                            bullet.e.style.top=-bullet.e.height;

                            selfPlane.score+=50;

                            Util.scoreSpan.innerHTML=selfPlane.score+"";

                    }

                }

            }

        },1000/15);

    },

    //射击定时器

    _startShoot_t:null,

    _startShoot:function(){

        var i=0;

        var bullets=bulletFactory.bullets;

        var bulletsCount=bullets.length;

        this._startShoot_t=setInterval(function(){

            if(i>=bulletsCount){

                i=0;

            }

            var bullet=bullets[i];

            bullet.moveTo(selfPlane.x+selfPlane.e.width/2-bullet.e.width/2,selfPlane.y-bullet.e.height-3);

            i++;

        },300);

    },

    keyMove:10,

    _initEvent:function(){

        window.onkeydown=function(e){

            /*

            37:左

            38:上

            39:右

            40:下

            */

            var keynum;

            var left=37,up=38,right=39,down=40;

            if(window.event){// IE

              keynum = e.keyCode

            }else if(e.which) {// Netscape/Firefox/Opera

              keynum = e.which

            }

            switch(keynum){

                case left:

                selfPlane.move(-Main.keyMove,0);

                break;

                case up:

                selfPlane.move(0,-Main.keyMove);

                break;

                case right:

                selfPlane.move(Main.keyMove,0);

                break;

                case down:

                selfPlane.move(0,Main.keyMove);

                break;

                default:

                break;

            }

            //console.log(keynum);

        }

    }

}

entity.js:

//自身的对象

var selfPlane={

    x:0,

    y:0,

    score:0,

    e:null,

    init:function(){

        this.x=(Util.windowWidth-Util.selfPlaneElement.width)/2;//相对于父窗体的x偏移(css:left)

        this.y=Util.windowHeight-Util.selfPlaneElement.height;//相对于父窗体的y偏移(css:top)

        this.e=Util.selfPlaneElement;//对应的dom元素

        Util.selfPlaneElement.style.left=this.x+"px";

        Util.selfPlaneElement.style.top=this.y+"px";

        Util.parentElement.appendChild(this.e);

    },

    move:function(moveX,moveY){

        var x=this.x+moveX;

        var y=this.y+moveY;

        if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){

            return ;

        }

        if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){

            return ;

        }

        this.x=x;

        this.y=y;

        this.e.style.left=this.x+"px";

        this.e.style.top=this.y+"px";

    },

    moveTo:function(x,y){

        if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){

            return ;

        }

        if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){

            return ;

        }

        this.x=x;

        this.y=y;

        this.e.style.left=this.x+"px";

        this.e.style.top=this.y+"px";

    }

}

//敌机的类

var enemyPlane=function(x,y,speed){

    this.x=x;

    this.y=y;

    this.e=Util.enemyPlaneElement.cloneNode(true);

    this.e.style.left=x;

    this.e.style.top=y;

    this.e.style.display="none";

    Util.parentElement.appendChild(this.e);

    this.e.style.display="block";

    this.speed=speed;

    this.isDied=false;

}

//prototype:原型

enemyPlane.prototype.move=function(moveX,moveY){

    this.x+=moveX;

    this.y+=moveY;

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

}

//敌人复活

enemyPlane.prototype.restore=function(){

    this.x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);

    this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;

    this.speed=2+Math.random()*4;

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

    this.isDied=false;

}

//敌机工厂

var enemyPlaneFactory={

    enemys:[],

    creatEnemyPlane:function(n){

        for(var i=0;i<n;i++){

            //0~1 乘以窗口宽度，得到的就是从0~窗口宽度的一个随机x值

            var x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);

            var y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;

            var speed=2+Math.random()*4;

            var ep=new enemyPlane(x,y,speed);

            this.enemys.push(ep);

        }

    }

}

//子弹

var bullet=function(x,y,speed){

    this.x=x;

    this.y=y;

    this.speed=speed;

    this.e=Util.bulletElement.cloneNode(true);

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

    Util.parentElement.appendChild(this.e);

    this.isUsed=false;

}

bullet.prototype.move=function(moveX,moveY){

    this.x+=moveX;

    this.y+=moveY;

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

}

bullet.prototype.moveTo=function(X,Y){

    this.x=X;

    this.y=Y;

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

}

//子弹恢复

bullet.prototype.restore=function(){

    this.x=Main.self

    this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;

    this.speed=2+Math.random()*4;

    this.e.style.left=this.x+"px";

    this.e.style.top=this.y+"px";

}

//子弹工厂

var bulletFactory={

    bullets:[],

    creatBullet:function(n){

        for(var i=0;i<n;i++){

            var b=new bullet(0,-Util.bulletElement.height,20);

            this.bullets.push(b);

        }

    }

}

util.js:

// JavaScript Document

var Util={

    windowWidth:350,

    windowHeight:480,

    selfPlaneElement:null,

    enemyPlaneElement:null,

    bulletElement:null,

    parentElement:null,

    scoreSpan:null,

    g:function(id){

        return document.getElementById(id);

    },

    init:function(){

        this.parentElement=this.g("parent");

        this.selfPlaneElement=this._loadImg("images/self.gif");

        this.enemyPlaneElement=this._loadImg("images/boss.gif");

        this.bulletElement=this._loadImg("images/bullet.jpg");

        this.scoreSpan=this.g("score");

    },

    _loadImg:function(src){

        var e=document.createElement("img");

        e.style.position="absolute";

        e.src=src;

        return e;

    }

}

在线预览:预览

源码下载地址:打飞机小游戏原生javascript版

原生javascript开发仿微信打飞机小游戏的更多相关文章

用原生javascript做的一个打地鼠的小游戏
学习javascript也有一段时间了,一直以来分享的都是一些概念型的知识,今天有空做了一个打地鼠的小游戏,来跟大家分享一下,大家也可以下载来增加一些生活的乐趣,下面P出代码:首先是HTML部分代码: ...
实例源码--IOS高仿微信打飞机游戏(完整功能)
下载源码技术要点: 1. IOS游戏开发基础框架 2. 高仿打飞机游戏 3. 游戏背景音频技术 4.源码详细的中文注释 ……. 详细介绍: 1. IOS游戏开发基础框架此套源码为涉及IOS游戏开发 ...
一、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-项目引言
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
[deviceone开发]-仿微信应用(一):框架搭建
一.简介这个示例是一步一步跟我学DeviceOne开发 - 仿微信应用系列文档对应的文档.详细介绍了ListView,IndexListView,add方法等常用功能,推荐初学者学习. 二.效果图 ...
一个基于原生JavaScript开发的、轻量的验证码生成插件
Vcode.js 一个基于原生JavaScript开发的.轻量的验证码生成插件 V: 1.0.0 DEMO:https://jofunliang.github.io/Vcode.js/example. ...
三、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-配置项目并实现IM登录
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...
头脑王者pk答题小程序开发思路微信pk答题小程序开发 PK答题游戏你也可以做微信pk答题游戏
想必大家最近的朋友圈和微信群里都被头脑王者PK答题刷屏了吧.确实很好玩,尤其是2018年的这波风口,手机答题,大家掏出手机,创建一个好友PK,然后你的好友点击进来就可以和你一起PK答题.比之前的游戏好 ...
五、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-聊天输入框的实现
会话好友列表的实现 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展 ...
二、Uniapp+vue+腾讯IM+腾讯音视频开发仿微信的IM聊天APP，支持各类消息收发，音视频通话，附vue实现源码(已开源)-腾讯云后台配置TXIM
项目文章索引 1.项目引言 2.腾讯云后台配置TXIM 3.配置项目并实现IM登录 4.会话好友列表的实现 5.聊天输入框的实现 6.聊天界面容器的实现 7.聊天消息项的实现 8.聊天输入框扩展面板的 ...

随机推荐

u-boot-1.1.6移植之dm9000
网卡dm9000的执行过程(u-boot版本:u-boot-1.1.6): 在board.c里面有eth_initialize(gd->bd); eth_initialize的实现在eth.c里 ...
利用Python抓取CSDN博客
这两天发现了一篇好文章,陈皓写的makefile的教程,具体地址在这里<跟我一起写makefile> 这篇文章一共分成了14个部分,我看东西又习惯在kindle上面看,感觉一篇一篇地复制成 ...
Sublime Text 2 常用快捷键
Sublime Text 2 常用的快捷键 (不包含插件快捷键) Ctrl+P 打开文件搜索框,可以直接输入文件名搜索,或者输入@funcName 可以直接到函数定义处,输入#key 可以直接查找,输 ...
POJ C++程序设计编程题＃1 编程作业—文件操作与模板
编程题#1 来源: POJ (Coursera声明:在POJ上完成的习题将不会计入Coursera的最后成绩.) 注意: 总时间限制: 1000ms 内存限制: 65536kB 描述实现一个三维数组 ...
css半透明
filter:alpha(opacity=80); /*支持 IE 浏览器*/-moz-opacity:0.80; /*支持 FireFox 浏览器*/opacity:0.80; /*支持 Chrom ...
[leetcode]_Maximum Depth of Binary Tree
第三道树的题目,我还是不会,我擦,怎么递归算法还是不能很好理解.看来还得好好研究下递归算法. 题目:求一棵树的最大深度. 思路:递归地求取左子树最大深度和右子树最大深度,返回较大值即为整棵树的 ...
centos6.7下编译安装lamp环境
编译C源代码: 前提:提供开发工具及开发环境通过“包组”提供开发组件,CentOS 6: "Development Tools", "Server Platform D ...
How to get the underlying SSRS Report Query, reset query , add your own ranges and execute report [AX2012]
Below is the small code snippet to get the underlying query of the SSRS report, reset query, prompt ...
Ioc 控制反转实例
关于IOC 或者是DI 什么的真的很坑爹. 开始理解了这东西了然后闲的没事就又百度了一下,得我又凌乱了. 看了两个大神的贴尼玛啊完全是反过来了. 纠结了半天.然后就想找个简单点不坑爹的原理代 ...
007-python基础-pyc是什么
3.1 解释型语言和编译型语言计算机是不能够识别高级语言的,所以当我们运行一个高级语言程序的时候,就需要一个"翻译机"来从事把高级语言转变成计算机能读懂的机器语言的过程.这个过程 ...

原生javascript开发仿微信打飞机小游戏

原生javascript开发仿微信打飞机小游戏的更多相关文章

随机推荐

热门专题