赞
踩
采用的物理引擎是Phaser.js
在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)
效果展示:
源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone)
1.创建游戏舞台
var config = {
type: Phaser.AUTO,
width: 800,
height: 400,
physics: {
default: 'arcade',
arcade: {
gravity: {
y: 300
},
debug: false
}
},
scene: {
preload: preload,
create: create,
update: update
}
};
var game = new Phaser.Game(config); // 创建游戏
2.载入资源
function preload() {
this.load.image('sky', 'assets/sky.png');
this.load.image('ground', 'assets/platform.png');
5 6 this.load.spritesheet('dude', 'assets/dude.png', {
frameWidth: 32,
frameHeight: 48
});
}
3.将资源创建到舞台上
var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敌人
var enemys; // 敌人们
var enemyTimer; // 敌人计时器
var distanceTimer; // 路程计时器
function create() {
// 添加画布背景
this.add.image(400, 200, 'sky');
// 添加分数文本
distanceText = this.add.text(16, 16, 'Distance: 0m', {
fontSize: '20px',
fill: '#000'
});
// 添加地面
platforms = this.physics.add.staticGroup();
platforms.create(400, 400, 'ground').setScale(3).refreshBody();
// 添加玩家(精灵)
player = this.physics.add.sprite(100, 300, 'dude');
player.setBounce(0); // 设置阻力
player.setCollideWorldBounds(true); // 禁止
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。