このページでは公開済みのゲーム、スヤスヤ防衛ゲームのコードを公開&解説します！
HTML構造の概要
まず、HTML部分を見てみましょう。
<div id="gameInfo">
睡眠時間: <span id="score">00:00</span> | ライフ: <span id="lives">3</span>
</div>
<canvas id="gameCanvas"></canvas>
<button id="retryButton">リトライ</button>
<div id="gameInfo">は、プレイヤーの睡眠時間やライフを表示するセクションです。「スコア」や「ライフ」が変化するたびにJavaScript側でこの内容が更新され、リアルタイムでゲーム情報が表示される仕組みになっています。<canvas>はゲームのグラフィックを描画するための要素で、<button id="retryButton">は、ゲームオーバー後に再挑戦するためのボタンです。
CSSスタイル
次に、CSS部分について説明します。以下はその一部です。
#gameCanvas {
border: 1px solid black;
touch-action: none;
}
body {
display: flex;
flex-direction: column;
align-items: center;
background: #333;
}
#retryButton:hover {
background-color: #45a049;
}
#gameCanvasは、キャンバスのスタイルを設定し、ゲームエリアを黒い枠線で囲んでいます。また、touch-action: none;により、タッチスクリーンでも自由にプレイヤーを操作できるように設定されています。bodyは全体のレイアウトを中央揃えにし、background: #333;で背景色を濃い灰色にしています。さらに、#retryButton:hoverでは、ボタンにマウスを乗せた際に色が変わるようにして、視覚的なインタラクションを提供しています。
JavaScriptによるゲームロジック
JavaScript部分がゲームの心臓部です。以下のような構成で、各機能が実装されています。
1. 初期化と変数設定
JavaScriptでは、まず必要な要素を取得し、変数を設定しています。
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreElement = document.getElementById('score');
const livesElement = document.getElementById('lives');
const retryButton = document.getElementById('retryButton');
ここでは、HTMLから要素を取得し、スコアやライフの要素を更新できるようにしています。また、ctxはキャンバスの描画コンテキストで、2Dグラフィックスを描画するために使用されます。retryButtonも取得されており、ボタンの表示を制御するために利用されています。
2. 背景色の切り替え
このゲームでは、夜から夜明けにかけて背景色が変化する仕様になっています。
function getBackgroundColor(minutes) {
// 色の変更を行う処理
return `rgb(${Math.round(color.r)}, ${Math.round(color.g)}, ${Math.round(color.b)})`;
}
getBackgroundColor関数は、時間経過によって背景色が変化するようにしています。プレイヤーの進行状況に応じて夜から夜明けへと移り変わり、プレイヤーに達成感を与える演出となっています。
3. プレイヤーと敵の動き
ゲームの操作や敵の動きを定義する部分は、以下のようになっています。
document.addEventListener('keydown', (e) => {
if (e.key === 'ArrowLeft') moveLeft = true;
if (e.key === 'ArrowRight') moveRight = true;
});
canvas.addEventListener('touchstart', (e) => {
e.preventDefault();
touchStartX = e.touches[0].clientX;
});
ここでは、キーボードやタッチ操作に対応するイベントリスナーを設定しています。キーボードの矢印キーや、スマートフォンでのタッチ操作がプレイヤーの左右移動に反映されるようにし、直感的にプレイできるよう工夫されています。
以上が概要の説明になります。
一般的なシューティングゲームの実装ですが、今回少し工夫を加えた部分としてシューティングゲームの体験を損なわないようfpsレート固定を追加した部分などが挙げられます。
一方、簡単なゲームに仕上げるため今回のゲームには以下の仕様を取り入れませんでした。
・複雑な軌跡で移動する敵
・自機のパワーアップ
このあたりを追加したものを今後制作するかもしれません。