原生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开发仿微信打飞机小游戏源码下载地址：

免费下载地址在 http://linux.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2014年资料/2月/8日/原生JavaScript开发仿微信打飞机小游戏

下载方法见

相关内容