免費的 HTML5 遊戲代碼源
HTML5 技術使得在瀏覽器中運行多媒體內容變得更加容易。在瀏覽器中運行的遊戲可以提供豐富的視覺和交互體驗，並且無需安裝任何額外的軟件。
在本文中，我們將介紹一些免費的 HTML5 遊戲代碼源，這些代碼源可以幫助你開始創建自己的 HTML5 遊戲。
Phaser
Phaser 是一個流行的 HTML5 遊戲框架，它提供了豐富的功能和工具，用於創建 2D 遊戲。以下是一個使用 Phaser 創建的簡單示例：
<!DOCTYPE html>
<html>
<head>
<script src="phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
width: 800,
height: 600,
scene: {
preload: preload,
create: create
}
};
var game = new Phaser.Game(config);
function preload() {
this.load.image('logo', 'logo.png');
}
function create() {
var logo = this.add.image(400, 300, 'logo');
}
</script>
</body>
</html>
這個示例創建了一個包含一個圖片的簡單遊戲。它使用 Phaser 的 Game 對象創建了一個遊戲實例，並定義了一個場景(scene)。在 preload 函數中，圖片被加載到遊戲中，而在 create 函數中，圖片被放置在畫布的中心。
Babylon.js
Babylon.js 是一個強大的 HTML5 遊戲引擎，它專注於創建 3D 遊戲。以下是一個使用 Babylon.js 創建的簡單示例：
<!DOCTYPE html>
<html>
<head>
<script src="babylon.js"></script>
</head>
<body>
<script>
var canvas = document.querySelector('canvas');
var engine = new BABYLON.Engine(canvas, true);
function createScene() {
var scene = new BABYLON.Scene(engine);
var camera = new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 0, -10), scene);
var box = BABYLON.MeshBuilder.CreateBox('box', { size: 2 }, scene);
return scene;
}
var scene = createScene();
engine.runRenderLoop(function () {
scene.render();
});
</script>
<canvas></canvas>
</body>
</html>
這個示例創建了一個包含一個立方體的簡單 3D 遊戲。它使用 Babylon.js 的 Engine 對象創建了一個遊戲引擎實例，並定義了一個場景。在場景中，我們創建了一個自由相機(camera)和一個立方體。
CreateJS
CreateJS 是一個包含多個用於創建 HTML5 遊戲的庫的集合。其中一個重要的庫是 EaselJS，它提供了一個簡單的 API 用於創建 2D 遊戲。以下是一個使用 CreateJS 和 EaselJS 創建的簡單示例：
<!DOCTYPE html>
<html>
<head>
<script src="easeljs.js"></script>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
var stage = new createjs.Stage('canvas');
var circle = new createjs.Shape();
circle.graphics.beginFill('red').drawCircle(0, 0, 50);
circle.x = 100;
circle.y = 100;
stage.addChild(circle);
createjs.Ticker.addEventListener('tick', stage);
createjs.Ticker.timingMode = createjs.Ticker.RAF;
</script>
</body>
</html>
這個示例
