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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。