快速建立一個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瀏覽器

相關文章
相關標籤/搜索