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 ^.^