Phaser.js開發-星星狗遊戲(下)

時間  2019-11-22
標籤 phaser.js phaser 開發 星星 遊戲 欄目 JavaScript 简体版
原文   原文鏈接

上一部分咱們已經把遊戲的資源界面須要的場景，還有所用到的對象都定義完成，接下來就是咱們的建立遊戲部分，javascript

function create() {

	game.physics.startSystem(Phaser.Physics.ARCADE); //開啓遊戲物理系統

    game.add.sprite(0,0,'sky');//添加背景圖

	platforms = game.add.group();//添加到組裏

	platforms.enableBody = true; //在body上綁定觸發

    var ground = platforms.create(0,game.world.height - 64,'ground');//建立地面

	ground.scale.setTo(2,2);//比例縮放

	ground.body.immovable = true; //固定定位

在這裏簡單說明下，物理引擎這種東西是必須綁定在enableBody上面，否則是沒有效果滴！小夥伴們要注意啊！最早是繪製咱們的背景與地面，接下來咱們開始繪製障礙物，java

var ledge = platforms.create(450,550,'ground');//右上角3

  var firstaid = platforms.create(450,520,'firstaid');

    firstaid.body.immovable = true;


    ledge.body.immovable = true;

	var ledge = platforms.create(500,400,'ground');//座標設置右上角2障礙物

    ledge.body.immovable = true;//使內容不由於碰撞而發生變化

	var ledge = platforms.create(550,200,'ground');//座標設置右上角1障礙物

	ledge.body.immovable = true;

	var ledge = platforms.create(-140,250,'ground');//左2

	ledge.body.immovable = true;


    var ledge = platforms.create(-160,100,'ground');//左1

	ledge.body.immovable = true;


	var ledge = platforms.create(-110,400,'ground');//左3

	ledge.body.immovable = true;

	var ledge = platforms.create(-50,600,'ground');//左4

	ledge.body.immovable = true;

這些繪製完就出現了dom

這個障礙物是我從圖片上截取下來的->ground(這個是圖片，上面資源加載能夠進行查看)，這裏簡單說明 ，好比    var ledge = platforms.create(-160,100,'ground');//左1 這裏就用到了咱們所說的 座標，X軸，Y軸，以咱們的左上角爲座標原點，這裏面的左1，值得是最靠左上角的障礙物，其他就是照貓畫虎，大體障礙咱們就都弄了出來，ide

player = game.add.sprite(32,game.world.height - 200,'dude'); //小人位置

	game.physics.arcade.enable(player); //速度，加速度，角速度，角加速度

    player.body.bounce.y = 0.2;//跳躍反彈計算

	player.body.gravity.y = 150;//跳躍重力值

	player.body.collideWorldBounds = true;//小人與邊界進行碰撞開啓檢測

	player.animations.add('left',[0,1,2,3],10,true);
	//添加動畫，左執行1-4幀，10幀每秒速度播放，循環播放
	player.animations.add('right',[5,6,7,8],10,true);
    //添加動畫，右執行1-4幀，10幀每秒速度播放，循環播放

上文的小人指的是咱們控制的"單身狗"，在以前細心的朋友已經發現了，咱們把"單身狗(玩家)","敵人"都是精靈的屬性->sprite ，精靈就比如咱們設置好的演員，咱們能夠告訴他應該怎麼作，作什麼，第二行物理開啓引擎，phaser.js裏面給咱們提供了近乎完美的物理函數，函數

enemy_left = game.add.sprite(120,game.world.height - 300,'baddie'); //敵人1位置

  game.physics.arcade.enable(enemy_left); //速度，加速度，角速度，角加速度

    enemy_left.body.bounce.y = 0.5;//跳躍反彈計算

  enemy_left.body.gravity.y = 300;//跳躍重力值

  enemy_left.body.collideWorldBounds = true;//敵人與邊界進行碰撞開啓檢測

  enemy_left.animations.add('baddie');

enemy_left.animations.play('baddie',8,true); 

game.add.tween(enemy_left).to({ x:310 },50000,null,true,0,Number.MAX_VALUE,true); 


enema_left = game.add.sprite(32,game.world.height - 620,'baddie'); //敵人2位置

  game.physics.arcade.enable(enema_left); //速度，加速度，角速度，角加速度

    enema_left.body.bounce.y = 0.7;//跳躍反彈計算

  enema_left.body.gravity.y = 400;//跳躍重力值

  enema_left.body.collideWorldBounds = true;//敵人與邊界進行碰撞開啓檢測

  enema_left.animations.add('baddie');

enema_left.animations.play('baddie',8,true); 


game.add.tween(enema_left).to({ x:230 },60000,null,true,0,Number.MAX_VALUE,true); 



 enemy_right = game.add.sprite(790,game.world.height - 500,'baddie'); //右側敵人1位置

  game.physics.arcade.enable(enemy_right); //速度，加速度，角速度，角加速度

    enemy_right.body.bounce.y = 0.5;//跳躍反彈計算

  enemy_right.body.gravity.y = 300;//跳躍重力值

  enemy_right.body.collideWorldBounds = true;//敵人與邊界進行碰撞開啓檢測

  enemy_right.animations.add('baddie');

enemy_right.animations.play('baddie',8,true);

好，添加完了敵人，如今是這個樣子了字體

game.add.tween(enemy_right).to({ x:530 },60000,null,true,0,Number.MAX_VALUE,true);

這段話是一個補間動畫，說的是讓咱們這個精靈，以60000毫秒的時間走到X軸530的位置隨後進行折返，動畫

cursors = game.input.keyboard.createCursorKeys();//鍵盤事件

  stars = game.add.group();//星星組

  stars.enableBody = true;//開啓速度

  diamonds = game.add.group();//鑽石組

  diamonds.enableBody = true;//開啓速度



  for(var i = 0; i < 24;i++){//建立星星
  
    var star = stars.create(i * 33,0,'star');
	
	var diamond = diamonds.create(i * 250,0,'diamond');


	star.body.gravity.y = 150;//重力150

	star.body.bounce.y = 0.5 + Math.random() * 0.2;//隨即彈性

	diamond.body.gravity.y = 350;//重力150

	diamond.body.bounce.y = 0.5 + Math.random() * 0.2;//隨即彈性


	 }

	 scoreText = game.add.text(16,16,'星星的分:0',{ fontSize : '32px',fill: '#FFF'});

	 diamText = game.add.text(600,16,'鑽石得分:0',{ fontSize : '32px',fill: 'red'});
    //添加分數計量器->X,Y,分數默認值,字體大小，字體填充顏色
}

 

星星鑽石如上，得分面板如上，這就比較簡單，咱們往下看，接下來是更新頁面，this

function update() {


    game.physics.arcade.collide(player, platforms);//小人與platforms組碰撞
    
    game.physics.arcade.collide(enemy_left,player); //敵人1與小人碰撞

    game.physics.arcade.collide(enemy_left,platforms);//敵人1與platforms組碰撞

    game.physics.arcade.collide(enema_left,player); //敵人2與小人碰撞

    game.physics.arcade.collide(enema_left,platforms);//敵人2與platforms組碰撞


    game.physics.arcade.collide(enemy_right,player); //敵人3與小人碰撞

    game.physics.arcade.collide(enemy_right,platforms);//敵人3與platforms組碰撞


   game.physics.arcade.collide(stars,platforms);//星星與platforms組碰撞

   game.physics.arcade.collide(diamonds,platforms);//鑽石與地面碰撞



   game.physics.arcade.overlap(player,stars,collectStar,null,this);//小人星星檢測物理碰撞效果
 
   game.physics.arcade.overlap(player,diamonds,collectDiam,null,this);//小人與鑽石碰撞效果

   game.physics.arcade.overlap(player,enemy_left,alert_enemy,null,this);

   game.physics.arcade.overlap(player,enema_left,alert_enemy,null,this);

   game.physics.arcade.overlap(player,enemy_right,alert_enemy,null,this);

各類碰撞檢測，單身狗跟地面，敵人跟單身狗，星星鑽石跟單身狗，星星鑽石跟地面，spa

player.body.velocity.x = 0;//加速度默認值0

    if (cursors.left.isDown)
    {
        
        player.body.velocity.x = -150;

       

        player.animations.play('left');

       
    }
    else if (cursors.right.isDown)
    {
       
        player.body.velocity.x = 150;
          
       

        player.animations.play('right');
      
       
    }
    else
    {
        
        player.animations.stop();

      
        player.frame = 4;//第四幀
    }
    
    
    if (cursors.up.isDown && player.body.touching.down)
    {
        player.body.velocity.y = -250;//按上時候Y=-250，不容許小人在空中在此跳躍

    }

}

鍵盤控制單身狗，code

function collectStar (player,star,diamond){
  star.kill(); //觸碰星星後自動銷燬


score +=10;

scoreText.text = '星星的分:' +score ;

}
function collectDiam (player,diamond){
diamond.kill();
player.animations.add('left',[0,1,2,3],100,true);
	
player.animations.add('right',[5,6,7,8],100,true);
//若是單身狗吃到了鑽石，那麼小人將以每秒100幀的速度開始播放(快腿功能)
diam +=20;

diamText.text = '鑽石得分:' +diam;
 }

function  alert_enemy(player,enemy,enema,badd){
player.kill();

var wrap=document.getElementById('wrap');

wrap.style.display="block";

}

最後就是這樣，總結一下，phaser.js很是適合新手想要開發遊戲的(儘管國內的文檔還不完善，可是在國外這款引擎但是很是的牛)，這款遊戲算是我用這個引擎開發的第二個遊戲，感觸仍是蠻深的，下載的地址已經列出來了在上篇文章裏面，

 

今天有是代碼滿滿的一天 ^.^

有問題歡迎聯繫我m

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程