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 までご連絡ください。

HTML内の反応：動的WebページのJavaScriptを統合しますApr 16, 2025 am 12:06 AM

HTMLにReactを統合するには、次の手順に従ってください。1。HTMLファイルにReactとReactdomを導入します。 2。反応成分を定義します。 3. ReactDomを使用してコンポーネントをHTML要素にレンダリングします。これらの手順を通じて、静的HTMLページは動的でインタラクティブな体験に変換できます。

Reactの利点：パフォーマンス、再利用性などApr 15, 2025 am 12:05 AM

Reactの人気には、パフォーマンスの最適化、コンポーネントの再利用、豊富なエコシステムが含まれます。 1.パフォーマンスの最適化は、仮想DOMおよび拡散メカニズムを介して効率的な更新を実現します。 2。コンポーネントの再利用は、再利用可能なコンポーネントによって重複コードを削減します。 3.リッチなエコシステムと一方向のデータフローは、開発エクスペリエンスを向上させます。

反応：動的でインタラクティブなユーザーインターフェイスを作成しますApr 14, 2025 am 12:08 AM

Reactは、動的でインタラクティブなユーザーインターフェイスを構築するための選択ツールです。 1）コンポーネント化とJSXは、UIを分割して簡単に再利用します。 2）国家管理は、UIの更新をトリガーするためにUseStateフックを通じて実装されます。 3）イベント処理メカニズムは、ユーザーの相互作用に応答し、ユーザーエクスペリエンスを向上させます。

React vs.バックエンドフレームワーク：比較Apr 13, 2025 am 12:06 AM

Reactは、ユーザーインターフェイスを構築するためのフロントエンドフレームワークです。バックエンドフレームワークは、サーバー側のアプリケーションを構築するために使用されます。 Reactはコンポーネントで効率的なUIアップデートを提供し、バックエンドフレームワークは完全なバックエンドサービスソリューションを提供します。テクノロジースタックを選択するときは、プロジェクトの要件、チームのスキル、およびスケーラビリティを考慮する必要があります。

HTMLとReact：マークアップとコンポーネントの関係Apr 12, 2025 am 12:03 AM

HTMLとReactの関係は、フロントエンド開発の中核であり、最新のWebアプリケーションのユーザーインターフェイスを共同で構築します。 1）HTMLはコンテンツ構造とセマンティクスを定義し、Reactはコンポーネントを介して動的インターフェイスを構築します。 2）ReactコンポーネントはJSX構文を使用してHTMLを埋め込み、インテリジェントなレンダリングを実現します。 3）コンポーネントライフサイクルは、状態および属性に従ってHTMLレンダリングと動的に更新を管理します。 4）コンポーネントを使用して、HTML構造を最適化し、保守性を向上させます。 5）パフォーマンスの最適化には、不必要なレンダリングの回避、重要な属性の使用、およびコンポーネントの単一の責任を維持することが含まれます。

ReactとFrontend：インタラクティブエクスペリエンスの構築Apr 11, 2025 am 12:02 AM

Reactは、インタラクティブなフロントエンドエクスペリエンスを構築するための好ましいツールです。 1）Reactは、コンポーネント化と仮想DOMを通じてUIの開発を簡素化します。 2）コンポーネントは、関数コンポーネントとクラスコンポーネントに分割されます。関数コンポーネントはよりシンプルで、クラスコンポーネントはより多くのライフサイクル方法を提供します。 3）Reactの作業原則は、パフォーマンスを改善するために仮想DOMおよび調整アルゴリズムに依存しています。 4）国家管理は、usestateまたはthis.stateを使用し、ComponentDidmountなどのライフサイクルメソッドが特定のロジックに使用されます。 5）基本的な使用には、コンポーネントの作成と状態の管理が含まれ、高度な使用にはカスタムフックとパフォーマンスの最適化が含まれます。 6）一般的なエラーには、不適切なステータスの更新とパフォーマンスの問題が含まれます。

反応とフロントエンドスタック：ツールとテクノロジーApr 10, 2025 am 09:34 AM

Reactは、コアコンポーネントと状態管理を備えたユーザーインターフェイスを構築するためのJavaScriptライブラリです。 1）コンポーネントと州の管理を通じてUIの開発を簡素化します。 2）作業原則には和解とレンダリングが含まれ、React.memoとusememoを通じて最適化を実装できます。 3）基本的な使用法は、コンポーネントを作成およびレンダリングすることであり、高度な使用法にはフックとコンテキストアピの使用が含まれます。 4）不適切なステータスの更新などの一般的なエラーでは、ReactDevtoolsを使用してデバッグできます。 5）パフォーマンスの最適化には、React.MEMO、仮想化リスト、コードスプリッティの使用が含まれ、コードを読みやすく保守可能に保つことがベストプラクティスです。

HTMLにおけるReactの役割：ユーザーエクスペリエンスの向上Apr 09, 2025 am 12:11 AM

ReactはJSXとHTMLを組み合わせてユーザーエクスペリエンスを向上させます。 1）JSXはHTMLを埋め込み、開発をより直感的にします。 2）仮想DOMメカニズムは、パフォーマンスを最適化し、DOM操作を削減します。 3）保守性を向上させるコンポーネントベースの管理UI。 4）国家管理とイベント処理は、インタラクティブ性を高めます。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

mPDF

mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーションサーバーと統合します。

WebStorm Mac版

便利なJavaScript開発ツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。