JavaScriptでミニゲームを書く方法-フロントエンドQ&A-php.cn

ホームページ

ウェブフロントエンド

フロントエンドQ&A

JavaScriptでミニゲームを書く方法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 15, 2023 pm 09:31 PM

現在、JavaScript はフロントエンド開発に不可欠なスキルとなっており、Web ページのインタラクティブなエフェクトを開発できるだけでなく、簡単なミニゲームも実装できます。この記事ではJavaScriptでミニゲームを書く方法を紹介します。

1. 準備

ローカルコンピューター上に新しいフォルダーを作成し、適切な名前を付けます。フォルダー内に新しい 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 コードの記述を開始できます。

2. ゲームを作成します

キャンバスの作成

まず、ゲームをレンダリングするために HTML ファイルに canvas 要素を作成します。画面。

<body>
    <canvas id="myCanvas"></canvas>
</body>

ログイン後にコピー

JavaScript ファイルで、要素のコンテキストを取得し、変数に保存します。

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 方向が直接反転します。デフォルトでは、ボールは動き続け、停止することはできません。ボールがキャンバスの底に完全に当たるとゲームが終了します。

3. 概要

これまでのところ、小さな JavaScript ゲームの作成が完了しました。これはシンプルな小さなゲームの例で、HTML5 キャンバスと JavaScript スクリプトを使用して基本的なゲームを完成させました。

もちろん、これらのコードはこの記事で提供される単なる例であり、ゲーム作成の基礎として使用できます。より複雑なゲームプレイを備えた大規模なゲームを作成したい場合は、JavaScript の基本とゲーム開発スキルをより深く学ぶ必要があります。

この分野に慣れていない場合は、この記事の紹介に従って、独自の小さなゲームを書いてみてください。

以上がJavaScriptでミニゲームを書く方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。