转载自： http://phaser.cc/archives/421
Phaser是一个快速、免费、开源的游戏框架，它提供了快速2DCanvas和WebGL渲染，可用于制作桌面和移动浏览器的HTML5游戏。
仅仅用了几十分钟，我就利用瓦片做出了一个基本的游戏，如下所示：（进入全屏游戏）
使用左右方向键来控制人物左右运动，按上为跳跃。
下面是源代码，已经注释的相当详细了，只有不到40行哦：
<!doctype html>
<html>
<head>
<script src="phaser.min.js"></script>
<style>
body{margin:0}
</style>
<script type="text/javascript">
window.onload = function() {
// 咱这里我们定义一个 640x480 的游戏，包括三个核心函数:
// onPreload 游戏预加载时执行
// onCreate 游戏创建的时候执行，只执行一次
// onUpdate 游戏每次被更新的时候调用
var game = new Phaser.Game(640,480,Phaser.AUTO,"",{preload:onPreload, create:onCreate, update:onUpdate});
// 一些变量
var map;
var tileset;
var layer;
var player;
var cursors;
// 预加载
function onPreload() {
// 导入 "level.json" 文件，关卡
game.load.tilemap("level", "level.json", null, Phaser.Tilemap.TILED_JSON);
// 关卡中使用的方块，使用tiles.png文件，指定了方块的大小 32x32。横向纵向都必须要有两个方块才会有碰撞效果
game.load.tileset("tiles", "tiles.png", 32, 32);
// 游戏里的人物，使用一张图片
game.load.image("hero", "hero.png");
}
// 游戏已经创建
function onCreate() {
// 添加瓦片地图
map = game.add.tilemap("level");
// 添加瓦片
tileset = game.add.tileset("tiles");
// 每一个瓦片都需要检测碰撞
tileset.setCollisionRange(0, tileset.total-1, true, true, true, true);
// 添加一个游戏层
layer = game.add.tilemapLayer(0, 0, 640, 480, tileset, map, 0);
// 添加一个人物，放置在 x=32, y=416
player = game.add.sprite(32, 416, "hero");
// 对人物施加重力效果
player.body.gravity.y = 8;
// 创建游戏控制最快速的方法是使用 "createCursorKeys" 函数，它会自动指定方向键来对应上下左右运动
cursors = game.input.keyboard.createCursorKeys();
}
// 更新
function onUpdate() {
// 检测人物与方块间的碰撞
game.physics.collide(player, layer);
// 设置任务的横向速度为0
player.body.velocity.x = 0;
// 向左移动
if (cursors.left.isDown){
player.body.velocity.x = -150;
}
// 向右移动
if (cursors.right.isDown){
player.body.velocity.x = 150;
}
// 跳跃
if (cursors.up.isDown && player.body.touching.down){
player.body.velocity.y = -250;
}
}
};
</script>
</head>
<body>
</body>
</html>
644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
