如何用javascript寫小遊戲-前端問答-PHP中文網

首頁

web前端

前端問答

如何用javascript寫小遊戲

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 pm 09:31 PM

在當下，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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn