快速建立一个Phaser游戏

时间 2019-11-22

标签快速建立一个 phaser 游戏栏目游戏繁體版

原文原文链接

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

Phaser是一个快速、免费、开源的游戏框架，它提供了快速2DCanvas和WebGL渲染，可用于制做桌面和移动浏览器的HTML5游戏。html

仅仅用了几十分钟，我就利用瓦片作出了一个基本的游戏，以下所示：（进入全屏游戏）java

使用左右方向键来控制人物左右运动，按上为跳跃。web

下面是源代码，已经注释的至关详细了，只有不到40行哦：json

<!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浏览器