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

時間 2019-11-22

標籤 phaser.js phaser 開發星星遊戲欄目 JavaScript 简体版

原文原文鏈接

星星狗PS(我的興趣愛好，不是遊戲開發專業，不喜勿噴)，轉載請命名出處：http://my.oschina.net/8946a/blog/edit/738388 試玩下載地址：http://git.oschina.net/8946a/star_dog javascript

簡單介紹下寫的小玩意兒，遊戲世界有碰撞，剛體，摩擦，重力，阻力，速度，加速度，分數統計等，操做簡單，玩家控制單身狗鍵盤能夠上下左右控制，吃星星+10分，吃鑽石+20分，碰撞到敵人時候會死亡。就像這樣html

。。。。我是故意碰到敵人的，爲了給你們演示結果、java

當吃掉全部的星星與鑽石會這樣git

麻雀雖小，五臟俱全，今天就跟你們一塊兒聊聊這個遊戲是怎麼寫的canvas

具體怎麼搭建環境，我就不墨跡了。在上個博客「開發憤怒的小鳥裏面有提到」spa

直接上代碼.net

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>星星狗</title>
 <script src="js/phaser.min.js"></script>
  <script src="js/canvas.js"></script>
 </head>
<style>
*{margin:0px;padding:0px;}
/*.wrap{background:green;width:300px;height:200px; position:absolute; top:30%;left:15%}*/
#wrap{width:800px;
	height:800px;
	position:absolute;
	background:#000;
	filter:alpha(opacity=80);
	opacity:0.8;
	-moz-opacity:0.8;display:none;}
.main{width:300px;height:200px; margin:0px auto;background:#FFF;margin-top:25%;border-radius:5px;box-shadow:0 0 10px #FFF;}

.game_Over{font-size:36px;font-weight:bold;text-align:center;}
.star_Over,.diamond_Over{font-size:25px;text-align:center;padding-top:15px;}
.star_Over{color:#FFD851;}
.diamond_Over{color:#0071F7;}
#gameNext{font-size:20px;font-weight:bold;text-align:center;background:#000;color:#FFF;margin-top:17px;cursor:pointer;}
</style>
 <body>
  <div id="wrap">
  	<div class="main">
     <p class="game_Over">遊戲結束</p> 
     <p class="star_Over">星星得分:<span id="starScore"></span></p>
     <p class="diamond_Over">鑽石得分:<span id="diamondScore"></span></p>
     <p id="gameNext" onClick="ck();"></p>
    </div>
  </div>
 </body>
</html>

死亡或者通關時候觸發wrap的內容，下面請看JS代碼code

var game = new Phaser.Game(800, 800, Phaser.AUTO, '', { preload: preload, create: create, update: update }); //資源內容，建立遊戲，上傳分數，
//寬高，渲染類型，渲染參數

這個很明顯了再往下看，orm

function preload() {

    game.load.image('sky', 'assets/sky_1.jpg'); //加載遊戲背景圖
    game.load.image('ground', 'assets/platform.png'); //加載遊戲地面

    game.load.image('gd_full', 'assets/full.png');

    game.load.image('star', 'assets/star.png');//加載星星圖片
	  game.load.image('diamond','assets/diamond.png');//加載鑽石圖片
    game.load.spritesheet('baddie','assets/baddie.png',32,32);//敵人
    game.load.spritesheet('dude', 'assets/dude.png', 32, 48); //加載單身狗圖片
    game.load.image('firstaid','assets/firstaid.png',32,32);

}

所需加載資源，把咱們用到的東西都安排穩當~由於咱們的敵人還有單身狗是須要「發生動做」因此在這裏給了他們一個精靈參數。htm

var platforms; 地面
  var player; 單身狗
  var enemy_left; 敵人1
  var enema_left; 敵人2
  var enemy_right; 敵人3
  

  var cursors; 鍵盤事件

  var stars;   星星
  var diamonds; 鑽石

  var score = 0; 星星得分
  var diam = 0; 鑽石得分


  var scoreText; 得分面板
  var diamText;  鑽石得分面板

把咱們能用到的東西都定義出來、

今天又是代碼滿滿的一天

若有問題請聯繫我m ^.^