轉載自: 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瀏覽器