魅力的なウェブゲームを作成する：'白いタイルに踏まないで'

はじめに

このプロジェクトでは、「白いタイルに踏まないで」というシンプルで魅力的なウェブベースのゲームを作成する方法を案内します。これらの手順に従うことで、HTML、CSS、JavaScriptを組み合わせて、プレイヤーが白いタイルに踏まないようにしてポイントを獲得するインタラクティブなゲームを構築する方法を学びます。このプロジェクトは、ウェブ開発技術を練習したい初心者に最適です。

👀 プレビュー

🎯 タスク

このプロジェクトでは、以下のことを学びます。

ゲームのインターフェイスをレイアウトするための基本的なHTML構造を設定する方法。
ゲームをスタイリッシュにし、視覚的に魅力的でユーザーフレンドリーにするためにCSSを活用する方法。
タイルの移動、得点システム、ゲームロジックなどのダイナミックな機能を追加するためにJavaScriptを実装する方法。
クリックなどのイベントを通じてユーザーインタラクションを処理し、ゲームのインタラクティブ性を高める方法。
得点やゲームオーバー条件など、ゲームの状態を動的に更新するためにDOMを操作する方法。
ゲームループ、衝突検出、速度調整などの基本的なゲーム開発概念を適用する方法。

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

HTML、CSS、JavaScriptをどのように組み合わせてインタラクティブなウェブアプリケーションを作成するかを十分に理解することができます。
アニメーション、ユーザー入力処理、リアルタイム更新などのゲーム開発概念に関する実践的な経験を適用することができます。
DOMを操作し、イベントを処理して応答性の高いウェブアプリケーションを作成することができます。
ゲームロジックの実装やゲームオーバー条件などのエッジケースの処理を通じて、問題解決能力を向上させることができます。
ウェブデザインとゲーム美学におけるあなたの創造性を発揮し、さらなるカスタマイズと機能強化を探求することができます。
より複雑なウェブ開発とゲームデザインプロジェクトに向けた基礎を築き、ウェブ技術の分野におけるさらなる学習と探求の土台を築くことができます。

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/loops("Loops") javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") javascript/DOMManipulationGroup -.-> javascript/dom_traverse("DOM Traversal") subgraph Lab Skills javascript/arith_ops -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/cond_stmts -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/loops -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/functions -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/dom_select -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/dom_manip -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/event_handle -.-> lab-445719{{"白いタイルに踏まないで"}} javascript/dom_traverse -.-> lab-445719{{"白いタイルに踏まないで"}} end

HTML構造の設定

index.html でゲーム用の基本的なHTML構造を作成しましょう。これには、ゲームのタイトル、得点表示、メインゲームエリア (#main)、および開始ボタンが含まれます。メインゲームエリアには、移動するタイルの行が含まれます。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>Don't Step on the White Tile</title>
    <link rel="stylesheet" href="index.css" />
  </head>
  <body>
    <h2>Score</h2>
    <h2 id="score">0</h2>
    <div id="main">
      <div id="con"></div>
    </div>
    <div class="btn">
      <button class="start" onclick="start()">Start Game</button>
    </div>
    <script src="index.js"></script>
  </body>
</html>

このステップでは、ゲーム用の基本的なHTML構造を確立しました。この構造には、ゲームのタイトル、得点表示、移動するタイル用の #main で識別されるメインゲームエリア、およびゲームを開始する開始ボタンが含まれます。#main エリアには、後でゲーム中にプレイヤーがインタラクトするタイルの行が配置されます。この設定は重要です。なぜなら、CSSとJavaScriptがスタイルと機能を追加するゲームの骨格をレイアウトしているからです。

✨ 解答を確認して練習

CSSスタイルの作成

index.css でゲームの視覚的な構造を定義するためのCSSスタイルを作成します。このステップでは、メインゲームコンテナ、個々のタイル（セル）、および開始ボタンをスタイリッシュにすることで、ゲームを視覚的に魅力的にすることが行われます。

#main {
  width: 408px;
  height: 408px;
  background: white;
  border: 2px solid gray;
  margin: 0 auto;
  overflow: hidden;
}

h2 {
  text-align: center;
}

#con {
  width: 100%;
  height: 400px;
  position: relative;
  top: -408px;
  border-collapse: collapse;
}

.row {
  height: 100px;
  width: 100%;
}

.cell {
  height: 100px;
  width: 100px;
  float: left;
  border: rgb(54, 74, 129) 1px solid;
}

.black {
  background: black;
}

.btn {
  width: 100%;
  text-align: center;
}

.start {
  margin: 20px auto;
  width: 150px;
  height: 50px;
  border-radius: 10px;
  background: yellowgreen;
  line-height: 50px;
  color: #fff;
}

ゲームの視覚的な側面を決定するCSSスタイルを定義しました。これらのスタイルには、メインゲームエリアのレイアウト、タイル（またはセル）の外観、および開始ボタンのスタイリングが含まれます。これらのスタイルを設定することで、ゲームを視覚的に魅力的にし、ゲーム盤や開始ボタンなど、プレイヤーがインタラクトするユーザーインターフェイス要素を定義しました。これらのスタイルは、ゲームを魅力的でプレイヤーにアクセスしやすいものにするために不可欠です。

✨ 解答を確認して練習

ゲームの初期化

このステップでは、index.js にゲームを動かすために必要なJavaScriptを書き始めます。まず、ゲームを初期化し、ゲームエリアの初期の行のセットを動的に作成するための start 関数と init 関数を作成します。

// Helper function to get element by ID
function $(id) {
  return document.getElementById(id);
}

// Function to create a div with a given class name
function createDiv(className) {
  var div = document.createElement("div");
  div.className = className;
  return div;
}

var gameStarted = false;

// Function to start the game
function start() {
  if (!gameStarted) {
    init();
  } else {
    alert("The game has already started, no need to click again!");
  }
}

// Initialize the game
function init() {
  gameStarted = true;
  for (var i = 0; i < 4; i++) {
    createRow();
  }
}

この段階では、JavaScriptを使ってゲームに生命を吹き込み始めました。書いたコードはゲームを初期化し、初期のタイルの行を作成するメカニズムをセットアップします。これには、DOM操作のためのヘルパー関数を定義し、複数回のゲーム開始を防ぐためのフラグを設定し、ゲームエリアに行を動的に追加するための基盤を整えることが含まれます。このステップは重要です。なぜなら、タイルが動き、プレイヤーがゲームに参加できるようになるゲームのインタラクティブな部分のために、ゲームのダイナミックな要素をセットアップしているからです。

✨ 解答を確認して練習

行の移動とゲームオーバーのチェック

JavaScriptの機能を拡張して、行を下方に移動させ、ゲームが終了したかどうかをチェックする機能を追加します。これには、行の位置を更新し、「踏まれていない」状態で許可された境界を超えた行があるかどうかをチェックするゲームループを作成する必要があります。

// index.js の続き

var speed = 6; // 移動する行の初期速度
var clock = null;

// 行を下方に移動させる
function move() {
  var con = $("con");
  var top = parseInt(window.getComputedStyle(con, null)["top"]);
  if (speed + top > 0) {
    top = 0;
  } else {
    top += speed;
  }
  con.style.top = top + "px";
  checkGameOver();
  if (top == 0) {
    createRow();
    con.style.top = "-102px";
    deleteRow();
  }
}

// ゲームが終了したかどうかをチェックする
function checkGameOver() {
  var con = $("con");
  var rows = con.childNodes;
  var conTop = parseInt(window.getComputedStyle(con, null)["top"]);
  var conHeight = con.offsetHeight;
  for (var i = 0; i < rows.length; i++) {
    var row = rows[i];
    var rowTop = conTop + i * row.offsetHeight;
    if (rowTop >= conHeight && row.passed !== 1) {
      fail();
      break;
    }
  }
}

ここでは、行を下方に移動させるロジックとゲームオーバー条件をチェックすることで、ゲームの機能を拡張しました。move 関数は行の位置を更新し、プレイヤーが踏まないようにするタイルの移動をシミュレートします。checkGameOver 関数は、「踏まれていない」状態でゲームエリアの下端を超えた行があるかどうかを監視し、それがゲームを終了させます。このステップでは、主なゲームプレイメカニズムとチャレンジが導入され、ゲームをインタラクティブで魅力的なものにします。

✨ 解答を確認して練習

得点計算と速度アップの実装

このステップでは、ゲームの得点計算メカニズムを実装し、プレイヤーの得点が増えるにつれて行の速度を上げる機能を追加します。これにより、ゲームにチャレンジ要素が追加され、面白さが増します。

// index.js の続き

// 得点を更新する
function score() {
  var newScore = parseInt($("score").innerHTML) + 1;
  $("score").innerHTML = newScore;
  if (newScore % 10 == 0) {
    speedUp();
  }
}

// 移動する行の速度を上げる
function speedUp() {
  speed += 2;
  if (speed == 20) {
    alert("Incredible speed!");
  }
}

このステップでは、ゲームの得点システムを実装し、プレイヤーの得点が増えるにつれて移動する行の速度を上げる機能を追加しました。これは、プレイヤーに対してそのパフォーマンスに関するフィードバックを提供するだけでなく、徐々にゲームの難易度を上げます。得点計算メカニズムは、白いタイルをうまく避けたプレイヤーに報酬を与え、速度の上昇はプレイヤーの反応速度を試すもので、ゲームをより面白くて競争的なものにします。

✨ 解答を確認して練習

ユーザーインタラクションの処理

タイルに対するユーザーのクリックを処理するロジックを実装します。プレイヤーは黒いタイルをクリックしたときに得点を獲得し、白いタイルをクリックしたときに負けます。

// index.js の続き

// プレイヤーの行動を判断する
function judge(ev) {
  ev = ev || event;
  if (ev.target.className.indexOf("black") !== -1) {
    ev.target.className = "cell";
    ev.target.parentNode.passed = 1;
    score();
  } else if (ev.target.className.indexOf("cell") !== -1) {
    fail();
  }
}

このステップでは、ゲーム内のユーザークリックを処理するための judge 関数を実装しました。プレイヤーがタイルをクリックすると、この関数はタイルが黒いかどうかを判断します。タイルが黒い場合（正しい操作）、通常のセルに変わり、得点が更新されます。タイルが黒くない場合（誤った操作）、ゲームオーバーのシーケンスがトリガーされます。この関数は、プレイヤーがタイルをクリックして行動を即座にフィードバックを受け取り、ゲームのインタラクティビティにとって重要です。

✨ 解答を確認して練習

行の作成と削除

タイルの新しい行を動的に作成し、最も古い行がもはや表示されなくなったときに削除する関数を開発して、ゲームを円滑に動作させます。

// index.js の続き

// 行内の黒いセルをランダムに割り当てる
function createCell() {
  var temp = ["cell", "cell", "cell", "cell"];
  var i = Math.floor(Math.random() * 4);
  temp[i] = "cell black";
  return temp;
}

// 新しいタイルの行を作成する
function createRow() {
  var con = $("con");
  var row = createDiv("row");
  var arr = createCell();
  for (var i = 0; i < 4; i++) {
    row.appendChild(createDiv(arr[i]));
  }
  if (con.firstChild == null) {
    con.appendChild(row);
  } else {
    con.insertBefore(row, con.firstChild);
  }
}

// 5行以上ある場合、最後の行を削除する
function deleteRow() {
  var con = $("con");
  if (con.childNodes.length == 6) {
    con.removeChild(con.lastChild);
  }
}

createRow 関数を追加して、ランダムな位置に1つの黒いタイルを持つタイルの行を動的に生成し、ゲームの予測不能性とチャレンジを高めました。deleteRow 関数は、もはや表示されなくなった最も古い行を削除し、ゲームのパフォーマンスを最適化し、ゲームエリアが未使用の要素で溢れないようにします。これらの関数は協働して、プレイヤーが対話できるタイルの連続的な流れを維持します。

✨ 解答を確認して練習

ゲームオーバーロジックの実装

ゲームが終了する条件を定義します。たとえば、白いタイルをクリックしたり、黒いタイルを逃したりする場合です。プレイヤーの最終得点を表示し、ゲームを再開するオプションを提供します。

// index.js の続き

// ゲームを終了する
function fail() {
  clearInterval(clock);
  gameStarted = false;
  confirm("Your final score is " + parseInt($("score").innerHTML));
  window.location.reload();
}

fail 関数を定義することで、ゲームが終了する条件を確立しました。この関数は、プレイヤーが誤った操作を行ったり、黒いタイルを逃したときに呼び出されます。ゲームループを停止し、プレイヤーの最終得点を表示し、新しいゲームを始めるためにページをリロードします。このステップは、誤りを避けるチャレンジやゲーム終了の決定性を含む、完全なゲーム体験を提供するために不可欠です。

✨ 解答を確認して練習

ゲームループの開始

画面を下方向に移動させ続けるメインゲームループを設定します。プレイヤーの得点に基づいて移動速度を調整して、難易度を上げます。

// index.js の続き

// ゲームループを開始する
function start() {
  if (!gameStarted) {
    init();
    clock = setInterval("move()", 30);
  }
}

move 関数を使ってメインゲームループを設定しました。この関数は、画面を下方向に連続的に移動させ、ゲームの進行をシミュレートします。プレイヤーの得点が上がるにつれて移動速度が上がり、ゲームの難易度が高まります。このループはゲームの心臓部であり、ゲームプレイを駆動し、徐々に速くなるペースにプレイヤーが追いつけるように挑戦します。

✨ 解答を確認して練習

イベントリスナーの追加

ゲームエリアにイベントリスナーを追加して、プレイヤーのアクション（たとえば、タイルをクリックする）を検出して応答します。

// index.js の続き

// メインゲームコンテナにイベントリスナーを追加する
$("main").onclick = function (ev) {
  judge(ev);
};

このステップでは、メインゲームエリアにイベントリスナーを追加し、プレイヤーのクリックに応答できるようにしました。この機能は、ユーザーインタラクションをキャプチャし、ゲームがプレイヤーの動きを処理してゲーム状態を適切に更新するために不可欠です。これが、ゲームをインタラクティブでプレイヤーのアクションに応答するものにするものです。

次の効果を確認するには、WebIDEの右下隅にある「Go Live」ボタンをクリックし、「Web 8080」タブに切り替えます。

✨ 解答を確認して練習

まとめ

このプロジェクトを完了することで、「白いタイルに踏まないで」という機能性のあるウェブベースのゲームを作成しました。このプロジェクトは、HTML、CSS、JavaScriptがどのように協働してインタラクティブなウェブコンテンツを作成するかを理解する上で役立つだけでなく、将来的により複雑なウェブベースのゲームを作成するための基礎を提供します。独自のゲームにするために、さまざまなスタイル、機能、機能性を試してみましょう。楽しいコーディングを！