首页 > 代码库 > 星际飞机

星际飞机

2024-08-30 06:24:45 219人阅读

星际飞机大战游戏

在github里看到了个不错的脚本游戏，决定亲自动手来写

然后在四天的琢磨下总算是把飞机游戏给写出来了，效果如下

技术分享

满足大家的需求先给源代码下面有详细的思路分享

源代码：

先创建一个文件夹在这个文件夹里面创建 images文件夹和 js 文件夹和一个index.html 如图

因为代码里绑定了相对路径如果不这么做显示不出来

技术分享

images里面的素材可以自己找但是图片名字一定要跟下面的一样

技术分享

bak背景 enemy敌人飞机 hero我方飞机 newbullet子弹 pause暂停

js文件夹存放下面两个文件

文件名:elements.js (记得把win7默认隐藏后缀的勾去掉)

代码:

function bullet(x,y){
    this.x=x;
    this.y=y;
    this.islive=true;
    this.timmer=null;
    this.run=function run(){
        if(this.y<-10||this.islive==false){
            clearInterval(this.timmer);
            this.islive=false;
        }else{
            this.y-=20;
        }
    }
}


function enemy(x,y){
    this.x=x;
    this.y=y;
    this.islive=true;
    this.timmer=null;
    this.run=function run(){
        if(this.y>boxheight||this.islive==false){
            clearInterval(this.timmer);
            this.islive=false;
        }else{
            this.y+=2.5;
        }
    }
}

文件名:myplane.js (记得把隐藏后缀去掉)

代码:

    var sp;
    var fps=55;
    var score=0;
    
    var boxx=0;
    var boxy=0;
    var boxwidth=500;
    var boxheight=500;
    
    var planeImage;
    var planex;
    var planey;
    var planewidth=60;
    var planeheight=60;
    
    var bulletImage;
    var herobullet;
    var allbullets = new Array();
    var bulletwidth=10;
    var bulletheight=10;
    
    var enemyImage;
    var heroenemy;
    var allenemys = new Array();
    var enemywidth=30;
    var enemyheight=30;
    
    var gameTimmer;
    var btimmer;
    var etimmer;
    
    bulletImage = new Image();
    bulletImage.src="http://www.mamicode.com/images/newbullet.PNG";
    enemyImage = new Image()
    enemyImage.src="http://www.mamicode.com/images/enemy.jpg";
    
    
    function beginplane(){
        planex = boxwidth / 2 - planewidth /2 ;
        planey = boxheight - planeheight;
        planeImage = new Image();
        planeImage.src="http://www.mamicode.com/images/hero.jpg";
    }
    
    function init(){
        canvas = document.getElementById(‘canvas‘);
        cxt = canvas.getContext(‘2d‘);
        cxt.lineWidth=3;
        beginplane();
        var body = document.getElementsByTagName(‘body‘)[0];
        btimmer = setInterval(producebullet,500);
        etimmer = setInterval(produceenemy,800)
        body.addEventListener(‘keydown‘,function (event){
            switch(event.keyCode){
                case 37 : if(planex>boxx){sp=8}else{sp=0}planex-=sp;break;
                case 38 : if(planey>boxy){sp=8}else{sp=0}planey-=sp;break;
                case 39 : if((planex+planewidth)<boxwidth){sp=8}else{sp=0}planex+=sp;break;
                case 40 : if((planey+planeheight)<boxheight){sp=8}else{sp=0}planey+=sp;break;
                default:break;
            }
        },false)
        gameTimmer = setInterval(run,1000/fps);
    }
    
    
    function drawenemy(){
        for (var i=0;i<allenemys.length;i++){
            if(allenemys[i].islive){
                cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight);
            }
        }
    }
    
    
    function drawplane(){
        cxt.clearRect(boxx,boxy,boxwidth,boxheight);
        cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
    }
    
    
    function drawbullet(){
        for(var i=0;i<allbullets.length;i++){
            if(allbullets[i].islive){
                cxt.drawImage(bulletImage,allbullets[i].x,allbullets[i].y,bulletwidth,bulletheight);
            }
        }
    }
    
    function produceenemy(){
        var x = Math.ceil(Math.random()*(boxwidth-planeheight));
        heroenemy = new enemy(x,33);
        allenemys.push(heroenemy);
        var timmer = setInterval("allenemys["+ (allenemys.length-1) + "].run()",50);
        allenemys[allenemys.length-1].timmer=timmer;
    }
    
    function producebullet(){
        herobullet = new bullet(planex+planewidth/2,planey+10);
        allbullets.push(herobullet);
        var timmer = setInterval("allbullets[" + (allbullets.length-1) + "].run()",50);
        allbullets[(allbullets.length-1)].timmer=timmer;
    }

    

function checkbullet(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
            var e =allenemys[i];
            for(var j=0;j<allbullets.length;j++){
                if(allbullets[j].islive){
                var b = allbullets[j];
                if(b.x>e.x-bulletwidth&&b.x+bulletwidth<e.x+enemywidth+10&&b.y<e.y){
                    e.islive=false;
                    b.islive=false;
                    score+=100;
                }
                }
            }
        }
    }
}

function checkplane(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
        var e = allenemys[i];
            if(e.x+enemywidth>planex&&e.x<planex+planewidth&&e.y>planey||e.y>boxheight){
                e.islive=false;
                stop();
                score=0;
            }
        }
    }
}

function drawscore(){
    document.getElementById(‘score‘).innerHTML=score;
}



    
    function run(){
        drawplane();
        drawbullet();
        drawscore();
        drawenemy();
        checkbullet();
        checkplane();
    }

    var sp;
    var fps=55;
    var score=0;
    
    var boxx=0;
    var boxy=0;
    var boxwidth=500;
    var boxheight=500;
    
    var planeImage;
    var planex;
    var planey;
    var planewidth=60;
    var planeheight=60;
    
    var bulletImage;
    var herobullet;
    var allbullets = new Array();
    var bulletwidth=10;
    var bulletheight=10;
    
    var enemyImage;
    var heroenemy;
    var allenemys = new Array();
    var enemywidth=30;
    var enemyheight=30;
    
    var gameTimmer;
    var btimmer;
    var etimmer;
    
    bulletImage = new Image();
    bulletImage.src="http://www.mamicode.com/images/newbullet.PNG";
    enemyImage = new Image()
    enemyImage.src="http://www.mamicode.com/images/enemy.jpg";
    
    
    function beginplane(){
        planex = boxwidth / 2 - planewidth /2 ;
        planey = boxheight - planeheight;
        planeImage = new Image();
        planeImage.src="http://www.mamicode.com/images/hero.jpg";
    }
    
    function init(){
        canvas = document.getElementById(‘canvas‘);
        cxt = canvas.getContext(‘2d‘);
        cxt.lineWidth=3;
        beginplane();
        var body = document.getElementsByTagName(‘body‘)[0];
        btimmer = setInterval(producebullet,500);
        etimmer = setInterval(produceenemy,800)
        body.addEventListener(‘keydown‘,function (event){
            switch(event.keyCode){
                case 37 : if(planex>boxx){sp=8}else{sp=0}planex-=sp;break;
                case 38 : if(planey>boxy){sp=8}else{sp=0}planey-=sp;break;
                case 39 : if((planex+planewidth)<boxwidth){sp=8}else{sp=0}planex+=sp;break;
                case 40 : if((planey+planeheight)<boxheight){sp=8}else{sp=0}planey+=sp;break;
                default:break;
            }
        },false)
        gameTimmer = setInterval(run,1000/fps);
    }
    
    
    function drawenemy(){
        for (var i=0;i<allenemys.length;i++){
            if(allenemys[i].islive){
                cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight);
            }
        }
    }
    
    
    function drawplane(){
        cxt.clearRect(boxx,boxy,boxwidth,boxheight);
        cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);
    }
    
    
    function drawbullet(){
        for(var i=0;i<allbullets.length;i++){
            if(allbullets[i].islive){
                cxt.drawImage(bulletImage,allbullets[i].x,allbullets[i].y,bulletwidth,bulletheight);
            }
        }
    }
    
    function produceenemy(){
        var x = Math.ceil(Math.random()*(boxwidth-planeheight));
        heroenemy = new enemy(x,33);
        allenemys.push(heroenemy);
        var timmer = setInterval("allenemys["+ (allenemys.length-1) + "].run()",50);
        allenemys[allenemys.length-1].timmer=timmer;
    }
    
    function producebullet(){
        herobullet = new bullet(planex+planewidth/2,planey+10);
        allbullets.push(herobullet);
        var timmer = setInterval("allbullets[" + (allbullets.length-1) + "].run()",50);
        allbullets[(allbullets.length-1)].timmer=timmer;
    }

    

function checkbullet(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
            var e =allenemys[i];
            for(var j=0;j<allbullets.length;j++){
                if(allbullets[j].islive){
                var b = allbullets[j];
                if(b.x>e.x-bulletwidth&&b.x+bulletwidth<e.x+enemywidth+10&&b.y<e.y){
                    e.islive=false;
                    b.islive=false;
                    score+=100;
                }
                }
            }
        }
    }
}

function checkplane(){
    for(var i=0;i<allenemys.length;i++){
        if(allenemys[i].islive){
        var e = allenemys[i];
            if(e.x+enemywidth>planex&&e.x<planex+planewidth&&e.y>planey||e.y>boxheight){
                e.islive=false;
                stop();
                score=0;
            }
        }
    }
}

function drawscore(){
    document.getElementById(‘score‘).innerHTML=score;
}



    
    function run(){
        drawplane();
        drawbullet();
        drawscore();
        drawenemy();
        checkbullet();
        checkplane();
    }

还有文件名:myplane.html 记得这个是要放在js文件外面的然后编辑他输入下面代码

<!DOCTYPE html>
<html>

    <head>
    <meta charset="utf-8" />
    <title></title>
    </head>

    <body style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>
    <canvas id="canvas" width="500" height="500" style="background-image: url(images/bak.PNG);"></canvas>    
    <img src="http://www.mamicode.com/images/pause.PNG" style="position: absolute;top: 20px;left: 30px;" onclick="stop()"/>
    <div style="position: absolute;top: 90px;left: 30px;font-weight: bold;font-size: 40px;color:cornflowerblue"><span id="score">0</span></div>
    <input style="position: absolute;top:350px;left: 230px;" type="button" value="http://www.mamicode.com/start" id="start" onclick="init();startHide()" />        
    <div style="position: absolute;top: 200px;left: 180px;"><span id="rules">击中敌机得分<br>飞机撞机或敌机落地游戏结束</span></div>
    <script type="text/javascript" src="http://www.mamicode.com/js/elements.js"></script>
    <script type="text/javascript" src="http://www.mamicode.com/js/myplane.js" ></script>
    <script>
    var rules = document.getElementById(‘rules‘);
    var showScore = document.getElementById(‘showScore‘);
    var start = document.getElementById(‘start‘);    

    function startHide(){        
    rules.style.display="none";        
    start.style.display="none";            
    }            

    function stop(){                
    clearInterval(gameTimmer);                
    clearInterval(btimmer);                
    clearInterval(etimmer);                
    cxt.clearRect(boxx,boxy,boxwidth,boxheight);            
    allenemys.length=0;            
    allbullets.length=0;            
    rules.style.display="";            
    start.style.display="";            
    }     

    </script>
    </body>
    </html>

然后就可以玩了

如果有疑问可以提出

如果你想有收获那么就耐心往下看把

下面和大家分享下飞机游戏的制作过程虽然有点痛苦但这真的很好玩比如把飞机该无敌超级子弹并发子弹等等

另外建议大家先看完再去做边看边做也可以但心里应该有一个整体的思路

要把整个代码吃下确实不容易，但吃下后受益匪浅

如果你能够沉下心来一样也可以做出因此稍安勿躁

废话不多说下面说思路

不过在此先先说好下面的代码只是临时打出来的并没有去真实的去测试过可能会存在语法错误逻辑错误等等

希望各位能够指出不足的地方或者谅解错误毕竟我想分享的思路而不是代码代码上面有

做游戏的第一件最简单的事情，就是准备素材----当然也可以放到最后来做，这样的话你需要找简单替代物先代替之

元素有：背景（可不要）敌机我机（下面就叫飞机）子弹还有暂停图标

技术分享

素材的大小是游戏的关键可以利用javascript的画布中drawImage()来改变其大小

那么现在来开始做游戏

首先搞个画布出来

<canvas id="canvas" width=500 height=500 style="border:1px solid #c3c3c3"></canvas>

有了画布就可以先把我们的主角飞机画上去:

//获取画布

canvas = document.getElementById(‘canvas‘) 

cxt = canvas.getContext(‘2d‘);

//设置画布属性：横坐标纵坐标宽高

var boxx=0

var boxy=0

var boxwidth=500

var boxheight=500

//设置飞机属性：横坐标纵坐标宽高

var planex;

var planey;

var planewidth=60;

var planeheight=60;

var planeImage = new Image();

planeImage.src="http://www.mamicode.com/images/hero.jpg";

主角飞机的开始位置按常规套路出牌的话横坐标就是画布中间纵坐标就是画布底端

planex = (boxwidth - planewidth) / 2 

planey = boxheight - planeheight

注意飞机的坐标(x,y)指的是飞机图片的最左上角的那个坐标，因此在上面还需要算上飞机的长度

//有了四大神器:横纵宽高就可以把飞机画出来了

cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);

飞机画出来了但是飞机不会动那么怎么能让飞机动呢？改变其坐标！那么什么时候动呢？按下键盘上的 ↑ ↓ ← → 键的时候

我们知道键盘有个事件驱动 onkeydown 而这个事件驱动有个属性keycode 用这个属性可以绑定上下左右键对应的函数

技术分享

左 : 37

上 : 38

右 : 39

下 : 40

而且游戏开始我们当然期望我们所按下的按键能够实时的得到响应而javascript提供了个很好的接口可以实时的响应事件:

addEventListener()函数

语法

element.addEventListener(event, function, useCapture)

这个函数可以用来实时监听事件使得我们的按下按键可以得到响应

那么可以飞机能动就不是啥问题了！

首先声明个飞机运动跨度的变量

var sp=0;

然后监听body元素以及临界判断否则你飞机要飞出界！

body.addEventListener(‘keydown‘,function (event){
            switch(event.keyCode){
                case 37 : if(planex>boxx){sp=8}else{sp=0}planex-=sp;break;
                case 38 : if(planey>boxy){sp=8}else{sp=0}planey-=sp;break;
                case 39 : if((planex+planewidth)<boxwidth){sp=8}else{sp=0}planex+=sp;break;
                case 40 : if((planey+planeheight)<boxheight){sp=8}else{sp=0}planey+=sp;break;
                default:break;
            }
        },false)

到这里你的飞机已经可以动了但是你激动的去测试一下发现飞机没动！！

原因是这里只是飞机的坐标改变了但是飞机的图片还在原地啊，因此需要一个计时器

每隔一段时间重新把飞机重画一次这样飞机真的可以动了

function drawplane(){

  cxt.clearRect(boxx,boxy,boxwidth,boxheight);

  cxt.drawImage(planeImage,planex,planey,planewidth,planeheight);

}
 

var fps  　　　　　　　　　　　　　　　　　　　　　　　　//用来调画面流畅感 玩过LOL的不可能不知道fps是啥吧

var gameTimmer = setInterval (run,1000/fps);　　　　  //gameTimer游戏的总驱动的计时器

 

function run(){　　　　　　　　　　　　　　　　　　　　//游戏及驱动

 drawplane();　　　　　　　　　　　　　　　　　　 　　　

}

光有飞机还不够还需要子弹那么现在开始画子弹

老规矩先来设置子弹的属性

var bulletx;

var bullety;

var bulletwidth=10;

var bulletheight=10;

var bulletImage=new Image();

bulletImage.src="http://www.mamicode.com/images/bullet.png"

另外我们需要一个数组用来存放所有的子弹

再用一个变量来表示每一个子弹

var herobullet;

var allbullets = new Array();

然后对子弹的特点分析下：首先每颗子弹的起始位置应该是飞机的中间偏下

bulletx=planex+planewidth/2

bullety=planey+bulletheight

然后每颗子弹都应该会动，除非他出界或者击中了敌机，因此可以写个子弹的构造函数

function bullet(x,y){

this.x=x;

this.y=y;

this.islive=true;　　  //用于判断子弹是否存活

this.timmer=null;　　//子弹计时器

    this.run = function run(){

       if(this.islive==false||this.y<-10){

       clearInterval(this.timmer);

　　  this.islive=false;

        }else{

        this.y-=20       //让子弹往上飞

 　　 }

    }

}

有了做子弹的秘方那么就可以开始制造子弹了

function producebullet(){

  herobullet = new bullet(bulletx,bullety);

  allbullets.push(herobullet);

  var timmer = setInterval("allbullets[" + （allbullets.length-1） +"].run()" , 50);

  allbullets[allbullets.length-1].timmer=timmer;

}

同样上面改变的仅仅是子弹的坐标还需要改变下子弹的图片

function  drawbullet(){

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

  if(allbullets[i].islive){

  cxt.drawImage(bulletImage,allbullets.x,allbullets.y,bulletwidth,bulletheight);

  }

  }

}

然后把drawbullet函数放到之前定义的run函数里不是子弹的方法

function run(){

  drawplane();

  drawbullet();

}

这样子弹就可以被实时的画出来了

然后给生产子弹以和动态改变子弹坐标的函数 producebullet 加个计时器

btimmer = setInterval(producebullet,500)

这样子弹就可以自动生产以及自动改变自己的坐标了

这时候可以测试下是否能够自动产生子弹

按照上面的方法画出敌机也是一个方法

设置属性 -> 确定坐标 -> 构造函数 -> 画出敌机 -> 计时器

但是这里有个不同的点那就是敌机初始的横坐标应该是随机的而纵坐标都是0 （顶部位置）

说到随机就能想到：　Math.random()函数但这个只能产生0~1的随机数

因此 Math.random*500 范围就是0~500范围

最后四拾伍入 Math.ceil(Math.random*500);

画敌机的方法和画子弹的方法是一样的因此这里简单的带过

//构造函数

function enemy(x,y){

  this.x=x;

  this.y=y;

  this.islive=true;

  this.timmer=null;

  this.run = function run(){

   if (this.islive==false||this.y>boxheight){

   clearInterval(this.timmer);

   this.islive=false;

   }else{

   this.y+=2.5;

   }

  }

}


//生产敌机

function produceenemy(){

  enemyx=Math.ceil(Math.random()*500);

  enemyy=33;

  heroenemy = new enemy(enemyx,enemyy);

  allenemys.push(heroenemy);

  var timmer = setInterval("allenemys[" + (allenemys.length-1) + "].run()");

  allenemys[allenemys.length-1].timmer=timmer;

}

 

//画出敌机

function drawenemy(){

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

  if(allenemys[i].islive){

   cxt.drawImage(enemyImage,allenemys[i].x,allenemys[i].y,enemywidth,enemyheight)

  }

 }

}

最后把 drawenemy 加入run函数里给produeenemy 加个计时器

function run(){

  drawplane();

  drawbullet();

  drawenemy();

}

etimmer = setInterval(produceenemy,800);

飞机敌机子弹都画好了而且都可以动起来了，现在来写子弹碰到敌机时敌机消失的规则

技术分享

上图可以清晰的看出子弹击中敌机的范围

击中条件：

bulletx + bulletwidth > enemyx

bulletx < enemyx + enemywidth

bullety < enemyy + enemyheight

function checkbullet{

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

　　　　if (allenemys[i].islive){

　　　　var e = allenemys[i];

　　　　}

　　　　for(var j=0;j<allbullets.length;j++){

　　　　　　if(allbullets[j].islive){

　　　　　　　　var b = allbullets[j];

　　　　　　　　if(b.x+b.width>e.x&&b.x<e.x+e.width&&b.y<e.y+e.height){

　　　　　　　　　　b.islive=false;

　　　　　　　　　　e.islive=false;

　　　　　　　　　　score+=100;  //加分规则 等等说

　　　　　　　　}

　　　　　　}

　　　　}

　　}

}

我机的死亡的规则：

技术分享

击中条件：

enemyx+enemywidth > planex

enemyx < planex + planewidth

enemyy + enemyheight > planey

function checkenemy(){

　　for(var i=0;i<allenemys[i].length;i++){

      　　if(allenemys[i].islive){

　　　　　　var e = allenemys[i];

　　　　　　if(e.x+e.width > planex && e.x < planex + planewidth && e.y + e.height > planey){

　　　　　　　　e.islive=false;

　　　　　　　　stop();

　　　　　　}

　　　　}

     }

}

然后随便把stop函数写出来

function stop(){

  clearInterval(btimmer);　　　　//停止生产子弹

  clearInterval(etimmer);　　　　//停止生产敌机

  clearInterval(gameTimmer);     //停止游戏

  allenemys.length=0;　　　　 　//初始化

  allbullets.length=0;　　　　　　//初始化

  show.innerHTML=score;　　　 //统计总分 等等说

  score=0;

}

然后把checkbullet函数和checkenemy函数放到游戏驱动run 里头

function run(){

  drawplane();

  drawenemy();

  drawbullet();

  checkbullet();

  checkenemy();

  drawscore();　　　　//实时加分 现在说

}

基本上游戏就大功告成了不过为了更完美些来个加分规则

首先创建个放分数位置的标签

<div style="position: absolute;top: 90px;left: 30px;font-weight: bold;font-size: 40px;color:cornflowerblue">
<span id="show">0</span></div>

获取标签

show = document.getElementById(‘show‘);

实时计分

function drawscore(){

  show.innerHTML=score;

}

当然还可以加一些小细节，比如暂停按钮弹出窗口统计得分

还可以玩好玩的，比如飞机无敌无限子弹超级子弹无敌并排子弹总之你自己想怎么改都行

星际飞机

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们