今回は、スコア機能を中心としたミニゲームのロジック構築を行った。
まず、変数「スコア」を作成し、イベント「旗が押されたとき」に0へ初期化する処理を実装した。これにより、ゲーム開始時の状態リセットを確立した。
次に、アイテム（★）側に「ずっと」ループを配置し、「もしプレイヤーに触れたなら」という条件分岐を組み込んだ。接触判定によってスコアを1ずつ加算する処理を実装した。
初期段階では、接触中にスコアが連続加算される問題が発生した。これに対し、
・「0.2秒待つ」による判定間隔の調整
・加算後に座標を変更する処理の追加
を行い、多重判定を防止した。
さらに、座標を固定値から「-200〜200」「-150〜150」の乱数へ変更し、アイテムの出現位置をランダム化した。これにより、ゲーム性と再現性を向上させた。
最後に、「もしスコア＝10なら」という条件分岐を追加し、クリア判定を実装した。これにより、開始・加点・再配置・終了条件までを含む基本的なゲーム構造を完成させた。
実装した技術要素
・変数による状態管理
・イベント駆動型処理
・無限ループ（ずっと）
・条件分岐（もし〜なら）
・乱数による動的配置
・ロジック不具合の修正対応
今回の制作では、機能追加だけでなく、不具合の発生と修正を通じて処理構造の理解を深めることができた。
基礎的なゲームロジックを一通り構築したことが成果である。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Score Game</title>
<style>
#player, #star {
width: 40px;
height: 40px;
position: absolute;
}
#player {
background: blue;
left: 100px;
top: 100px;
}
#star {
background: gold;
}
</style>
</head>
<body>
<h2>スコア: <span id="score">0</span></h2>
<div id="player"></div>
<div id="star"></div>
<script>
let score = 0;
const player = document.getElementById("player");
const star = document.getElementById("star");
const scoreDisplay = document.getElementById("score");
// ランダム配置
function moveStar() {
const x = Math.random() * (window.innerWidth - 40);
const y = Math.random() * (window.innerHeight - 40);
star.style.left = x + "px";
star.style.top = y + "px";
}
// 当たり判定
function checkCollision() {
const p = player.getBoundingClientRect();
const s = star.getBoundingClientRect();
if (
p.left < s.right &&
p.right > s.left &&
p.top < s.bottom &&
p.bottom > s.top
) {
score++;
scoreDisplay.textContent = score;
moveStar();
}
}
// 矢印キーで移動
document.addEventListener("keydown", (e) => {
let step = 10;
let top = player.offsetTop;
let left = player.offsetLeft;
if (e.key === "ArrowUp") player.style.top = (top - step) + "px";
if (e.key === "ArrowDown") player.style.top = (top + step) + "px";
if (e.key === "ArrowLeft") player.style.left = (left - step) + "px";
if (e.key === "ArrowRight") player.style.left = (left + step) + "px";
checkCollision();
});
// 初期配置
moveStar();
</script>
</body>
</html>
完成イメージ（変更部分だけ）
if (
p.left < s.right &&
p.right > s.left &&
p.top < s.bottom &&
p.bottom > s.top
) {
score++;
scoreDisplay.textContent = score;
moveStar();
if (score >= 10) {
alert("クリア！");
}
}