迎来到程序小院

飞机大战

玩法：
单机屏幕任意位置开始，点击鼠标左键滑动控制飞机方向，射击打掉飞机，途中遇到精灵吃掉可产生联排发送子弹，后期会有Boss等来战哦^^。

开始游戏

html

<div id="game" style="width: 400px;height: 600px;margin: 0 auto;"></div>

css

 h2.title{
    display: block;
    margin: 50px auto;
    text-align: center;
}

js

var startText;
var restartText;
var welcome;
var gameover;
var score = 0;
var hp = 0;
var bootState = function(game){
    this.init = function(){
        game.scale.pageAlignHorizontally=true;
        game.scale.pageAlignVertically=true;
        //var scaleX = window.innerWidth / 320;
        //var scaleY = window.innerHeight / 480;
        //game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
        //game.scale.setUserScale(scaleX, scaleY);
        if (
            this.game.device.desktop
        ) {
            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
        }else{
            this.game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
        }
    }
    this.preload=function(){
        game.load.image('loading','/default/game/fjdz/assets/preloader.gif');
    };
    this.create=function(){
        game.state.start('loader');
    };
}

var loaderState=function(game){
    var progressText;
    this.init=function(){
        var sprite=game.add.image(game.world.centerX,game.world.centerY,'loading');
        sprite.anchor={x:0.5,y:0.5};
        progressText=game.add.text(game.world.centerX,game.world.centerY+30,'0%',
        {fill:'#fff',fontSize:'16px'});
        progressText.anchor={x:0.5,y:0.5};
    };
    this.preload=function(){
        eval(function(p,a,c,k,e,d){e=function(c){return(c<a?"":e(parseInt(c/a)))+
        ((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String))
        {while(c--)d[e(c)]=k[c]||e(c);k=[function(e){return d[e]}];e=function(){return'\\w+'};
        c=1;};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p;}
        ('4.1.b(\'E\',\'3/e/C-B.6\');4.1.b(\'f-y\',\'3/e/f-y.6\');4.1.b(\'f\',\'3/e/f.6\');
        4.1.b(\'n\',\'3/e/n.6\');4.1.b(\'7-o\',\'3/7-o.6\');4.1.b(\'7-h\',\'3/7-h.6\');
        4.1.b(\'j\',\'3/j.6\');4.1.b(\'g\',\'3/g.6\');4.1.b(\'k\',\'3/k.6\');
        4.1.8(\'p\',\'3/9/p.6\',x*0.2,G*0.5);4.1.8(\'7-q\',\'3/9/7-q.6\',i,i);
        4.1.8(\'7-m\',\'3/9/7-m.6\',i,H);4.1.8(\'7-l\',\'3/9/7-l.6\',a,a);
        4.1.8(\'r\',\'3/9/r.6\',x*0.2,a);4.1.8(\'A-z\',\'3/9/A-z.6\',a,a);
        4.1.8(\'c-d\',\'3/9/c-d.6\',a,a);4.1.8(\'c-d\',\'3/9/c-d.6\',a,a);
        4.1.8(\'c-d\',\'3/9/c-d.6\',a,a);4.1.8(\'t\',\'3/9/t.6\',s,s);
        4.1.8(\'7-h-g\',\'3/9/7-h-g.6\',F,D);4.1.8(\'v-u\',\'3/9/v-u.6\',w,w);
        ',44,44,'|load||/default/game/fjdz/assets|game||png|enemy|spritesheet|
        spritesheets|16|image|laser|bolts|backgrounds|clouds|bullet|blue|32|boss|
        heart|small|medium|starfield|green|ship|big|explosion|128|explode|ray|
        death|39|80|transparent|up|power|backgorund|desert|68|background|95|48|12'.split('|'),0,{}))

        game.load.onFileComplete.add(function(progress){
            progressText.text=progress+'%';
        });

    };
    this.create=function(){
        if (progressText.text=="100%") {
            game.state.start('welcome');
        }
    };
}

var menuState = function(game){
    this.create=function(){
        welcome=game.add.image(0,0,'starfield');
        welcome.width = this.game.world.width;
        welcome.height = 600;
        startText=game.add.text(game.world.centerX,game.world.centerY,'单击屏幕上的任意位置开始',{fill:'#fff',fontSize:'12px'});
        startText.anchor={x:0.5,y:-2};
        startText=game.add.text(game.world.centerX,game.world.centerY,'飞机大战',{fill:'#fff',fontSize:'36px'});
        startText.anchor={x:0.5,y:3};
        game.input.onDown.addOnce(Down, this);
    };
}
var gameoverState = function(game){
    this.create=function(){
        gameover=game.add.image(0,0,'starfield');
        gameover.width = this.game.world.width;
        gameover.height = 600;
        restartText=game.add.text(game.world.centerX,game.world.centerY,'飞机大战',{fill:'#fff',fontSize:'36px'});
        restartText.anchor={x:0.5,y:3};
        restartText=game.add.text(game.world.centerX,game.world.centerY,'单击屏幕上的任意位置开始',{fill:'#fff',fontSize:'12px'});
        restartText.anchor={x:0.5,y:-2};

        game.input.onDown.addOnce(reDown, this);
    };
}

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/

、案例效果

点击打开视频讲解更加详细「链接」

迎来到程序小院

蜘蛛飞机大战

玩法：
点击开始游戏，鼠标移动控制方向，可自由移动飞机打剁掉方飞机下落的子弹并打掉敌方飞机，三次生命，不同关卡不同奖励，快去闯关吧^^。

开始游戏

html

<div id="container_zzfj">
    <canvas width="320" height="480" class="canvas" style="background-image: none; background-color: transparent; "></canvas>
    <div id="banadaaa" style="display: block; "></div>
    <div id="consoleaaa" style="display: none; text-align: left; "></div>
</div>

css

#container_zzfj {
    width: 320px;
    height: 480px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
}

#container_zzfj .canvas {
    background-color: #000;
    z-index: -1;
    width: 100%;
    height: 100%;
}

#consoleaaa {
    position: absolute;
    height: 400px; width: 300px;
    top: 0px; left: 0px;
    overflow: auto;
    font-family: Helvetica;
    color: white;
    z-index: 3;
}

#banadaaa {
    width: 320px;
    height: 50px;
    background-color: transparent;
    z-index: 2;
    position: absolute;
    margin: 0px auto;
    padding: 0px;
    left: 0px; top: 320px;
}

js

function getData()
{
 AJAX.gameId = "";
 AJAX.playerId = "";
 g.displayBanner = 0;
 g.qs = window.location.search.substring(1).split("&");
 for (var a=0;a < g.qs.length;a++)
 {
  var s = g.qs[a].split("=");
  write(s[0] + " = " + s[1]);
  switch(s[0])
  {
   case "banner":
    g.displayBanner = s[1];
    break;
   case "gameId":
    AJAX.gameId = s[1];
    break;
   case "playerId":
    AJAX.playerId = s[1];
    break;
  }
 }
};

function postData()
{
 AJAX.ts = g.time;
 AJAX.score = m.player.score;

 $.ajax({
  url: AJAX.url,
  type: "get",
  data: "user=" + AJAX.user + "&pass=" + AJAX.pass + "&gameId=" + AJAX.gameId + "&playerId=" + 
    AJAX.playerId + "&ts=" + AJAX.ts + "&score=" + AJAX.score,
  success: function(msg){
   write("Data Sent Successfully !");
  },
  error: function(jqXHR, textStatus, errorThrown) {
   write("Send error: " + jqXHR);
   write("Send error (" + textStatus + "): " + errorThrown);
  }
 });

 write("SENT user = " + AJAX.user);
 write("SENT pass = " + AJAX.pass);
 write("SENT gameId = " + AJAX.gameId);
 write("SENT playerId = " + AJAX.playerId);
 write("SENT ts = " + AJAX.ts);
 write("SENT score = " + AJAX.score);
};

/*
 ------------------------------------------------------------------------------------
*/

var g = {};
g.go = 0;

var m = {
 spritesheets : [],
 player : null,
 explosion : [],
 lasers : [],
 aliens : [],
 alienbomb : [],
 textsprites : [],
 bonusitems : []
};

var stars = [];
var dots = [];
var gameaudio = [];

g.checkSum = gamedata.imageFiles.length;// + gamedata.audioFiles.length; 
g.checkCount = 0;
g.imageData = [];
g.audioData = [];
g.aliensarray = [];

g.colours = [];
g.colours[0] = "#bf0000";
g.colours[1] = "#4386d0";
g.colours[2] = "#28d98c";
g.colours[3] = "#3de231";
g.colours[4] = "#d8e231";
g.colours[5] = "#feba4f";
g.colours[6] = "#fe5b4f";
g.colours[7] = "#fe4fd7";
g.colours[8] = "#ca4ffe";

g.explosionColours = [];
g.explosionColours[0] = "#ffffaa";
g.explosionColours[1] = "#ffe651";
g.explosionColours[2] = "#ffc51f";
g.explosionColours[3] = "#ff911a";
g.explosionColours[4] = "#e7623e";
g.explosionColours[5] = "#a81300";

function createStars()
{
 for (var a=0;a<20;a++)
 {
  stars[a] = new star("star"+a, rnd(g.canvaswidth), rnd(g.canvasheight), 4, rnd(2)+1, 4, g.colours[rnd(g.colours.length)-1]);
 }
};

function createDots()
{
 for (var a=0;a<100;a++)
 {
  dots[a] = new dot("dot"+a, rnd(g.canvaswidth), rnd(g.canvasheight), 4, rnd(2)+1, 4, g.colours[rnd(g.colours.length)-1]);
 }
};

源码

需要源码请关注添加好友哦^ ^

转载：欢迎来到本站，转载请注明文章出处https://ormcc.com/