javascript實(shí)現(xiàn)貪吃蛇游戲

吃蛇是一款經(jīng)典小游戲，玩家需要控制一條蛇來(lái)吃食物，每吃一個(gè)食物身體就會(huì)變長(zhǎng)，同時(shí)游戲難度也會(huì)隨著時(shí)間增加。游戲結(jié)束的條件有兩種：蛇頭碰到墻壁或碰到自己的身體。現(xiàn)在我們將使用JavaScript從零開(kāi)始實(shí)現(xiàn)這個(gè)游戲。

一、HTML布局

在開(kāi)始編寫(xiě)JavaScript代碼之前，我們需要先對(duì)HTML代碼進(jìn)行布局。我們需要添加一個(gè)canvas元素，用于繪制貪吃蛇游戲畫(huà)面。以下是貪吃蛇游戲的HTML布局代碼：

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

二、繪制貪吃蛇

接下來(lái)，我們需要寫(xiě)JS代碼來(lái)繪制貪吃蛇。我們首先需要定義一個(gè)表示蛇的數(shù)組，數(shù)組中的每個(gè)元素都表示蛇的一個(gè)身體部分。我們還需要定義一個(gè)變量表示蛇的初始長(zhǎng)度，以及一個(gè)變量表示蛇每個(gè)身體部分的大小。以下是繪制蛇的核心代碼：

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函數(shù) 中，我們初始化了蛇的數(shù)組，將初始長(zhǎng)度設(shè)為5，每個(gè)身體部分大小設(shè)為20，然后用循環(huán)向數(shù)組中添加每個(gè)身體部分的位置。在 drawSnake函數(shù) 中，我們使用canvas繪制了由數(shù)組中每個(gè)身體部分組成的蛇。

三、繪制食物

接下來(lái)，我們需要寫(xiě)JS代碼來(lái)繪制食物。我們需要定義一個(gè)表示食物的變量，并給其隨機(jī)生成一個(gè)位置。以下是繪制食物的代碼：

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函數(shù) 中，我們隨機(jī)生成了一個(gè)食物位置。然后使用循環(huán)檢查該位置是否與蛇的身體部分重合，如果有，則重新生成一個(gè)位置，直到位置不與蛇的身體重合為止。在 drawFood函數(shù) 中，我們使用canvas繪制出食物。

四、移動(dòng)蛇

現(xiàn)在，我們需要編寫(xiě)移動(dòng)蛇的代碼。我們需要定義一個(gè)表示蛇當(dāng)前方向的變量，以及一個(gè)表示蛇下一步將要移動(dòng)到的位置的變量。每次移動(dòng)時(shí)，我們需要更新蛇頭的位置，并將蛇尾部分刪除。以下是移動(dòng)蛇的代碼：

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函數(shù) 中，我們首先獲取蛇頭部分的坐標(biāo)，并根據(jù)當(dāng)前方向更新蛇頭部分的坐標(biāo)。然后檢查蛇頭是否與邊界或蛇身碰撞，并根據(jù)是否吃到食物更新數(shù)組。如果蛇吃到了食物，我們會(huì)將蛇的長(zhǎng)度加1并重新生成食物。否則，我們會(huì)將蛇尾部分刪除。

五、游戲結(jié)束與重新開(kāi)始

當(dāng)蛇頭碰到墻壁或碰到自己的身體時(shí)游戲結(jié)束。我們需要編寫(xiě)代碼來(lái)觸發(fā)游戲結(jié)束事件，并在游戲結(jié)束后向玩家展示得分。同時(shí)，我們還需要編寫(xiě)代碼來(lái)重新開(kāi)始游戲。以下是游戲結(jié)束與重新開(kāi)始的代碼：

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("游戲結(jié)束，得分為：" + (snakeLength - 5), 50, canvas.height / 2 - 15);  
}  
function restartGame() {  
    snakeArray=[];  
    createFood();  
    snakeLength=5;  
    direction="right";  
    startGame();  
}

在 startGame函數(shù) 中，我們開(kāi)始游戲，并在一定時(shí)間間隔內(nèi)重復(fù)繪制蛇、食物，并移動(dòng)蛇。在 gameOver函數(shù) 中，我們停止游戲并清空畫(huà)布，并向玩家展示得分。在 restartGame函數(shù) 中，我們重新初始化蛇、食物等變量，并重新開(kāi)始游戲。

六、最終實(shí)現(xiàn)結(jié)果

將上述代碼添加到HTML文件中后，就可以在瀏覽器中運(yùn)行了。玩家可以使用鍵盤(pán)上的方向鍵來(lái)控制蛇的移動(dòng)方向，如果蛇的頭部碰到了墻壁或自身，游戲就會(huì)結(jié)束。同時(shí)，吃到食物后蛇的長(zhǎng)度會(huì)加1，游戲難度也會(huì)隨著時(shí)間增加。玩家也可以重新開(kāi)始游戲。

七、總結(jié)

通過(guò)這篇文章，我們學(xué)習(xí)了如何使用JavaScript從零實(shí)現(xiàn)一個(gè)貪吃蛇游戲。我們通過(guò)HTML、CSS和JavaScript來(lái)實(shí)現(xiàn)游戲的布局、繪制、移動(dòng)、重新開(kāi)始等功能，同時(shí)在這個(gè)過(guò)程中學(xué)習(xí)了如何使用canvas進(jìn)行繪圖和如何處理鍵盤(pán)事件。希望本文能夠?qū)Υ蠹覍W(xué)習(xí)JavaScript游戲開(kāi)發(fā)有所幫助。

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

　你知道你最喜歡的網(wǎng)絡(luò)游戲是用哪種編程語(yǔ)言開(kāi)發(fā)的嗎?很多人會(huì)馬上想到HTML5和C++，他們其實(shí)是對(duì)的。這些是最常見(jiàn)的選項(xiàng)。但是JavaScript呢?想要對(duì)JavaScript有更深入的了解和認(rèn)識(shí)，

　　JS被認(rèn)為是現(xiàn)代世界中最流行和最著名的編程語(yǔ)言。它的流行是由許多原因造成的，包括用戶友好的代碼和多功能性。的確，在開(kāi)發(fā)網(wǎng)絡(luò)游戲時(shí)，JavaScript也可以是一個(gè)極好的幫手。它的腳本可以輕松地將JS代碼與HTML5和CSS結(jié)合起來(lái)，從而創(chuàng)建優(yōu)秀的跨平臺(tái)應(yīng)用程序。

　　是否可以使用 JavaScript 創(chuàng)建合適的在線游戲?

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

　　在 JavaScript 上創(chuàng)建游戲不僅可行而且簡(jiǎn)單。事實(shí)上，你甚至不必使用 Node.js 或操心項(xiàng)目的服務(wù)器端。你所需要的只是 JavaScript 和 CSS 的基本知識(shí)。盡管如此，所需的知識(shí)量仍取決于你的游戲的復(fù)雜程度。顯然，你將需要更多的技能來(lái)創(chuàng)建大型 RPG。同時(shí)，你需要基本的知識(shí)來(lái)開(kāi)發(fā)一個(gè)簡(jiǎn)單的平臺(tái)游戲。

　　在網(wǎng)絡(luò)上，有許多旨在幫助你完成第一個(gè)在線游戲的分步教程。確定你要開(kāi)發(fā)的游戲并繼續(xù)下一步 - 選擇庫(kù)和引擎。我們?cè)谙旅媪谐隽似渲凶詈玫摹?/span>

　　構(gòu)建網(wǎng)頁(yè)游戲的最佳JavaScript引擎

　　PhaserJS

　　Phaser是開(kāi)發(fā)人員在創(chuàng)建在線游戲時(shí)最受歡迎的選擇之一。它的數(shù)據(jù)庫(kù)是開(kāi)源的，一個(gè)大型的開(kāi)發(fā)者社區(qū)將會(huì)在那里幫助你掌握所有的過(guò)程，并找到許多問(wèn)題的答案。Phaser使用內(nèi)置的JavaScript庫(kù)—PixieJS，這允許WebGL和Canvas元素之間的無(wú)縫交互。

　　這個(gè)框架非常適合初學(xué)者，因?yàn)樗幚砹舜蟛糠值挠螒蜃詣?dòng)化過(guò)程。因此，你不需要為游戲的每個(gè)元素寫(xiě)很長(zhǎng)的代碼。對(duì)象的物理特性也可以通過(guò)使用特殊的外部庫(kù)來(lái)實(shí)現(xiàn)。最終，你的游戲會(huì)產(chǎn)生一種非常專業(yè)的感覺(jué)，這要?dú)w功于對(duì)象逼真的運(yùn)動(dòng)和行為。

　　事實(shí)上，使用Phaser和來(lái)自GitHub的現(xiàn)成代碼，你將在幾個(gè)小時(shí)的工作后推出你的第一個(gè)游戲。

　　BabylonJS

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

　　BabylonJS的更多功能是硬件縮放、粒子系統(tǒng)、平滑、自動(dòng)場(chǎng)景優(yōu)化，以及使用9種帶有自定義材質(zhì)和著色器的相機(jī)的能力。聽(tīng)起來(lái)不錯(cuò)，不是嗎?

　　MelonJS

　　這是一個(gè)輕量級(jí)的開(kāi)源框架，具有許多特殊功能。首先，這是一款以“一次編寫(xiě)，隨處發(fā)布”的原則創(chuàng)建游戲的“無(wú)插件”工具。該框架沒(méi)有前兩個(gè)框架那么大的社區(qū)，但喜歡 Melon 的開(kāi)發(fā)人員是它的忠實(shí)粉絲。

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

　　l 輕量級(jí) 2D 引擎;

　　l 一個(gè)簡(jiǎn)單的 HTML5 庫(kù);

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

　　l 與移動(dòng)設(shè)備的兼容性;

　　l 對(duì)計(jì)算機(jī) CPU 要求低的輕量級(jí)物理;

　　l 內(nèi)置對(duì) CocoonJS 和 Ejecta 的支持;

　　簡(jiǎn)而言之，如果你的任務(wù)是創(chuàng)建一個(gè)具有最小計(jì)算負(fù)載的簡(jiǎn)單輕量級(jí) 2D 瀏覽器游戲，那么 MelonJS 是一個(gè)理想的選擇。

　　總結(jié)

　　可以肯定地說(shuō)，網(wǎng)絡(luò)游戲使用的是JavaScript。雖然它現(xiàn)在不是很受歡迎，但是它的社區(qū)和便利性預(yù)示著基于JS的在線游戲的光明未來(lái)。現(xiàn)在主要是平臺(tái)游戲和謎題，重點(diǎn)是游戲的智力組件上，而不是圖形或其他方面。

薦：使用NSDT 編輯器助你快速搭建3D應(yīng)用場(chǎng)景

事實(shí)是，自從引入JavaScript WebGL API以來(lái)，現(xiàn)代瀏覽器具有直觀的功能，使它們能夠渲染更復(fù)雜和復(fù)雜的2D和3D圖形，而無(wú)需依賴第三方插件。

你可以用純粹的JavaScript開(kāi)始你的網(wǎng)頁(yè)游戲開(kāi)發(fā)之旅，如果你是初學(xué)者，這可能是最好的學(xué)習(xí)方式。但是，當(dāng)有這么多被廣泛采用的游戲引擎可供選擇時(shí)，為什么要重新發(fā)明輪子呢？

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

我們將介紹：

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

1. Three.js

Three.js 是最受歡迎的 JavaScript 庫(kù)之一，用于使用 WebGL 在 Web 瀏覽器中創(chuàng)建和動(dòng)畫(huà) 3D 計(jì)算機(jī)圖形。它也是為網(wǎng)絡(luò)瀏覽器創(chuàng)建 3D 游戲的絕佳工具。

由于 Three.js 基于 JavaScript，因此在 3D 對(duì)象和用戶界面（如鍵盤(pán)和鼠標(biāo)）之間添加任何交互性相對(duì)容易。這使得該庫(kù)非常適合在網(wǎng)絡(luò)上制作 3D 游戲。

優(yōu)點(diǎn)

易于學(xué)習(xí)：Three.js最重要的優(yōu)點(diǎn)——除了它能夠很好地執(zhí)行復(fù)雜的渲染——是它很容易上手。
大量示例：由于其受歡迎程度，有無(wú)數(shù)示例可以幫助您入門(mén)。以下是一些示例項(xiàng)目，展示了 Three.js 的可能性：

大型社區(qū)：Three.js在GitHub上有87.1k星和33.4k分叉。它擁有大量用戶和龐大的開(kāi)發(fā)人員社區(qū)，他們使用并為庫(kù)創(chuàng)建各種第三方工具和擴(kuò)展
良好的文檔：強(qiáng)大的文檔通常是強(qiáng)大庫(kù)的重要指標(biāo)，而 Three.js 擁有出色的文檔
出色的性能：Three.js 比我使用過(guò)的其他庫(kù)具有性能優(yōu)勢(shì)
PBR渲染：Three.js內(nèi)置了基于物理的渲染（PBR），使渲染圖形更準(zhǔn)確

缺點(diǎn)

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

三.js在行動(dòng)

如果您想深入研究在網(wǎng)絡(luò)上創(chuàng)建簡(jiǎn)單或復(fù)雜的 3D 對(duì)象，Three.js 是首選庫(kù)。它的主要優(yōu)勢(shì)包括龐大的人才用戶社區(qū)以及豐富的示例和資源。

Three.js是我合作的第一個(gè)3D動(dòng)畫(huà)庫(kù)，我會(huì)推薦給任何剛開(kāi)始游戲開(kāi)發(fā)的人。

讓我們創(chuàng)建一個(gè)簡(jiǎn)單的旋轉(zhuǎn)幾何體來(lái)演示 Three.js 可以做什么：

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

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

animate();

創(chuàng)建一個(gè)函數(shù)來(lái)設(shè)置使用 Three 運(yùn)行演示動(dòng)畫(huà)所需的一切.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 );
}

接下來(lái)，創(chuàng)建一個(gè)函數(shù)，以使用所需的運(yùn)動(dòng)類型對(duì)對(duì)象進(jìn)行動(dòng)畫(huà)處理：animate

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

最終結(jié)果應(yīng)如下所示：

2.Pixi.js

如果您正在尋找一個(gè)JS庫(kù)來(lái)創(chuàng)建支持跨平臺(tái)應(yīng)用程序的豐富交互式2D圖形，那么Pixi.js就是您的最佳選擇。這個(gè)HTML5創(chuàng)建引擎使你能夠在沒(méi)有WebGL API知識(shí)的情況下開(kāi)發(fā)動(dòng)畫(huà)和游戲。

優(yōu)點(diǎn)

快速性能：就像三.js，小精靈.js非常快
大型社區(qū)：Pixi.js 在 GitHub 上擁有 38.2k 顆星和 4.7k 個(gè)分支，擁有龐大的用戶/開(kāi)發(fā)人員社區(qū)
多平臺(tái)支持：也像Three.js，Pixi.js支持多個(gè)平臺(tái)，如Web和本機(jī)系統(tǒng)，如Android，iOS，Windows和mac
簡(jiǎn)單的API：API對(duì)于初學(xué)者來(lái)說(shuō)很容易理解
支持 WebGL 和 Canvas 回退：Pixi.js 使用 WebGL 渲染器，但也支持 Canvas 回退

缺點(diǎn)

過(guò)于復(fù)雜：根據(jù)我的經(jīng)驗(yàn)，Three.js比Pixi更容易上手.js
不是一個(gè)完整的解決方案：Pixi.js自豪地只支持渲染器

Pixi.js在行動(dòng)

在大多數(shù)情況下，Pixi 是一個(gè)不錯(cuò)的選擇，尤其是在創(chuàng)建面向性能的 3D 交互式圖形并考慮設(shè)備兼容性時(shí)。Pixi在WebGL失敗的情況下對(duì)Canvas回退的支持是一個(gè)特別誘人的功能。

讓我們構(gòu)建一個(gè)簡(jiǎn)單的演示來(lái)了解 Pixi.js 的實(shí)際應(yīng)用。使用以下命令或 CDN 將 Pixi.js 添加到項(xiàng)目中：

npm install pixi.js

或 CDN：

創(chuàng)建腳本文件并添加以下代碼：

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;
});

});

結(jié)果應(yīng)如下所示：

3. Phaser

Phaser 是一個(gè)跨平臺(tái)的游戲引擎，使您能夠創(chuàng)建基于 JavaScript 和 HTML5 的游戲，并為許多平臺(tái)進(jìn)行編譯。例如，您可能決定使用第三方工具將游戲編譯為 iOS、Android 和其他本機(jī)應(yīng)用程序。

優(yōu)點(diǎn)

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

缺點(diǎn)

構(gòu)建大小：桌面版 Phaser 的構(gòu)建大小非常龐大
對(duì)移動(dòng)開(kāi)發(fā)的支持不佳：創(chuàng)建本機(jī)移動(dòng)應(yīng)用程序需要使用Cordova或其他第三方框架
狀態(tài)管理：開(kāi)始使用 Phaser 的狀態(tài)管理器可能有些困難

移相器在行動(dòng)

Phaser 非常適合開(kāi)發(fā)跨平臺(tái)游戲應(yīng)用程序。它支持廣泛的插件，并且使用Phaser構(gòu)建游戲的大型開(kāi)發(fā)人員社區(qū)使開(kāi)始使用該框架變得容易。

讓我們使用 Phaser 構(gòu)建一個(gè)基本應(yīng)用程序。首先，將 Phaser 安裝為 Node 模塊或通過(guò) CDN：

npm install phaser

或：

接下來(lái)，將一些默認(rèn)配置傳遞給您的 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);

創(chuàng)建一個(gè)預(yù)加載函數(shù)以加載默認(rèn)靜態(tài)文件：

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");
}

最后，定義一個(gè)函數(shù)來(lái)顯示新創(chuàng)建的游戲：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是一個(gè)強(qiáng)大，簡(jiǎn)單，開(kāi)放的游戲和渲染引擎，打包在一個(gè)友好的JavaScript框架中。

優(yōu)點(diǎn)

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

缺點(diǎn)

缺乏成熟度：巴比倫于2013年首次發(fā)布，與許多競(jìng)爭(zhēng)對(duì)手相比，它相當(dāng)年輕
文檔：引擎缺少 API 文檔
不適合小型項(xiàng)目

Babylon.js在行動(dòng)

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

巴比倫及其模塊發(fā)布在npm上。若要安裝它，請(qǐng)?jiān)诿钚泄ぞ咧羞\(yùn)行以下命令：

npm install babylonjs --save

或者，您可以通過(guò) CDN 將庫(kù)集成到項(xiàng)目中。為此，請(qǐng)創(chuàng)建一個(gè)文件并添加以下代碼：index.html

安裝后，您可以通過(guò)導(dǎo)入全局對(duì)象或解構(gòu)場(chǎng)景和引擎方法來(lái)開(kāi)始使用庫(kù)，如下所示：

import * as BABYLON from 'babylonjs'

// OR

import { Scene, Engine } from 'babylonjs'

接下來(lái)，創(chuàng)建一個(gè)文件并包含以下代碼：script.js

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

創(chuàng)建一個(gè)文件并添加以下代碼：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;
}

以下是動(dòng)畫(huà)外觀的預(yù)覽：

5.Matter.js

Matter.js是一個(gè)用于Web的JavaScript 2D剛體物理引擎。即使它是一個(gè)JavaScript物理引擎，你也可以將它與各種包和插件結(jié)合起來(lái)，創(chuàng)建有趣的網(wǎng)頁(yè)游戲。

優(yōu)點(diǎn)

令人興奮的功能：Matter.js提供了許多功能，例如剛性、復(fù)合體和復(fù)合材料體、穩(wěn)定的堆疊和靜止、運(yùn)動(dòng)守恒等等

缺點(diǎn)

無(wú)CCD：Matter.js缺乏連續(xù)碰撞檢測(cè)（CCD）會(huì)導(dǎo)致快速移動(dòng)的物體穿過(guò)其他物體的問(wèn)題

物質(zhì).js在行動(dòng)

Matter.js 本質(zhì)上是創(chuàng)建簡(jiǎn)單、移動(dòng)的動(dòng)畫(huà)對(duì)象的最佳庫(kù)。Matter.js是一個(gè)物理庫(kù)，更關(guān)注2D對(duì)象。但是，您可以將其與第三方解決方案結(jié)合使用以創(chuàng)建動(dòng)態(tài)游戲。

要開(kāi)始使用 Matter.js在原版項(xiàng)目中，請(qǐng)下載 or matter。最小值.js從官方 GitHub 存儲(chǔ)庫(kù)打包文件，并使用以下代碼將其添加到 HTML 文件中：matter.js

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

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

以下是使用內(nèi)置渲染器和運(yùn)行器入門(mén)的最小示例：

// 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);

你應(yīng)該看到兩個(gè)矩形物體掉落，然后在它們落在地面上時(shí)相互撞擊。如果沒(méi)有，請(qǐng)檢查瀏覽器控制臺(tái)以查看是否有任何錯(cuò)誤：

6.PlayCanvas

PlayCanvas使用HTML5和WebGL在任何移動(dòng)或桌面瀏覽器中運(yùn)行游戲和其他交互式3D內(nèi)容。雖然它是免費(fèi)和開(kāi)源的，但PlayCanvas更關(guān)注游戲引擎而不是渲染引擎。因此，它更適合創(chuàng)建
使用WebGL和HTML3 Canvas的5D游戲。

優(yōu)點(diǎn)

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

缺點(diǎn)

付費(fèi)專用項(xiàng)目：免費(fèi)層不支持私有項(xiàng)目，因此所有代碼和資源都公開(kāi)托管
碰撞偏移：沒(méi)有碰撞偏移
缺乏示例：PlayCanvas 的教程很少而且相距甚遠(yuǎn)

PlayCanvas 在行動(dòng)

PlayCanvas非常適合創(chuàng)建小型公共項(xiàng)目或?qū)W校項(xiàng)目 - 至少，這是我使用它的目的。如果您需要更多功能和對(duì)游戲開(kāi)發(fā)的更多控制，您可能需要考慮訂閱高級(jí)功能。

現(xiàn)在，讓我們使用引擎進(jìn)行一些基本的渲染。第一步，從 GitHub 存儲(chǔ)庫(kù)下載包文件，并使用以下代碼將其添加到項(xiàng)目中：

接下來(lái)，使用以下代碼創(chuàng)建一個(gè)文件并將其鏈接到 HTML 文件：script.js

現(xiàn)在，打開(kāi)該文件并添加以下代碼以實(shí)例化新的 PlayCanvas 應(yīng)用程序：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);

要為對(duì)象創(chuàng)建相機(jī)和光源，請(qǐng)?zhí)砑右韵麓a：

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();

上面的代碼應(yīng)產(chǎn)生以下結(jié)果：

結(jié)語(yǔ)

通過(guò)分解與上面列出的每個(gè) JS/HTML5 游戲引擎相關(guān)的優(yōu)缺點(diǎn)和用例，我希望您能深入了解哪一個(gè)最適合您想要?jiǎng)?chuàng)建的游戲或動(dòng)畫(huà)類型。

在大多數(shù)情況下，我建議使用 Three.js，特別是如果您正在尋找更多的渲染引擎而不是游戲引擎。由于它在開(kāi)發(fā)人員生態(tài)系統(tǒng)中的受歡迎程度，很容易找到充足的資源來(lái)幫助您啟動(dòng)和運(yùn)行。

如果你更關(guān)注游戲開(kāi)發(fā)，我會(huì)推薦巴比倫.js因?yàn)樗芎?jiǎn)單。Babylon還具有更新的代碼庫(kù)和活躍的第三方開(kāi)發(fā)，游樂(lè)場(chǎng)功能是一個(gè)很好的測(cè)試工具。PlayCanvas是一個(gè)可靠的備份選項(xiàng) - 它主要是一個(gè)游戲引擎，您可以使用它來(lái)構(gòu)建復(fù)雜的3D游戲。

您在游戲開(kāi)發(fā)項(xiàng)目中使用什么游戲引擎？請(qǐng)?jiān)谠u(píng)論中告訴我們！

LogRocket：通過(guò)理解上下文更輕松地調(diào)試JavaScript錯(cuò)誤

調(diào)試代碼始終是一項(xiàng)繁瑣的任務(wù)。但是，您越了解錯(cuò)誤，就越容易修復(fù)它們。

LogRocket 允許您以新穎獨(dú)特的方式理解這些錯(cuò)誤。我們的前端監(jiān)控解決方案跟蹤用戶與 JavaScript 前端的互動(dòng)情況，使您能夠準(zhǔn)確了解用戶導(dǎo)致錯(cuò)誤的行為。

LogRocket 記錄控制臺(tái)日志、頁(yè)面加載時(shí)間、堆棧跟蹤、帶有標(biāo)頭 + 正文的慢速網(wǎng)絡(luò)請(qǐng)求/響應(yīng)、瀏覽器元數(shù)據(jù)和自定義日志。了解 JavaScript 代碼的影響從未如此簡(jiǎn)單！

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

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商

javascript實(shí)現(xiàn)貪吃蛇游戲

一、HTML布局

二、繪制貪吃蛇

三、繪制食物

四、移動(dòng)蛇

五、游戲結(jié)束與重新開(kāi)始

六、最終實(shí)現(xiàn)結(jié)果

七、總結(jié)

1. Three.js

優(yōu)點(diǎn)

缺點(diǎn)

三.js在行動(dòng)

2.Pixi.js

優(yōu)點(diǎn)

缺點(diǎn)

Pixi.js在行動(dòng)

3. Phaser

優(yōu)點(diǎn)

缺點(diǎn)

移相器在行動(dòng)

4.Babylon.js

優(yōu)點(diǎn)

缺點(diǎn)

Babylon.js在行動(dòng)

5.Matter.js

優(yōu)點(diǎn)

缺點(diǎn)

物質(zhì).js在行動(dòng)

6.PlayCanvas

優(yōu)點(diǎn)

缺點(diǎn)

PlayCanvas 在行動(dòng)

結(jié)語(yǔ)

LogRocket：通過(guò)理解上下文更輕松地調(diào)試JavaScript錯(cuò)誤

您的項(xiàng)目需求