ホームページ >ウェブフロントエンド >CSSチュートリアル >コンセプトからコードまで: シンプルなエンドレス ランナー ゲームの構築
コンセプトからコードまで: シンプルなエンドレス ランナー ゲームの構築
- Patricia Arquetteオリジナル
- 2024-11-07 01:51:02203ブラウズ
エンドレス ランナー ゲームの作成は、ゲーム開発に取り組む楽しい方法です。これらのゲームは簡単で中毒性があり、創造的な調整がたくさん可能です。考えてみてください。走る、ジャンプする、かわすなどの単純な仕組みをいくつか使うだけで、プレイヤーを画面に釘付けにする何かを作ることができます。
Temple Run、Flappy Bird、Subway Surfers などのゲームはすべて、これと同じ単純なアイデアから始まりましたが、世界中で何百万もの人々を楽しませてきました。
このガイドでは、独自のエンドレス ランナーをゼロから構築する方法を説明します。物事をシンプルにして、基本的なゲームを立ち上げて実行するために重要な手順を順を追って説明します。
ステップ 1: コアメカニズムを理解する
コードの説明に入る前に、エンドレス ランナー ゲームが機能する仕組みを説明しましょう。核となる仕組みはシンプルです:
自動移動: 主人公は自動的に前進するため、プレイヤーは前進の動きを制御する必要はありません。
障害物: これらは画面上に表示され、プレイヤーはそれらを避けるために素早く反応する必要があります。
プレイヤーのアクション: 通常、プレイヤーはジャンプしたり、身をかがめたり、場合によっては射撃したりして障害物と対話できます。
これらの中核的な仕組みは、何を構築する必要があるかの青写真を与えてくれます。スムーズなエクスペリエンスを保証しながら、物事をできるだけシンプルに保つという考えです。
ステップ 2: 基本構造から始める
基本的なエンドレス ランナーを構築するには、HTML、CSS、JavaScript で構造をセットアップすることから始めます。
HTMLキャンバスのセットアップ
まず、canvas 要素を含む基本的な HTML ファイルを作成します。これは次のようになります:
まず、canvas 要素を含む基本的な HTML ファイルを作成します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Endless Runner</title>
<style>
canvas {
background-color: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
JavaScript でのキャンバスの構成
次に、ゲームを実行し続けるために JavaScript で基本的なゲーム ループを作成する必要があります。ゲーム ループはゲームの「心臓部」であり、フレームごとに画面を更新します。
これはゲーム ループの単純なバージョンです:
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Game code goes here
requestAnimationFrame(gameLoop); // keeps the loop going
}
gameLoop();
説明: requestAnimationFrame を使用して gameLoop 関数を継続的に実行し、フレームごとにゲームを更新します。この関数は画面をクリアします。後でここにゲーム オブジェクトを追加します。
ステップ 3: プレイヤー キャラクターの追加
エンドレス ランナーでは、プレイヤー キャラクターはジャンプやダックなど 1 つまたは 2 つのアクションしか持たないことがよくあります。このガイドでは、シンプルにしてジャンプに焦点を当てましょう。
単純なプレーヤーオブジェクトの作成
プレーヤーを、位置、サイズ、速度などのプロパティを持つオブジェクトとして定義します。以下に例を示します:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Endless Runner</title>
<style>
canvas {
background-color: #eee;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="gameCanvas" width="800" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
これにより、ジャンプできる正方形の「プレーヤー」が得られます。 isJumping プロパティは、プレーヤーが再びジャンプできるかどうかを制御するのに役立ちます。
画面上にプレーヤーを描画する
次のコードを gameLoop に追加して、プレイヤーを描画します:
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// Game code goes here
requestAnimationFrame(gameLoop); // keeps the loop going
}
gameLoop();
ゲームループ内でdrawPlayer()を呼び出します:
const player = {
x: 50,
y: canvas.height - 60,
width: 50,
height: 50,
color: "blue",
velocityY: 0,
isJumping: false
};
ステップ 4: ジャンプ メカニクスの追加
プレーヤーをジャンプさせるために、キーボード入力を聞きます。プレイヤーが「スペース」キーを押すと、プレイヤーキャラクターがジャンプするはずです。
ジャンプアクションの処理
function drawPlayer() {
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
Space が押されると、プレーヤーの垂直速度が負の値に設定され、上方向に移動します。また、isJumping を true に設定して、二重ジャンプを防止します。
重力の実装
プレイヤーはジャンプした後、重力によって下に戻ります。これは、各フレームでプレーヤーを下に引っ張る一定の力を追加することで実行できます。
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawPlayer();
requestAnimationFrame(gameLoop);
}
ここで、gameLoop 内で updatePlayer() を呼び出して、プレイヤーがジャンプした後に元に戻るようにします。
ステップ 5: 障害物を作成する
障害物が無限のランナーを挑戦的にします。画面の右側から出現し、左に移動します。プレイヤーが障害物に当たるとゲームオーバーです。
障害物のプロパティの定義
障害物を設定する簡単な方法は次のとおりです:
document.addEventListener("keydown", (event) => {
if (event.code === "Space" && !player.isJumping) {
player.velocityY = -10;
player.isJumping = true;
}
});
この関数は、キャンバスの右端に新しい障害物を作成します。その後、フレームごとに左に移動できます。
動く障害物
gameLoop で、障害物を移動および描画する関数を追加します。
function updatePlayer() {
player.y += player.velocityY;
player.velocityY += 0.5; // Gravity effect
// Ground detection
if (player.y > canvas.height - player.height) {
player.y = canvas.height - player.height;
player.velocityY = 0;
player.isJumping = false;
}
}
updateObstacles() とdrawObstacles() を gameLoop に追加します。
ステップ 6: 衝突検出
次に、衝突検出を追加しましょう。プレーヤーが障害物にぶつかると、ゲームが停止または再開されます。
const obstacles = [];
function createObstacle() {
obstacles.push({
x: canvas.width,
y: canvas.height - 50,
width: 20,
height: 50,
color: "red"
});
}
gameLoop 内で checkCollision() を実行します。
ステップ 7: すべてをまとめる
これらすべての関数を追加した後の完全な gameLoop は次のとおりです:
function updateObstacles() {
obstacles.forEach((obstacle, index) => {
obstacle.x -= 5; // Speed of obstacle
// Remove obstacles that go off-screen
if (obstacle.x + obstacle.width < 0) {
obstacles.splice(index, 1);
}
});
}
function drawObstacles() {
obstacles.forEach(obstacle => {
ctx.fillStyle = obstacle.color;
ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
});
}
ついに...
エンドレス ランナー ゲームは作成が簡単ですが、創造性の余地がたくさんあります。さまざまな障害物、パワーアップ、さらにはレベルの進行を追加できます。小規模から始めて、成長に合わせて機能を追加してゲームをユニークにしていきます。
この投稿の背後にいるのは誰ですか?
これは Scratch ゲーム開発者の Chipm0nk です。現在、ジオメトリ ダッシュをエンドレス ランナー ゲームにするプロジェクトに取り組んでいます。コメントボックスでお会いしましょう!
以上がコンセプトからコードまで: シンプルなエンドレス ランナー ゲームの構築の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。