はじめに
このプロジェクトでは、HTML、CSS、JavaScript を使って面白く簡単なブロック回避ゲームを作成します。このゲームでは、ブロックを動かし、プレイヤーは黒いブロックをクリックして得点を獲得し、白いブロックをクリックしないようにします。一歩一歩、作成していきましょう！
👀 プレビュー
🎯 タスク
このプロジェクトで学ぶことは以下の通りです。
- HTML を使ってゲームのレイアウトをデザインする方法
- CSS を使ってゲームにスタイリングを追加する方法
- JavaScript を使って基本的なゲームロジックを実装する方法
- ゲームを初期化し、最初のブロックのセットを作成する方法
- ゲームプレイ機能を実装する方法（ブロッククリック検出、ゲームオーバーシナリオ、ブロック作成、移動など）
- ゲームの得点計算と速度管理を完了する方法
🏆 成果
このプロジェクトを完了すると、以下のことができるようになります。
- HTML を使ってウェブレイアウトをデザインする
- CSS を使ってスタイリング技術を適用する
- JavaScript を使ってゲームロジックを実装する
- ドキュメントオブジェクトモデル（DOM）を操作する
- イベントとユーザーインタラクションを処理する
- ゲーム状態変数を作成して管理する
- ゲーム表示を動的に変更して更新する
- ゲーム実装をテストしてデバッグする
HTML を使ったゲームレイアウトの設計
要件：
index.htmlファイルを開く。- HTML タグと構造に慣れていること。
機能：
- メインゲームコンテナをレイアウトする。
- ゲームの得点を表示する。
- ゲームを開始するためのスタートボタンを提供する。
手順：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>白いブロックを避けろ</title>
<link rel="stylesheet" href="styles.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"
<!-- スタートボタン -->
</div>
</body>
<script src="script.js"></script>
</html>
上記のコードでは、ゲーム用の基本的な HTML 構造を作成しました。id="main" の div がゲームコンテナになります。ゲームコンテナの中には、id="con" の別の div があり、これがプレイヤーになります。また、class="start" の button を作成し、これを使ってゲームを開始します。
ゲームにスタイリングを追加する
要件：
styles.cssファイルを開く。- CSS プロパティとセレクタの基本的な知識。
- レスポンシブデザインのスタイリング技術の理解。
機能：
- ゲームの視覚的魅力を高める。
- ゲームインターフェイスを様々な画面サイズに対応させる。
手順：
body {
background-color: #f0f0f0;
font-family: "Arial", sans-serif;
}
h2 {
text-align: center;
color: #333;
margin-bottom: 8px;
}
#main {
width: 408px;
height: 408px;
background: white;
border: 8px solid #ccc;
border-radius: 10px;
/* 柔らかい見た目にするために border-radius を追加 */
margin: 20px auto;
overflow: hidden;
position: relative;
/* 子要素の配置のために relative positioning を追加 */
}
#con {
width: 100%;
height: 400px;
position: absolute;
/* absolute に変更 */
top: -408px;
}
.row {
height: 100px;
width: 100%;
}
.cell {
height: 100px;
width: 100px;
float: left;
border-bottom: rgb(200, 200, 200) 1px solid;
/* 明るいボーダーカラー */
}
.black {
background: #444;
/* 柔らかい見た目にするために黒代わりに暗グレー */
}
.btn {
width: 100%;
text-align: center;
margin-top: 20px;
}
.start {
margin: 20px auto;
width: 150px;
height: 50px;
border-radius: 25px;
/* ピル形状にするために border-radius を増やす */
background: #4caf50;
/* 緑色のボタン */
color: #fff;
font-size: 16px;
/* フォントサイズを増やす */
border: none;
/* デフォルトのボーダーを削除 */
cursor: pointer;
/* カーソルエフェクト */
transition: background 0.3s;
/* トランジションエフェクト */
}
.start:hover {
background: #45a049;
/* ホバー時の暗い緑色 */
}
上記のコードでは、ゲームにいくつかの基本的なスタイリングを追加しました。body に背景色を追加し、テキストにフォントファミリを追加しました。また、ゲームコンテナに border radius を追加して柔らかい見た目にしました。ゲームコンテナに position: relative を追加し、プレイヤーに position: absolute を追加しました。これにより、ゲームコンテナ内にプレイヤーを配置できるようになります。また、スタートボタンにトランジションエフェクトを追加しました。
基本的なゲームロジックを実装する
要件：
script.jsファイルを開く。- JavaScript の基本を初步的に把握していること。
- ドキュメントオブジェクトモデル（DOM）の概念を理解していること。
機能：
- 必須のユーティリティ関数を設定する。
- 重要なゲーム状態変数を初期化する。
手順：
// ユーティリティ関数と初期変数の設定
// id で要素を取得する
function $(id) {
return document.getElementById(id);
}
// 与えられたクラス名で div 要素を作成する
function creatediv(className) {
var div = document.createElement("div");
div.className = className;
return div;
}
// 最初は間隔 ID を null に設定する
var clock = null;
// ゲームの状態（0 は停止、1 は開始を意味する）
var state = 0;
// ゲームブロックの移動速度
var speed = 6;
// ゲームが開始したかどうかをチェックするフラグ
var flag = false;
上記のコードでは、2 つのユーティリティ関数を作成しました。最初の関数 $(id) は id で要素を取得するために使用されます。2 番目の関数 creatediv(className) は与えられたクラス名で div 要素を作成するために使用されます。また、ゲームの後半で使用されるいくつかの変数を初期化しました。
ゲームを初期化する
要件：
- JavaScript 関数を作成できる能力。
- JavaScript イベントリスナーに慣れていること。
機能：
- ゲームを起動準備完了状態にする。
- ゲームの初期ブロックセットを作成する。
手順：
// ゲームを開始するためのスタートゲームボタンをクリックする
function start() {
if (!flag) {
init();
} else {
alert(
"ゲームは既に開始されています！もう一度クリックする必要はありません！"
);
}
}
// 初期化（init）関数
function init() {
flag = true;
for (var i = 0; i < 4; i++) {
createrow();
}
// addEventListener を使ってイベントリスナーを追加する
$("main").addEventListener("click", function (ev) {
judge(ev);
});
// タイマーが 30 ミリ秒ごとに move() を呼び出す
clock = setInterval(move, 30);
}
上記のコードでは、スタートボタンがクリックされたときに呼び出される start() 関数を作成しました。start() 関数の中で、ゲームを初期化する init() 関数を呼び出しています。init() 関数の中では、ゲームが開始されたかどうかをチェックするために flag 変数を true に設定しています。また、createrow() 関数を使って 4 行のブロックを作成しています。ゲームコンテナにイベントリスナーも追加しており、ゲームコンテナ上のクリックイベントを検出するために使用されます。また、30 ミリ秒ごとに move() 関数を呼び出すタイマーも設定しています。
ゲームプレイ機能を実装する
要件：
- JavaScript のループと条件分岐に精通していること。
- JavaScript を使って DOM を操作する方法を知っていること。
機能：
- ゲームの核心となるダイナミクスを作成する。
- ゲームオーバーのシナリオを設計する。
- ブロックの作成と移動のメカニズムを実装する。
手順：
- プレイヤーが黒いブロックまたは白いブロックをクリックしたかどうかを確認する。プレイヤーのクリックに基づいてゲーム状態を更新する。
// 黒いブロックまたは白いブロックをクリックしたかどうかを判断する
function judge(ev) {
if (
ev.target.className.indexOf("black") == -1 &&
ev.target.className.indexOf("cell") !== -1
) {
ev.target.parentNode.pass1 = 1; // pass 属性を定義し、この行の白いブロックがクリックされたことを示す
}
if (ev.target.className.indexOf("black") !== -1) {
// クラス名に black が含まれるターゲットをクリックすると、黒いブロックになる
ev.target.className = "cell";
ev.target.parentNode.pass = 1; // pass 属性を定義し、この行の黒いブロックがクリックされたことを示す
score();
}
}
- プレイヤーの操作に基づいてゲームが終了するタイミングを判断する。ゲームが終了したときにゲーム終了アクションをトリガーする。
// ゲームが終了したかどうかを確認する
function over() {
var rows = con.childNodes;
if (rows.length == 5 && rows[rows.length - 1].pass !== 1) {
fail();
}
for (let i = 0; i < rows.length; i++) {
if (rows[i].pass1 == 1) {
fail();
}
}
}
// ゲームオーバー
function fail() {
clearInterval(clock);
flag = false;
confirm("最終得点は " + parseInt($("score").innerHTML) + " です");
var con = $("con");
con.innerHTML = "";
$("score").innerHTML = 0;
con.style.top = "-408px";
}
- ゲームプレイ用のブロックの行を生成する。他のブロックの中に「黒い」ブロックをランダムに配置する。
// <div class="row"> とその子要素 <div class="cell"> を作成する
function createrow() {
var con = $("con");
var row = creatediv("row"); // div を作成：className=row
var arr = createcell(); // div cell のクラス名を定義し、その中の 1 つは cell black
con.appendChild(row); // row を子ノードとして con に追加
for (var i = 0; i < 4; i++) {
row.appendChild(creatediv(arr[i])); // row cell の子ノードを追加
}
if (con.firstChild == null) {
con.appendChild(row);
} else {
con.insertBefore(row, con.firstChild);
}
}
// クラス名の配列を作成する; その中の 1 つは "cell black"、他は "cell"
function createcell() {
var temp = ["cell", "cell", "cell", "cell"];
var i = Math.floor(Math.random() * 4); // 黒いブロックの位置をランダムに生成する Math.random() 関数のパラメータは 0~1 の乱数
temp[i] = "cell black";
return temp;
}
- ブロックを連続的に下に移動させる。古い行が画面外に移動したときに削除する。
// 黒いブロックを下に移動させる
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"; // 上の値を動かし続けて移動させる
over();
if (top == 0) {
createrow();
con.style.top = "-102px";
delrow();
}
}
// 行を削除する
function delrow() {
var con = $("con");
if (con.childNodes.length == 6) {
con.removeChild(con.lastChild);
}
}
ゲームのスコア計算と速度管理を完成させる
要件：
- JavaScript の変数と算術演算を理解していること。
- JavaScript で複雑なゲームロジックを記述できる能力。
機能：
- 報酬システムを確立する。
- ゲームの難易度を段階的に上げるシステムを作成する。
手順：
// 加速関数、速度を上げる
function speedup() {
speed += 2;
if (speed == 20) {
alert("すごい！");
}
}
// スコア計算
function score() {
var newscore = parseInt($("score").innerHTML) + 1; // ポイントを 1 増やす
$("score").innerHTML = newscore; // スコアを変更する
if (newscore % 10 == 0) {
// 分数が 10 の倍数のときに加速関数を使う、だんだんと速くなる
speedup();
}
}
上記のコードでは、ゲームの速度を上げるために使用される speedup() 関数を作成しました。また、ゲームのスコアを増やすために使用される score() 関数も作成しました。また、score() 関数に条件を追加しており、スコアが 10 の倍数のときに speedup() 関数を呼び出します。
あなたのゲームをテストする
- ウェブブラウザで
index.htmlを開く。
- ゲームをプレイし、すべての機能が期待通りに機能することを確認する。
- ページの効果は以下の通りです。
まとめ
素晴らしい仕事です！あなたはこれまで HTML、CSS、JavaScript を使って、ゼロから簡単で面白いブロック回避ゲームを作成しました。このプロジェクトでは、ユーザーインタラクションの処理、ゲームロジック、およびゲーム状態の変化に基づく動的な CSS スタイリングについて学びました。あなたはこの基本ゲームにレベル、時間制限、またはさまざまな難易度モードなど、さらに多くの機能を追加することができます。新しいゲームを実験して楽しんでください！
