javascript實現貪吃蛇游戲

吃蛇是一款經典小游戲，玩家需要控制一條蛇來吃食物，每吃一個食物身體就會變長，同時游戲難度也會隨著時間增加。游戲結束的條件有兩種：蛇頭碰到墻壁或碰到自己的身體。現在我們將使用JavaScript從零開始實現這個游戲。

一、HTML布局

在開始編寫JavaScript代碼之前，我們需要先對HTML代碼進行布局。我們需要添加一個canvas元素，用于繪制貪吃蛇游戲畫面。以下是貪吃蛇游戲的HTML布局代碼：

<!DOCTYPE html>  
<html>  
<head>  
    <title>貪吃蛇游戲</title>  
</head>  
<body>  
    <canvas id="snakeCanvas" width="400" height="400"></canvas>  
</body>  
</html>

二、繪制貪吃蛇

接下來，我們需要寫JS代碼來繪制貪吃蛇。我們首先需要定義一個表示蛇的數組，數組中的每個元素都表示蛇的一個身體部分。我們還需要定義一個變量表示蛇的初始長度，以及一個變量表示蛇每個身體部分的大小。以下是繪制蛇的核心代碼：

var snakeArray;  
var snakeLength;  
var snakeSize;  
function initializeSnake() {  
    snakeArray=[];  
    snakeLength=5;  
    snakeSize=20;  
    for (var i=snakeLength - 1; i >=0; i--) {  
        snakeArray.push({x: i, y: 0});  
    }  
}  
function drawSnake() {  
    for (var i=0; i < snakeArray.length; i++) {  
        var snakePart=snakeArray[i];  
        context.fillStyle="#FFFFFF";  
        context.fillRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);  
        context.strokeStyle="#000000";  
        context.strokeRect(snakePart.x * snakeSize, snakePart.y * snakeSize, snakeSize, snakeSize);  
    }  
}

在 initializeSnake函數中，我們初始化了蛇的數組，將初始長度設為5，每個身體部分大小設為20，然后用循環向數組中添加每個身體部分的位置。在 drawSnake函數中，我們使用canvas繪制了由數組中每個身體部分組成的蛇。

三、繪制食物

接下來，我們需要寫JS代碼來繪制食物。我們需要定義一個表示食物的變量，并給其隨機生成一個位置。以下是繪制食物的代碼：

var food;  
function createFood() {  
    food={  
        x: Math.floor(Math.random() * (canvas.width / snakeSize)),  
        y: Math.floor(Math.random() * (canvas.height / snakeSize))  
    };  
    for (var i=0; i < snakeArray.length; i++) {  
        var snakePart=snakeArray[i];  
        if (food.x===snakePart.x && food.y===snakePart.y) {  
            createFood();  
            break;  
        }  
    }  
}  
function drawFood() {  
    context.fillStyle="#FF0000";  
    context.fillRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);  
    context.strokeStyle="#000000";  
    context.strokeRect(food.x * snakeSize, food.y * snakeSize, snakeSize, snakeSize);  
}

在 createFood函數中，我們隨機生成了一個食物位置。然后使用循環檢查該位置是否與蛇的身體部分重合，如果有，則重新生成一個位置，直到位置不與蛇的身體重合為止。在 drawFood函數中，我們使用canvas繪制出食物。

四、移動蛇

現在，我們需要編寫移動蛇的代碼。我們需要定義一個表示蛇當前方向的變量，以及一個表示蛇下一步將要移動到的位置的變量。每次移動時，我們需要更新蛇頭的位置，并將蛇尾部分刪除。以下是移動蛇的代碼：

var direction;  
function moveSnake() {  
    var snakeHeadX=snakeArray[0].x;  
    var snakeHeadY=snakeArray[0].y;  
    switch (direction) {  
        case "right":  
            snakeHeadX++;  
            break;  
        case "left":  
            snakeHeadX--;  
            break;  
        case "up":  
            snakeHeadY--;  
            break;  
        case "down":  
            snakeHeadY++;  
            break;  
    }  
    checkSnakeCollision(snakeHeadX, snakeHeadY);  
    var newHeadPrvtSite={x: snakeHeadX, y: snakeHeadY};  
    snakeArray.unshift(newHeadPrvtSite);  
    if (snakeHeadX===food.x && snakeHeadY===food.y) {  
        snakeLength++;  
        createFood();  
    } else {  
        snakeArray.pop();  
    }  
}  
function checkSnakeCollision(x, y) {  
    if (x < 0 || x >=canvas.width / snakeSize || y < 0 || y >=canvas.height / snakeSize) {  
        gameOver();  
    }  
    for (var i=1; i < snakeArray.length; i++) {  
        if (x===snakeArray[i].x && y===snakeArray[i].y) {  
            gameOver();  
            break;  
        }  
    }  
}

在 moveSnake函數中，我們首先獲取蛇頭部分的坐標，并根據當前方向更新蛇頭部分的坐標。然后檢查蛇頭是否與邊界或蛇身碰撞，并根據是否吃到食物更新數組。如果蛇吃到了食物，我們會將蛇的長度加1并重新生成食物。否則，我們會將蛇尾部分刪除。

五、游戲結束與重新開始

當蛇頭碰到墻壁或碰到自己的身體時游戲結束。我們需要編寫代碼來觸發游戲結束事件，并在游戲結束后向玩家展示得分。同時，我們還需要編寫代碼來重新開始游戲。以下是游戲結束與重新開始的代碼：

var interval;  
function startGame() {  
    initializeSnake();  
    createFood();  
    direction="right";  
    interval=setInterval(function () {  
        context.clearRect(0, 0, canvas.width, canvas.height);  
        drawSnake();  
        drawFood();  
        moveSnake();  
    }, 100);  
}  
function gameOver() {  
    clearInterval(interval);  
    context.fillStyle="#000000";  
    context.fillRect(0, 0, canvas.width, canvas.height);  
    context.font="30px Arial";  
    context.fillStyle="#FFFFFF";  
    context.fillText("游戲結束，得分為：" + (snakeLength - 5), 50, canvas.height / 2 - 15);  
}  
function restartGame() {  
    snakeArray=[];  
    createFood();  
    snakeLength=5;  
    direction="right";  
    startGame();  
}

在 startGame函數中，我們開始游戲，并在一定時間間隔內重復繪制蛇、食物，并移動蛇。在 gameOver函數中，我們停止游戲并清空畫布，并向玩家展示得分。在 restartGame函數中，我們重新初始化蛇、食物等變量，并重新開始游戲。

六、最終實現結果

將上述代碼添加到HTML文件中后，就可以在瀏覽器中運行了。玩家可以使用鍵盤上的方向鍵來控制蛇的移動方向，如果蛇的頭部碰到了墻壁或自身，游戲就會結束。同時，吃到食物后蛇的長度會加1，游戲難度也會隨著時間增加。玩家也可以重新開始游戲。

七、總結

通過這篇文章，我們學習了如何使用JavaScript從零實現一個貪吃蛇游戲。我們通過HTML、CSS和JavaScript來實現游戲的布局、繪制、移動、重新開始等功能，同時在這個過程中學習了如何使用canvas進行繪圖和如何處理鍵盤事件。希望本文能夠對大家學習JavaScript游戲開發有所幫助。

人人為我，我為人人，歡迎您的瀏覽，我們一起加油吧。

　你知道你最喜歡的網絡游戲是用哪種編程語言開發的嗎?很多人會馬上想到HTML5和C++，他們其實是對的。這些是最常見的選項。但是JavaScript呢?想要對JavaScript有更深入的了解和認識，

　　JS被認為是現代世界中最流行和最著名的編程語言。它的流行是由許多原因造成的，包括用戶友好的代碼和多功能性。的確，在開發網絡游戲時，JavaScript也可以是一個極好的幫手。它的腳本可以輕松地將JS代碼與HTML5和CSS結合起來，從而創建優秀的跨平臺應用程序。

　　是否可以使用 JavaScript 創建合適的在線游戲?

　　當然，這是可能的。有許多使用純 JavaScript 或其框架創建的 2D 甚至 3D 游戲。你可以找到大量的庫和框架，它們都是用 JS 編寫的，但都是針對 HTML5 游戲開發的，例如 Feather。用 JS 制作的游戲并不總是原生的，但這并不會使它們變得更糟。

　　在 JavaScript 上創建游戲不僅可行而且簡單。事實上，你甚至不必使用 Node.js 或操心項目的服務器端。你所需要的只是 JavaScript 和 CSS 的基本知識。盡管如此，所需的知識量仍取決于你的游戲的復雜程度。顯然，你將需要更多的技能來創建大型 RPG。同時，你需要基本的知識來開發一個簡單的平臺游戲。

　　在網絡上，有許多旨在幫助你完成第一個在線游戲的分步教程。確定你要開發的游戲并繼續下一步 - 選擇庫和引擎。我們在下面列出了其中最好的。

　　構建網頁游戲的最佳JavaScript引擎

　　PhaserJS

　　Phaser是開發人員在創建在線游戲時最受歡迎的選擇之一。它的數據庫是開源的，一個大型的開發者社區將會在那里幫助你掌握所有的過程，并找到許多問題的答案。Phaser使用內置的JavaScript庫—PixieJS，這允許WebGL和Canvas元素之間的無縫交互。

　　這個框架非常適合初學者，因為它處理了大部分的游戲自動化過程。因此，你不需要為游戲的每個元素寫很長的代碼。對象的物理特性也可以通過使用特殊的外部庫來實現。最終，你的游戲會產生一種非常專業的感覺，這要歸功于對象逼真的運動和行為。

　　事實上，使用Phaser和來自GitHub的現成代碼，你將在幾個小時的工作后推出你的第一個游戲。

　　BabylonJS

　　這是用于創建3D瀏覽器游戲最好的框架之一，它允許你渲染不同復雜程度的物體，你甚至不需要寫很多代碼。使用常規的WebGL創建3D對象會花費大量的時間和代碼。BabylonJS自己處理所有的復雜性，所以只需要你做最少的工作。

　　BabylonJS的更多功能是硬件縮放、粒子系統、平滑、自動場景優化，以及使用9種帶有自定義材質和著色器的相機的能力。聽起來不錯，不是嗎?

　　MelonJS

　　這是一個輕量級的開源框架，具有許多特殊功能。首先，這是一款以“一次編寫，隨處發布”的原則創建游戲的“無插件”工具。該框架沒有前兩個框架那么大的社區，但喜歡 Melon 的開發人員是它的忠實粉絲。

　　讓我們列出該框架的一些功能：

　　l 輕量級 2D 引擎;

　　l 一個簡單的 HTML5 庫;

　　l 兼容所有流行的瀏覽器：Chrome、Mozilla、Opera、Safari、Internet Explorer;

　　l 與移動設備的兼容性;

　　l 對計算機 CPU 要求低的輕量級物理;

　　l 內置對 CocoonJS 和 Ejecta 的支持;

　　簡而言之，如果你的任務是創建一個具有最小計算負載的簡單輕量級 2D 瀏覽器游戲，那么 MelonJS 是一個理想的選擇。

　　總結

　　可以肯定地說，網絡游戲使用的是JavaScript。雖然它現在不是很受歡迎，但是它的社區和便利性預示著基于JS的在線游戲的光明未來。現在主要是平臺游戲和謎題，重點是游戲的智力組件上，而不是圖形或其他方面。

薦：使用NSDT 編輯器助你快速搭建3D應用場景

事實是，自從引入JavaScript WebGL API以來，現代瀏覽器具有直觀的功能，使它們能夠渲染更復雜和復雜的2D和3D圖形，而無需依賴第三方插件。

你可以用純粹的JavaScript開始你的網頁游戲開發之旅，如果你是初學者，這可能是最好的學習方式。但是，當有這么多被廣泛采用的游戲引擎可供選擇時，為什么要重新發明輪子呢？

本指南將探索排名前六位的 JS/HTML5 游戲引擎，按 GitHub 星級的數量排名，并引導您了解如何使用它們。

我們將介紹：

Three.js
Pixi.js
Phaser
Babylon.js
Matter.js
PlayCanvas

1. Three.js

Three.js 是最受歡迎的 JavaScript 庫之一，用于使用 WebGL 在 Web 瀏覽器中創建和動畫 3D 計算機圖形。它也是為網絡瀏覽器創建 3D 游戲的絕佳工具。

由于 Three.js 基于 JavaScript，因此在 3D 對象和用戶界面（如鍵盤和鼠標）之間添加任何交互性相對容易。這使得該庫非常適合在網絡上制作 3D 游戲。

優點

易于學習：Three.js最重要的優點——除了它能夠很好地執行復雜的渲染——是它很容易上手。
大量示例：由于其受歡迎程度，有無數示例可以幫助您入門。以下是一些示例項目，展示了 Three.js 的可能性：

大型社區：Three.js在GitHub上有87.1k星和33.4k分叉。它擁有大量用戶和龐大的開發人員社區，他們使用并為庫創建各種第三方工具和擴展
良好的文檔：強大的文檔通常是強大庫的重要指標，而 Three.js 擁有出色的文檔
出色的性能：Three.js 比我使用過的其他庫具有性能優勢
PBR渲染：Three.js內置了基于物理的渲染（PBR），使渲染圖形更準確

缺點

沒有渲染管線：這使得許多現代渲染技術無法/不可能用 Three 實現.js
不是游戲引擎：盡管 Three.js 擁有創建游戲的基本功能，但它不是像 PlayCanvas 和 Unity 那樣提供交互性和渲染之外功能的游戲引擎。但是，可以構建 Three.js' API 來創建游戲引擎;這方面的一個例子是流氓引擎
面向新手：由于API迎合新手，因此隱藏了許多高級功能
缺乏支持：沒有對空間索引、精確光線投射或視錐剔除的內置支持，并且在復雜場景中碰撞檢測效率低下

三.js在行動

如果您想深入研究在網絡上創建簡單或復雜的 3D 對象，Three.js 是首選庫。它的主要優勢包括龐大的人才用戶社區以及豐富的示例和資源。

Three.js是我合作的第一個3D動畫庫，我會推薦給任何剛開始游戲開發的人。

讓我們創建一個簡單的旋轉幾何體來演示 Three.js 可以做什么：

import * as THREE from 'js/three.module.js';

var camera, scene, renderer;
var geometry, material, mesh;

animate();

創建一個函數來設置使用 Three 運行演示動畫所需的一切.js：init

function init() {
const camera=new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, .01, 20 );
camera.position.z=1;

const scene=new THREE.Scene();

const geometry=new THREE.BoxGeometry( 0.5, 0.5, 0.5 );
const material=new THREE.MeshNormalMaterial();

const mesh=new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer=new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
}

接下來，創建一個函數，以使用所需的運動類型對對象進行動畫處理：animate

function animate() { init(); requestAnimationFrame( animate ); mesh.rotation.x +=.01; mesh.rotation.y +=.02; renderer.render( scene, camera );}

最終結果應如下所示：

2.Pixi.js

如果您正在尋找一個JS庫來創建支持跨平臺應用程序的豐富交互式2D圖形，那么Pixi.js就是您的最佳選擇。這個HTML5創建引擎使你能夠在沒有WebGL API知識的情況下開發動畫和游戲。

優點

快速性能：就像三.js，小精靈.js非常快
大型社區：Pixi.js 在 GitHub 上擁有 38.2k 顆星和 4.7k 個分支，擁有龐大的用戶/開發人員社區
多平臺支持：也像Three.js，Pixi.js支持多個平臺，如Web和本機系統，如Android，iOS，Windows和mac
簡單的API：API對于初學者來說很容易理解
支持 WebGL 和 Canvas 回退：Pixi.js 使用 WebGL 渲染器，但也支持 Canvas 回退

缺點

過于復雜：根據我的經驗，Three.js比Pixi更容易上手.js
不是一個完整的解決方案：Pixi.js自豪地只支持渲染器

Pixi.js在行動

在大多數情況下，Pixi 是一個不錯的選擇，尤其是在創建面向性能的 3D 交互式圖形并考慮設備兼容性時。Pixi在WebGL失敗的情況下對Canvas回退的支持是一個特別誘人的功能。

讓我們構建一個簡單的演示來了解 Pixi.js 的實際應用。使用以下命令或 CDN 將 Pixi.js 添加到項目中：

npm install pixi.js

或 CDN：

創建腳本文件并添加以下代碼：

import * as PIXI from 'pixi.js';

const app=new PIXI.Application();
document.body.appendChild(app.view);

app.loader.add('jumper', 'jumper.png').load((loader, resources)=> {
const bunny=new PIXI.Sprite(resources.bunny.texture);
bunny.x=app.renderer.width / 2;
bunny.y=app.renderer.height / 2;

bunny.anchor.x=.5;
bunny.anchor.y=.5;

app.stage.addChild(bunny);

app.ticker.add(()=> {
    bunny.rotation +=.01;
});

});

結果應如下所示：

3. Phaser

Phaser 是一個跨平臺的游戲引擎，使您能夠創建基于 JavaScript 和 HTML5 的游戲，并為許多平臺進行編譯。例如，您可能決定使用第三方工具將游戲編譯為 iOS、Android 和其他本機應用程序。

優點

結構合理：眾所周知，移相器具有精心設計的結構
TypeScript 支持：該庫支持使用 TypeScript 進行游戲開發
專注于游戲開發：Phaser主要是一個游戲開發引擎——而且是一個很好的引擎。
大型社區：雖然沒有前兩個庫那么大，但 Phaser 在 GitHub 上擁有 33.2k 星和 6.9k 分叉的龐大社區
插件很多：Phaser支持大量的插件。這包括相位器-物質-碰撞、導航網格、移相器輸入和光滑的 ui 插件，僅舉幾例
WebGL和Canvas支持：Phaser支持WebGL，并啟用了Canvas作為后備

缺點

構建大小：桌面版 Phaser 的構建大小非常龐大
對移動開發的支持不佳：創建本機移動應用程序需要使用Cordova或其他第三方框架
狀態管理：開始使用 Phaser 的狀態管理器可能有些困難

移相器在行動

Phaser 非常適合開發跨平臺游戲應用程序。它支持廣泛的插件，并且使用Phaser構建游戲的大型開發人員社區使開始使用該框架變得容易。

讓我們使用 Phaser 構建一個基本應用程序。首先，將 Phaser 安裝為 Node 模塊或通過 CDN：

npm install phaser

或：

接下來，將一些默認配置傳遞給您的 Phaser 引擎：

const config={
type: Phaser.AUTO,
width: 800,
height: 600,
physics: {
default: "arcade",
arcade: {
gravity: { y: 200 },
},
},
scene: {
preload: preload,
create: create,
},
};

const game=new Phaser.Game(config);

創建一個預加載函數以加載默認靜態文件：

function preload() {
this.load.setBaseURL("https://labs.phaser.io");
this.load.image("sky", "assets/skies/space3.png");
this.load.image("plane", "assets/sprites/ww2plane.png");
this.load.image("green", "assets/particles/green.png");
this.load.image("astroid", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid2", "assets/games/asteroids/asteroid1.png");
this.load.image("astroid3", "assets/games/asteroids/asteroid1.png");
}

最后，定義一個函數來顯示新創建的游戲：create

function create() {
this.add.image(400, 300, "sky");
this.add.image(700, 300, "astroid");
this.add.image(100, 200, "astroid2");
this.add.image(400, 40, "astroid3");

const particles=this.add.particles("green");

const emitter=particles.createEmitter({
speed: 100,
scale: { start: 1, end: 0 },
blendMode: "ADD",
});

const plane=this.physics.add.image(400, 100, "plane");
plane.setVelocity(100, 200);
plane.setBounce(1, 1);
plane.setCollideWorldBounds(true);
emitter.startFollow(plane);
}

4.Babylon.js

Babylon.js是一個強大，簡單，開放的游戲和渲染引擎，打包在一個友好的JavaScript框架中。

優點

Playground：Babylon提供了一個Playground工具，用于在進入全面開發之前進行測試 - 并且它有很好的文檔可以啟動。
強大的社區支持：Babylon有一個論壇，里面有一個活躍的開發人員和用戶的大型社區，他們非常有幫助。該框架在GitHub上有18.9k星和3k分叉
最新的代碼庫：該框架享有經常更新的代碼庫和活躍的第三方工具開發。官方回購文件最近于11/26/22更新
PBR 渲染：對 PBR 渲染支持非常出色
信任投票：Babylon被Adobe，Microsoft等大品牌使用和支持
維護：錯誤通常會很快得到解決

缺點

缺乏成熟度：巴比倫于2013年首次發布，與許多競爭對手相比，它相當年輕
文檔：引擎缺少 API 文檔
不適合小型項目

Babylon.js在行動

許多大品牌都信任巴比倫.js作為他們選擇的游戲開發引擎。Babylon Playground 是一個蓬勃發展的代碼示例中心，是幫助您開始使用框架的絕佳工具。

巴比倫及其模塊發布在npm上。若要安裝它，請在命令行工具中運行以下命令：

npm install babylonjs --save

或者，您可以通過 CDN 將庫集成到項目中。為此，請創建一個文件并添加以下代碼：index.html

安裝后，您可以通過導入全局對象或解構場景和引擎方法來開始使用庫，如下所示：

import * as BABYLON from 'babylonjs'

// OR

import { Scene, Engine } from 'babylonjs'

接下來，創建一個文件并包含以下代碼：script.js

const { createScene }=require('scene.js')

創建一個文件并添加以下代碼：scene.js

export function(){
const scene=new BABYLON.Scene(engine);
const camera=new BABYLON.FreeCamera('camera', new BABYLON.Vector3(0, 5,-10), scene);
camera.setTarget(BABYLON.Vector3.Zero());
camera.attachControl(canvas, false);
const light=new BABYLON.HemisphericLight('light', new BABYLON.Vector3(0,1,0), scene);
const sphere=BABYLON.Mesh.CreateSphere('sphere', 16, 2, scene);
sphere.position.y=1;
const ground=BABYLON.Mesh.CreateGround('ground', 6, 6, 2, scene);
return scene;
}

以下是動畫外觀的預覽：

5.Matter.js

Matter.js是一個用于Web的JavaScript 2D剛體物理引擎。即使它是一個JavaScript物理引擎，你也可以將它與各種包和插件結合起來，創建有趣的網頁游戲。

優點

令人興奮的功能：Matter.js提供了許多功能，例如剛性、復合體和復合材料體、穩定的堆疊和靜止、運動守恒等等

缺點

無CCD：Matter.js缺乏連續碰撞檢測（CCD）會導致快速移動的物體穿過其他物體的問題

物質.js在行動

Matter.js 本質上是創建簡單、移動的動畫對象的最佳庫。Matter.js是一個物理庫，更關注2D對象。但是，您可以將其與第三方解決方案結合使用以創建動態游戲。

要開始使用 Matter.js在原版項目中，請下載 or matter。最小值.js從官方 GitHub 存儲庫打包文件，并使用以下代碼將其添加到 HTML 文件中：matter.js

但是，如果您使用的是捆綁器，例如 Parcel，則可以通過以下命令將軟件包安裝為 Node 模塊：npmyarn

npm install matter-js
//OR
yarn add matter-js

以下是使用內置渲染器和運行器入門的最小示例：

// module aliases
const Engine=Matter.Engine;
const Render=Matter.Render;
const World=Matter.World;
const Bodies=Matter.Bodies;

// create an engine
const engine=Engine.create();

// instantiating the renderer
const render=Render.create({
element: document.body,
engine: engine,
options: {
wireframes: false,
showAngleIndicator: false,
background: "white",
},
});

// create two boxes and a ground
const boxA=Bodies.rectangle(300, 300, 70, 70);
const boxB=Bodies.rectangle(400, 10, 60, 60);
const ground=Bodies.rectangle(300, 510, 910, 10, { isStatic: true });

// add all bodies to the world
World.add(engine.world, [boxA, boxB, ground]);

// run the engine
Matter.Runner.run(engine);

// run the renderer
Render.run(render);

你應該看到兩個矩形物體掉落，然后在它們落在地面上時相互撞擊。如果沒有，請檢查瀏覽器控制臺以查看是否有任何錯誤：

6.PlayCanvas

PlayCanvas使用HTML5和WebGL在任何移動或桌面瀏覽器中運行游戲和其他交互式3D內容。雖然它是免費和開源的，但PlayCanvas更關注游戲引擎而不是渲染引擎。因此，它更適合創建
使用WebGL和HTML3 Canvas的5D游戲。

優點

游戲引擎：與其他引擎不同，PlayCanvas 是一個游戲引擎，具有您在庫或框架中找不到的功能
開源：PlayCanvas是一個開源工具，用于強大的游戲開發
移動優化：游戲開發平臺移動優先
零編譯時間：引擎的零編譯時間自然使過程更快
資產管道：PlayCanvas 使用最佳做法來決定內容的交付方式和形式
集成物理引擎：您可以使用強大的子彈物理引擎彈藥輕松地將物理集成到游戲中.js
熱重載：您不必每次進行更改時都重新加載瀏覽器
僅在瀏覽器上運行的渲染引擎：PlayCanvas具有僅在瀏覽器上運行的高級WebGL功能

缺點

付費專用項目：免費層不支持私有項目，因此所有代碼和資源都公開托管
碰撞偏移：沒有碰撞偏移
缺乏示例：PlayCanvas 的教程很少而且相距甚遠

PlayCanvas 在行動

PlayCanvas非常適合創建小型公共項目或學校項目 - 至少，這是我使用它的目的。如果您需要更多功能和對游戲開發的更多控制，您可能需要考慮訂閱高級功能。

現在，讓我們使用引擎進行一些基本的渲染。第一步，從 GitHub 存儲庫下載包文件，并使用以下代碼將其添加到項目中：

接下來，使用以下代碼創建一個文件并將其鏈接到 HTML 文件：script.js

現在，打開該文件并添加以下代碼以實例化新的 PlayCanvas 應用程序：script.js

const canvas=document.getElementById('canvas');
const app=new pc.Application(canvas);

window.addEventListener('resize', ()=> app.resizeCanvas());

const box=new pc.Entity('cube');
box.addComponent('model', {
type: 'box'
});
app.root.addChild(box);

要為對象創建相機和光源，請添加以下代碼：

const camera=new pc.Entity('camera');
camera.addComponent('camera', {
clearColor: new pc.Color(.1, .1, .1)
});
app.root.addChild(camera);
camera.setPosition(0, 0, 3);

const light=new pc.Entity('light');
light.addComponent('light');
app.root.addChild(light);
light.setEulerAngles(46, 0, 0);

app.on('update', dt=> box.rotate(10 * dt, 20 * dt, 30 * dt));

app.start();

上面的代碼應產生以下結果：

結語

通過分解與上面列出的每個 JS/HTML5 游戲引擎相關的優缺點和用例，我希望您能深入了解哪一個最適合您想要創建的游戲或動畫類型。

在大多數情況下，我建議使用 Three.js，特別是如果您正在尋找更多的渲染引擎而不是游戲引擎。由于它在開發人員生態系統中的受歡迎程度，很容易找到充足的資源來幫助您啟動和運行。

如果你更關注游戲開發，我會推薦巴比倫.js因為它很簡單。Babylon還具有更新的代碼庫和活躍的第三方開發，游樂場功能是一個很好的測試工具。PlayCanvas是一個可靠的備份選項 - 它主要是一個游戲引擎，您可以使用它來構建復雜的3D游戲。

您在游戲開發項目中使用什么游戲引擎？請在評論中告訴我們！

LogRocket：通過理解上下文更輕松地調試JavaScript錯誤

調試代碼始終是一項繁瑣的任務。但是，您越了解錯誤，就越容易修復它們。

LogRocket 允許您以新穎獨特的方式理解這些錯誤。我們的前端監控解決方案跟蹤用戶與 JavaScript 前端的互動情況，使您能夠準確了解用戶導致錯誤的行為。

LogRocket 記錄控制臺日志、頁面加載時間、堆棧跟蹤、帶有標頭 + 正文的慢速網絡請求/響應、瀏覽器元數據和自定義日志。了解 JavaScript 代碼的影響從未如此簡單！

原文鏈接：推薦前 6 名 JavaScript 和 HTML5 游戲引擎

在線咨詢

上一篇：外媒：“霉霉”維也納演唱會因安全原因取消，兩人涉嫌策
下一篇：CSS 水平居中方式三

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商