KodikKodik
{}const=>[]async()letfn</>var
Web実践開発

Tower Blocks — JavaScriptで楽しめる魅力的な3Dゲーム

ブロックでタワーを建てる3Dゲーム「Tower Blocks Game」の作り方を学びましょう。Three.jsとGSAPを使用してアニメーションを作成し、スコアを計算し、ゲームのプロセスを管理する方法を学びます。

К

Kodik

著者

3分で読める

Tower Blocks Game — プレイヤーがブロックを積み重ねて塔を建てる、楽しいアーケードゲームです。目的は、塔が安定した状態を保つように、ブロックをできるだけ正確に配置することです。

このチュートリアルでは、HTML、CSS、JavaScriptを使用してタワーブロックゲームを作成します。 Three.js 3Dビジュアライゼーションと GSAP スムーズなアニメーションのために。ゲームには以下が含まれます。

  1. アニメーションブロックは、動き回ったり停止したりします。

  2. 配置の精度に応じたブロックのサイズと位置の変更。

  3. スコアリングとゲームインターフェース。

ゲームの説明

Tower Blocks Game — これは、ブロックを動かしてタワーを建てるゲームです。ブロックを正確に置くほど、塔は高くなります。ブロックが前のブロックの範囲を超えると、ブロックの一部が切り取られます。ブロックが塔を完全に通り過ぎるとゲームは終了します。

特徴：

  • 便利なコントロール（クリックまたはスペース）。

  • カラフルな3Dグラフィックス。

  • 徐々に複雑になるゲームプレイ。

ゲーム制作のステージ

1. HTML構造の作成

  • 基本的な要素を追加します。ゲーム用のコンテナ、インターフェース用のブロック（スコア、説明、ゲーム終了画面）。

  • スタイルとスクリプトを接続します。 Three.js, GSAP、およびメインJavaScriptファイル。

2. CSSを使用したスタイル

  • スタイルを使用して、ゲームコンテナーを中央に配置します。

  • インターフェース要素のアニメーションを作成します。

  • さまざまな画面に合わせてインターフェースの適応性を設定します。

3. JavaScript でのゲームのロジック

  • ステージクラス：シーン、カメラ、照明の設定。

  • ブロッククラス：個々のブロックの管理（サイズ、動き、配置）。

  • ゲームクラス：ゲームプロセスの管理（ブロックの追加、スコアリング、ゲームの状態）。

4. ブロックのメカニズムの実装

  • ブロックの軸方向の動き。

  • 前のブロックとの接点の決定。

  • ブロックが境界線を越えている場合は、ブロックをトリミングします。

5.コントロールの設定

  • ブロックを配置するために、キー ストロークとマウス クリックに反応します。

6. スコアとゲームの終了

  • 正しく配置されたブロックごとにスコアを増やします。

  • ブロックが外れたらゲームを終了します。

7. テストと最適化

  • ゲームがすべてのデバイスと画面で動作することを確認してください。

  • ゲームの状態間の移行がスムーズであることを確認してください。

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Tower Blocks Game</title>
    <link rel="stylesheet" href="style.css"> <!-- Подключение стилей -->
</head>
<body>
    <div id="container">
        <!-- Основная область игры -->
        <div id="game"></div>
        
        <!-- Счет игры -->
        <div id="score">0</div>
        
        <!-- Инструкции -->
        <div id="instructions">Кликните, чтобы разместить блок</div>
        
        <!-- Экран окончания игры -->
        <div class="game-over">
            <h2>Игра окончена</h2>
            <p>Вы отлично справились, вы лучший.</p>
            <p>Кликните, чтобы начать заново</p>
        </div>
        
        <!-- Экран готовности к началу игры -->
        <div class="game-ready">
            <div id="start-button">Начать</div>
        </div>
    </div>

    <!-- Подключение скриптов -->
    <script src="https:// codepen.io/steveg3003/pen/zBVakw.js"></script> <!-補助関数のライブラリ ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/three.js/r83/three.min.js"></script> <!-- 3Dで動作するThree.js ->
    <script src="https:// cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script> <! --アニメーション用のGSAP ->
    <script src="script.js"></script> <!-- Основная логика игры -->
</body>
</html>

このHTMLで何をしているのでしょうか？

  1. ゲームの構造を追加します。

    • ゲームのメイン領域となる id="container" を持つコンテナーを作成します。

    • コンテナ内に次のものを配置します。

      • #gameは、Three.jsを使用して3Dグラフィックスを描画するための領域です。

      • #scoreは、リアルタイムで更新されるゲームスコアです。

      • #instructionsは、ゲームの開始時に表示されるプレイヤーへのヒントです。

      • .game-overは、ゲームが完了したときに表示される画面です。

      • .game-ready — ゲームを開始するためのボタンが表示された画面。

  2. スタイルを接続します。

    • ゲームの外観を設定し、インターフェースをスタイル化するファイル style.css を接続するために、<link> を使用します。

  3. ライブラリとスクリプトを接続します。

    • Three.js — 3Dグラフィックスを作成して操作するためのライブラリ。

    • GSAPは、要素のスムーズなアニメーションのためのライブラリです。

    • script.jsはゲームロジックのメインファイルです。

  4. メタタグを追加します。

    • <meta charset="UTF-8"> — ロシア語のテキストを正しく表示するためにUTF-8エンコーディングを設定します。

    • <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">は、モバイルデバイス上のゲームインターフェースの適応性を提供します。

  5. インタラクションのシナリオ：

    • 接続されたスクリプトはゲームのメカニズムを実装します。

      • #start-buttonがゲームを開始します。

      • ゲーム開始時に #instructions とのインタラクションが発生します。

      • プレイヤーがミスをすると、.game-over画面が表示されます。

CSSスタイルを追加します

タワーブロックゲームをスタイリングするために、CSSを使用して、適応性とアニメーションをサポートする快適で使いやすいインターフェースを作成します。

主要な要素とそのスタイル

1. 基本設定

ゲームが画面全体に表示されるように、標準のインデントとスクロールを無効にします。

html, body {
  margin: 0;
  overflow: hidden;
  height: 100%;
  width: 100%;
  font-family: "Comfortaa", cursive;
}

2. ゲームコンテナ

コンテナは画面全体を占め、ゲームのメイン領域として機能します。

#container {
  width: 100%;
  height: 100%;
}

3. アカウント

ゲームのスコアは画面の上部に表示され、大きなサイズとスムーズなアニメーションで表示されます。

#container #score {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  font-size: 10vh;
  color: #333344;
  transition: transform 0.5s ease;
}

4. ゲームのグラフィックス

エリア #game は、Three.js を使用して 3D グラフィックスを表示するためのもので、画面全体を占めます。

#container #game {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

5. ゲームの終了と開始の画面

画面 .game-over と .game-ready がアニメーションで画面中央に表示されます。

#container .game-over, #container .game-ready {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

完全なコードはどこで見つかりますか？

アプリケーションで完全なCSSコードが利用可能 コディック または プロジェクトのGitHubこれにより、スタイル全体を調べ、必要に応じて外観をカスタマイズできます。

Tower Blocks Game (JavaScript) のゲームロジックの説明

JavaScriptは、Tower Blocks Gameのゲームロジック全体を実装するための基礎です。これは、3Dシーンの管理、ブロックの動き、スコアリング、プレイヤーとのインタラクションを担当します。

JavaScriptの基本要素とその機能

1. 3Dシーンの作成

3Dグラフィックスを操作するには、ライブラリを使用します Three.jsクラス Stage を使用して、シーン、カメラ、照明を作成します。

class Stage {
  constructor() {
    this.renderer = new THREE.WebGLRenderer({ antialias: true });
    this.scene = new THREE.Scene();
    this.camera = new THREE.OrthographicCamera(...);
    this.light = new THREE.DirectionalLight(0xffffff, 0.5);
    this.scene.add(this.light);
  }
}

私たちがしていること：

  • カメラを直交投影に設定します（「上から見た」ゲームに適しています）。

  • 視覚的なボリュームを作り出すために照明を追加します。

2. ブロックの作成

クラス Block は、個々のブロック、そのサイズ、動き、配置を制御します。

class Block {
  constructor(previousBlock) {
    this.dimension = { width: 10, height: 2, depth: 10 };
    this.position = { x: 0, y: ..., z: 0 };
    this.mesh = new THREE.Mesh(new THREE.BoxGeometry(...), new THREE.MeshToonMaterial(...));
  }

  tick() {
    // ブロックの動きを制御します
    this.position[this.workingPlane] += this.direction;
  }

  place() {
    // 前のブロックと一致しない場合のブロックのトリミングロジック
  }
}

私たちがしていること：

  • ブロックのサイズと開始位置を設定します。

  • ブロックの動きと、クリックしたときの停止を実装します。

3. ゲームのコントロール

Game クラスは、ゲームのロジック、状態の管理、新しいブロックの追加、スコアの計算を統合します。

class Game {
  constructor() {
    this.blocks = [];
    this.stage = new Stage();
    this.state = 'READY';
    this.score = 0;
  }

  addBlock() {
    // タワーに新しいブロックを追加する
  }

  placeBlock() {
    // 現在のブロックを配置し、ゲームの完了を確認します
  }

  restartGame() {
    // 終了時にゲームをリセットする
  }
}

私たちがしていること：

  • ゲームの状態を処理します。開始、ゲーム、終了、再起動。

  • 新しいブロックの追加とシーンの更新を管理します。

  • 正しく配置されたブロックのポイントをカウントします。

4. プレイヤーとのインタラクション

ゲームはユーザーのアクションに反応します。スペースバーを押すか、マウスをクリックしてブロックを配置します。

document.addEventListener('click', () => game.onAction());
document.addEventListener('keydown', (e) => {
  if (e.keyCode === 32) game.onAction(); // スペースキーを押す
});

5. アニメーション

ライブラリを使用する GSAP カメラとブロックアニメーションのスムーズな移動を実装します。

TweenLite.to(this.camera.position, 0.3, { y: newY });
TweenLite.to(block.position, 1, { x: ... });

私たちがしていること：

  • カメラはブロックに従ってスムーズに上昇します。

  • 一致しないブロックは横に飛び、消えます。

完全なコードはどこで見つかりますか？

アプリケーションで完全なJavaScriptコードが利用可能 コディック または プロジェクトのGitHub. 詳細を確認し、必要に応じてニーズに合わせて調整できます。

結論

ゲームの作成 Tower Blocks Game — 3Dグラフィックス、アニメーション、ゲームメカニクスの作業を組み合わせたエキサイティングなプロセスです。シーンの設定、ブロックの管理、インタラクションの実装、インターフェースのスタイル化など、開発の重要なポイントを検討しました。

ゲームをプレイしたり、ゲームの作り方を学んだりするには？

プレイする Tower Blocks Game アプリケーションでコードを詳しく学ぶことができます コディックこれはゲームを楽しむだけでなく、実践例を学びながら独自のプロジェクトを開発する方法を学ぶ絶好の機会です。また、完全なソースコードは プロジェクトのGitHub、そこからダウンロードして、自分のニーズに合わせて調整できます。

自分でゲームを作ってみてください。設定をいろいろ試して、ゲームを改善してください。それがプログラミングの魔法です！ 🚀

🎯先延ばしをやめよう

記事は気に入った？
実践の時間だ！

Kodikでは読むだけでなく、すぐにコードを書く。理論 + 実践 = 本当のスキル。

⚡即座に実践
🧠AIがコードを説明
🏆修了証

登録不要 • カード不要