一.简介
在开始先简单介绍一下phaser吧,phaser是一个H5游戏框架,并且编写的游戏可以简便的移植到微信上,它的语法比较简单明了,目前最新的版本是Pharser 3,官方说明Pharser将实现3D游戏效果,但以目前的文档来看还未实现,所以可以先用Pharser 2编写一些游戏。
下面安利一下一个学习Phaser的网站:Phaser小站
二.代码
这个程序是官方的一个实例程序,素材可以从官网上下载,所以我们直接贴代码了:
<!doctype html>
<html>
<head>
<meta charset = "utf-8">
<title>Phaser游戏实例</title>
<!--引入phaser-->
<script src = "js/phaser.min.js" type = "text/javascript"></script>
</head>
<body>
<!--游戏代码-->
<script type = "text/javascript">
//创建游戏对象
var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', {
preload: preload,
create: create,
update: update
});
//加载资源的函数
function preload(){
//将星星加载到游戏引擎中
game.load.image('star', 'assets/star.png');
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
//加载一个动画,坐标是每一个的,记得运算
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
//组名
var stars;
var platforms;
var player;
var score = 0;
var scoreText;
//代表方向键的输入
var cursors;
//创建游戏资源的函数
function create(){
//打开物理引擎,phaser中内置了三种物理引擎,这是其中之一,这是开启游戏当中的物理引擎
game.physics.startSystem(Phaser.Physics.ARCADE);
game.add.sprite(0, 0, 'sky')
//左上角的位置为(0,0)
//创建一个组
platforms = game.add.group();
//给组开启物理引擎
platforms.enableBody = true;
//在组中创建一个对象
var ground2 = platforms.create(400, 400, 'ground');
ground2.body.immovable = true;
var ground3 = platforms.create(-150, 200, 'ground');
ground3.body.immovable = true;
//返回一个对象,game.world.height是这个世界的高度
ground1 = platforms.create(0, game.world.height-64, 'ground');
//scale是对对象进行缩放,横坐标、纵坐标分别缩放为两倍
ground1.scale.setTo(2, 2);
//开启地面的物理引擎
//game.physics.arcade.enable(ground1);
//将地面设置为不能移动
ground1.body.immovable = true;
player = game.add.sprite(32, game.world.height-150, 'dude');
//打开小人的物理引擎
game.physics.arcade.enable(player);
//enable之后对象就有body属性,通过gravity设置重力
player.body.gravity.y = 300;
//使小人不能掉出边界
player.body.collideWorldBounds = true;
//为小人添加动画,第一个参数为动画名,第二个参数是动画的帧数,第三个参数是每隔10秒播放一次,第四个参数是一直循环
player.animations.add('left', [0, 1, 2, 3], 10, true);
player.animations.add('right', [5, 6, 7, 8], 10, true);
//将方向键赋给cursors
cursors = game.input.keyboard.createCursorKeys();
stars = game.add.group();
stars.enableBody = true;
for(var i = 0; i < 12; i++){
var star = stars.create(i*70, 0, 'star');
star.body.gravity.y = 300;
//bounce设置星星的弹性系数
star.body.bounce.y = 0.7 + Math.random() * 0.2;
}
//创建文本,前两个参数为位置,第三个参数是文本内容,第四个参数是样式
scoreText = game.add.text(16, 16, 'score: 0', { fontSize: '32px', fill: '#000' });
}
//游戏循环的函数
function update(){
//小人和地面之间的碰撞检测
game.physics.arcade.collide(player, platforms);
game.physics.arcade.collide(stars, platforms);
//overlap也是碰撞检验,不过在碰撞时会调用一个函数
game.physics.arcade.overlap(player, stars, collectStars, null, this);
//如果左键按下,速度为150
if(cursors.left.isDown){
//velocity是速度的意思
player.body.velocity.x = -150;
player.play('left');
}else if(cursors.right.isDown){
player.body.velocity.x = 150;
player.play('right');
}else{
//让小人静止
player.body.velocity.x = 0;
//让小人在第四帧
player.frame = 4;
}
//当向上键按下且着地的时候才能起跳
if(cursors.up.isDown&& player.body.touching.down){
player.body.velocity.y = -350;
}
}
function collectStars(player, stars){
stars.kill();
score += 10;
scoreText.text = "score: " + score;
}
</script>
</body>
</html>
这个游戏主要完成了人物的动画移动、碰撞等
效果:
QQ:1224881150 欢迎交流~