Phaser小遊戲

時間 2019-11-21

標籤 phaser 遊戲欄目遊戲简体版

原文原文鏈接

原本今天打算閱讀AngularJs源代碼的，可是上頭下來了任務，作個小霸王上面的那種接金蛋的遊戲，想象最近系統的學習了一下gulp和以前熟悉了一遍的Phaser，因而就打算用這兩個東西一塊兒來作個demo了。前端

雖然對白鷺比較熟悉，可是聽說白鷺不支持鍵盤事件，因此就沒有去考慮白鷺了。node

如下是文件目錄：express

dist：項目的輸出路徑，node服務器的靜態文件服務目錄，結構與src基本相同
node_module：node第三方包的安裝路徑
src：
- assets：資源路徑
- js：編寫腳本的路徑
- libs：第三方庫路徑
app.js:node 啓動入口，主要做用是靜態文件服務器，靜態文件服務器的根目錄是dist
gulpfile.js：gulp文件
package.json：nodejs包文件
rawsource.fla：用Flahs處理資源源文件

demo花了半天時間的樣子。json

主要的幾個文件以下：gulp

var express = require("express");
var morgan = require("morgan");
var cors = require('cors');
var path = require('path');
var app = express();

app.use(morgan('dev'));
app.use(cors());
app.use(express.static(path.join(__dirname,'/dist')));
var PORT = 8080;
app.listen(PORT, function(){
    console.log("app is listening on : "+PORT)
})

app.js

{
  "name": "Coins",
  "version": "1.0.0",
  "description": "",
  "main": "gulpfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "cors": "^2.8.1",
    "express": "^4.14.0",
    "gulp": "^3.9.1",
    "gulp-develop-server": "^0.5.2",
    "gulp-imagemin": "^3.1.1",
    "gulp-minify": "0.0.14",
    "gulp-uglify": "^2.0.0",
    "mocha": "^3.1.2",
    "morgan": "^1.7.0"
  }
}

package.json

var game;
var speed = 6;
var greenJellyfish;
var jellyFishFrame = 0;

var life = 5;
var lifeLable, coinsLabel;
var coins = 0;

var itemTypes = ['item_blood','item_bomb','item_coin','item_dollar'];
var items = [];
var w;
var h;
function init() {
    game = new Phaser.Game(800,600, Phaser.AUTO,"Coins Game",{
        preload : preload,
        create : create,
        update : update
    });
}

function preload(){
    game.load.atlas('seacreatures','assets/seacreatures_json.png','assets/seacreatures_json.json');
    game.load.image('undersea','assets/undersea.jpg');
    game.load.image('item_blood','assets/item_blood.png');
    game.load.image('item_bomb','assets/item_bomb.png');
    game.load.image('item_coin','assets/item_coin.png');
    game.load.image('item_dollar','assets/item_dollar.png');
    game.load.image('icon_lives','assets/icon_lives.png');
    game.load.image('icon_money','assets/icon_money.png');
}


function create(){
    game.add.image(0, 0, 'undersea');
    greenJellyfish = game.add.sprite(game.world.centerX, 400, 'seacreatures', 'greenJellyfish0000');
       greenJellyfish.anchor.set(0.5,0.5);
       w = game.world.width;
       h = game.world.height;
       lastTime = Date.now();
       lifeLable = game.add.text(10,10,"Lives:5");
       coinsLabel = game.add.text(10,50,"Coins:0");
   // game.input.onDown.add(changeFrame, this);
}
var lastTime = 0;
var spf = 1000/40;
/**
function changeFrame(){
    
}
*/
function update(){
    if( Date.now() - lastTime < spf){
        return;
    }
    lastTime = Date.now();

    jellyFishFrame++;
    if(jellyFishFrame >= 39){
        jellyFishFrame = 0;
    }
    greenJellyfish.frameName = 'greenJellyfish00'+ (jellyFishFrame >= 10 ? jellyFishFrame : "0"+jellyFishFrame);

    if (game.input.keyboard.isDown(Phaser.Keyboard.LEFT))
    {
        if(greenJellyfish.x > 50){
            greenJellyfish.x -= speed;
        }
       
        greenJellyfish.angle = -15;
    }
    else if (game.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
    {
        if(greenJellyfish.x < game.world.width - 50){
            greenJellyfish.x += speed;
        }
        greenJellyfish.angle = 15;
    }
    else
    {
        greenJellyfish.rotation = 0;
    }

    var len = items.length;
    var item;
    for(var i = len-1; i >= 0; i--){
        item = items[i];
        if(distance(item, greenJellyfish)<=40){
            gainItem(item);
            game.world.remove(item);
            items.splice(i,1);
        }else{
            item.gravity++;
            item.y += item.gravity;
            if( item.y>h){
                game.world.remove(item);
                items.splice(i,1);
            }
        }
    }

    if(items.length < 2){
        genItem();
    }
}

function genItem(){
    var type = Math.floor(Math.random()*4);
    var itemType = itemTypes[type];
    var item = game.add.sprite(w*Math.random(), -80,itemType);
    item.anchor.set(0.5,0.5);
    item.speed = Math.random()*2;
    item.gravity = Math.random();
    if( type == 0){
        item.type = 0;
        item.value = 1;
    }else if(type == 1){
        item.type = 0;
        item.value = -1;
    }else if(type == 2 || type == 3){
        item.type = 1;
        item.value = type == 2 ? 5 : 10;
    }
    items.push(item);
}

function gainItem(item){
    var type = item.type;
    var value = item.value;
    if( type == 0 ){
        life += value;
        lifeLable.text = "Lives:"+life;
    }else{
        coins += value;
        coinsLabel.text = "Coins:"+coins;
    }
}

function distance(a,b){
    var dx = a.x - b.x;
    var dy = a.y - b.y;
    return Math.sqrt(dx*dx+dy*dy);
}

src/js/game.js

遊戲的主體邏輯編寫的地方。服務器

因爲Phaser沒有設置幀率的方法，因此用了個小手段來控制幀率：架構

var lastTime = 0;
var spf = 1000/30;//millseconds per frame
function update(){
    if( Date.now() - lastTime < spf){
        return;
    }
    lastTime = Date.now();
}

var gulp = require("gulp")
var minify = require("gulp-minify");
var uglify = require("gulp-uglify");
var imagemin = require("gulp-imagemin");
var server = require("gulp-develop-server");

gulp.task("script", function(){
    gulp.src('./src/js/*.js')
    .pipe(minify())
    .pipe(uglify())
    .pipe(gulp.dest('./dist/js/'));
});

gulp.task("auto", function(){
    gulp.watch('./src/js/**/*.js',["script"]);
    gulp.watch('./src/assets/**/*.png',["image"]);
});

gulp.task("move", function(){
    gulp.src('./src/assets/*.*')
    .pipe(gulp.dest('./dist/assets'));

    gulp.src('./src/libs/*.*')
    .pipe(gulp.dest('./dist/libs'));
});

gulp.task("image", function(){
    gulp.src('./src/assets/*.png')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/assets/'));
});

gulp.task("server:start", function(){
    server.listen({path:'./app.js'});
});

gulp.task("server:restart", function(){
    gulp.watch(['./app.js'],server.restart);
});

gulp.task('default', ['script','image','move','server:start','auto']);