快速创建一个Phaser游戏

2015/01/26 10:37
阅读数 404

转载自: 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>


转载自: http://phaser.cc/archives/421

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部