phaser入门
用到的属性
- text 文本对象 》 显示得分
- image 图片对象 》显示背景图
- spritesheet 精灵对象 》人物
- group 组对象 》生成星星和着落板
- physics 物理引擎 》设置重力、弹性等
代码部分
<!DOCTYPE html>
<head>
<meta charset="UTF-8" />
<title>TEST</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="phaser.min.js"></script>
</head>
<body>
</body>
<script>
var game = new Phaser.Game(800,600,Phaser.CANVAS,'',{
preload:preload,
create:create,
update:update,
});
function preload() {
//预加载资源
game.load.image('sky', 'assets/sky.png');
game.load.image('ground', 'assets/platform.png');
game.load.image('star', 'assets/star.png');
game.load.spritesheet('dude', 'assets/dude.png', 32, 48);
}
var platforms; //着落组
var player; //精灵对象
var cursors; //键盘监听
var starts; //星星组
var score = 0; //吃星星的次数
var titletext; //文本内容
var style = { //文字样式
fill:'#fff',
fontSize: '25px',
shadowFill:true,
shadowColor:'#000',
fontWeight:"normal"
}
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE); //开启物理引擎
game.add.sprite(0, 0, 'sky'); //添加sky资源；
//底部栏目
platforms = game.add.group(); //创建组
platforms.enableBody = true; //启用一个物理体
var ground = platforms.create(0, game.world.height - 64, 'ground'); //创建一个新的 Phaser.Sprite对象，并将其添加到这个组的顶部。
ground.scale.setTo(2, 2); //宽高*2；
ground.body.immovable = true; //设置此对象是不能移动的，不会因为碰撞而发生位置移动
//创建柱子
var ledge = platforms.create(400, 400, 'ground'); //柱子位置
ledge.body.immovable = true;
ledge = platforms.create(-150, 250, 'ground');
ledge.body.immovable = true;
//创建人物
player = game.add.sprite(30,100, 'dude'); //创建精灵对象
game.physics.arcade.enable(player);
player.body.bounce.y = 0.2; //弹性
player.body.gravity.y = 300; //重力
player.body.collideWorldBounds = true; //设置了它会与边界进行碰撞(限制在画布内)
//设置动画
player.animations.add('left',[0,1,2,3],10,true);
player.animations.add('right',[5,6,7,8],10,true);
//添加键盘监听
cursors = game.input.keyboard.createCursorKeys();
createStars();
//设置分数
titletext = this.game.add.text(10,10,'得分：'+ score*10,style);
}
function createStars(){
//创建星星组
stars = game.add.group();
stars.enableBody = true;
for (var i = 0; i < 12; i++){
var star = stars.create(i * 70, 10, 'star');
star.body.gravity.y = 300;
star.body.bounce.y = 0.4 + Math.random() * 0.2;
star.body.collideWorldBounds = true;
}
}
function update() {
game.physics.arcade.collide(player, platforms); //添加碰撞检测，检测小人与platforms组的碰撞
game.physics.arcade.collide(stars, platforms); //添加碰撞检测，检测星星与platforms组的碰撞
game.physics.arcade.overlap(player, stars, collectStar,null,this); //添加碰撞检测，检测人物与星星组的碰撞
//console.log('update');
player.body.velocity.x = 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;
}
//console.log(player.body.touching.down);
//小人在空中的时候，不允许跳跃
if (cursors.up.isDown && player.body.touching.down)
{
player.body.velocity.y = -350;
}
}
function collectStar(player,star){
// console.log(player,star);
star.kill();
score+=1;
titletext.text = "得分："+score*10;
console.log(score);
if(score == "12"){
console.log(111);
createStars();
score = 0;
}
// console.log(titletext)
// console.log(titletext._text);
// console.log(titletext.text);
}
</script>
</html>
效果
![实现计算器功能[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)