如何用javascript寫小遊戲
- WBOY原創
- 2023-05-15 21:31:382809瀏覽
在當下，JavaScript已經成為前端開發中不可或缺的一項技能，它不僅可以開發網頁互動效果，還能實現簡單的小遊戲。本文將介紹如何用JavaScript來寫小遊戲。
一、準備工作
在本機電腦上建立一個新的資料夾，取一個合適的名字。在資料夾中新建一個HTML 文件，在文件頭中加入以下程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript Game</title>
</head>
<body>
</body>
<script src="main.js"></script>
</html>這裡的main.js就是將要編寫的JavaScript腳本文件，這裡引用的是已建立完成的文件。建立main.js文件，和HTML文件放在同一個資料夾下，此時我們就可以開始寫JavaScript程式碼了。
二、寫遊戲
- 建立畫布
#首先，在HTML 檔案中建立一個canvas元素，用來渲染遊戲畫面。
<body>
<canvas id="myCanvas"></canvas>
</body>在 JavaScript 檔案中，取得該元素的上下文（context），並將其保存在變數中。
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");現在，我們已經可以在canvas畫布上繪製圖形了。
- 繪製遊戲背景和其他物件
接下來，我們需要繪製遊戲的背景和其他物件。在這裡，我們可以分別定義不同的函數來繪製不同的物體，例如背景、球和擋板等。在這裡，我們先定義一個函數，來繪製遊戲的背景。
function drawBackground() {
ctx.fillStyle = "#3c3c3c";
ctx.fillRect(0, 0, canvas.width, canvas.height);
}在這個函數裡，我們首先定義了一個顏色值用來填滿畫布背景，然後使用fillRect()方法來填滿整個畫布。
- 動態更新遊戲
現在，我們已經擁有了用來繪製畫布上各種物件的函數，該開始讓遊戲開始「動起來」了。
在這裡，我們可以使用函數的遞歸呼叫方式來實現不斷刷新遊戲畫面。這裡我們定義一個函數update()，然後用window.requestAnimationFrame()來呼叫它，開始刷新遊戲。
function update() {
drawBackground();
requestAnimationFrame(update);
}
update(); // 调用 update() 函数以开始刷新游戏在這個函數裡，我們先呼叫了drawBackground()函數來繪製遊戲的背景。然後，我們使用requestAnimationFrame()函數呼叫了update()函數本身，來實現不斷重複更新遊戲畫面的效果。
- 控制球移動方向
現在，我們已經可以在畫布上繪製物體了，接下來我們需要加入控制球移動方向的操作。首先，我們定義一個小球保存用來記錄它的位置信息，和方向信息。
var ball = {
x: canvas.width/2,
y: canvas.height-30,
dx: 2,
dy: -2,
radius: 10
};在這個物件中，我們定義了球的起始位置（即畫布的中心位置），dx和dy表示球的初始移動方向，radius為球的半徑。
在update()函數中，我們可以加入對球移動、碰撞偵測等操作的程式碼。
function update() {
drawBackground();
// 移动球
ball.x += ball.dx;
ball.y += ball.dy;
// 碰撞检测
if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
ball.dx = -ball.dx;
}
if(ball.y + ball.dy > canvas.height-ball.radius || ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
requestAnimationFrame(update);
}
update();在這個函數中，我們首先計算了球的移動，然後透過碰撞偵測來偵測球是否觸碰了畫布邊緣。若是，則將球的運動方向反轉，然後繼續移動。
- 控制擋板移動
現在我們已經控制了球的方向和行動，接下來需要加入控制擋板移動的操作。
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth) / 2;
function drawPaddle() {
ctx.beginPath();
ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
ctx.fillStyle = "#0095DD";
ctx.fill();
ctx.closePath();
}
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
var rightPressed = false;
var leftPressed = false;
function keyDownHandler(e) {
if(e.keyCode == 39) {
rightPressed = true;
}
else if(e.keyCode == 37) {
leftPressed = true;
}
}
function keyUpHandler(e) {
if(e.keyCode == 39) {
rightPressed = false;
}
else if(e.keyCode == 37) {
leftPressed = false;
}
}
function update() {
drawBackground();
drawPaddle();
// 移动球
ball.x += ball.dx;
ball.y += ball.dy;
// 控制挡板移动
if(rightPressed && paddleX < canvas.width-paddleWidth) {
paddleX += 7;
}
else if(leftPressed && paddleX > 0) {
paddleX -= 7;
}
// 碰撞检测
if(ball.x + ball.dx > canvas.width-ball.radius || ball.x + ball.dx < ball.radius) {
ball.dx = -ball.dx;
}
if(ball.y + ball.dy < ball.radius) {
ball.dy = -ball.dy;
}
else if(ball.y + ball.dy > canvas.height-ball.radius) {
if(ball.x > paddleX && ball.x < paddleX + paddleWidth) {
ball.dy = -ball.dy;
}
else {
alert("游戏结束");
document.location.reload();
clearInterval(interval);
}
}
requestAnimationFrame(update);
}
update();在這裡，我們首先定義了一個擋板的位置，和其長度、高度。然後我們透過drawPaddle()函數來繪製擋板，接下來監聽keydown和keyup事件，偵測使用者是否按下對應的按鍵來移動擋板。
同時，在這個函數中，還需要加入對球與擋板的碰撞進行偵測的程式碼。若球觸碰到擋板，則將球的y方向直接反轉，預設球將一直移動而無法停止移動。當球完全打出畫布下方，遊戲結束。
三、小結
到此為止，我們已經完成了一個小型的JavaScript遊戲的編寫。這是一個簡單的小遊戲例子，我們只是了用HTML5畫布、JavaScript腳本完成了一個基礎的遊戲。
當然，這些程式碼只是本文提供的一個例子，可以用來作為遊戲編寫的基礎。如果我們要編寫更複雜玩法的大型遊戲，需要我們更深入地學習JavaScript基礎知識和遊戲開發技巧。
如果你還沒接觸過這個領域，那麼試著按照本文的介紹，寫一個自己的小遊戲吧！
以上是如何用javascript寫小遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章！