＜画面を作る：HTMLとCSS＞
「見た目」だけをつくる
※以降、入力したら上書き保存をしてください
HTMLは「骨組み」
<div> は箱
<span> は文字を入れる小さい箱
idで名前、position: absoluteで画面上の自由な場所に配置できる
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>はじめてのゲーム</title>
<style>
body {
text-align: center;
background: #222;
color: white;
}
#game {
width: 600px;
height: 400px;
background: #333;
margin: 20px auto;
position: relative;
}
.enemy {
width: 40px;
height: 40px;
background: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<h1>クリックゲーム</h1>
<p>スコア: <span id=”score”>0</span></p>
<div id=”game”></div>
</body>
</html>
保存してダブルクリックすると、黒い画面が表示されます。
まだゲームとしてのうごきはありません。
＜ターゲットを表示する：JavaScript＞
</body> の直前に以下を追加します。
保存して更新すると、ターゲット（赤い丸）が表示されます
constは「変わらない箱」
functionは「命令をまとめたもの」
Math.random()は「0〜1のランダムな数」
setIntervalは「1秒ごとに実行」
<script>
const game = document.getElementById(“game”);
function spawnEnemy() {
const enemy = document.createElement(“div”);
enemy.classList.add(“enemy”);
const x = Math.random() * 560;
const y = Math.random() * 360;
enemy.style.left = x + “px”;
enemy.style.top = y + “px”;
game.appendChild(enemy);
}
setInterval(spawnEnemy, 1000);
</script>
＜クリックするとターゲットが消える：JavaScript部分を変更＞
保存して更新すると、ターゲット（赤い丸）が表示され、ターゲットをクリックすると消え、スコアが増えます
letは「変わる箱」
score++は「1増やす」 ※score—は？
addEventListenerは「クリックされたら実行」
<script>
const game = document.getElementById(“game”);
const scoreDisplay = document.getElementById(“score”);
let score = 0;
function spawnEnemy() {
const enemy = document.createElement(“div”);
enemy.classList.add(“enemy”);
const x = Math.random() * 560;
const y = Math.random() * 360;
enemy.style.left = x + “px”;
enemy.style.top = y + “px”;
enemy.addEventListener(“click”, () => {
score++;
scoreDisplay.textContent = score;
enemy.remove();
});
game.appendChild(enemy);
}
setInterval(spawnEnemy, 1000);
</script>
ゲームとしてのうごきがつきました
＜時間制限の追加：htmlとJavaScript部分を変更＞
ifは 「もし〜なら」
clearIntervalはタイマーを止める
<p>残り時間: <span id=”time”>30</span></p>
<script>
const game = document.getElementById(“game”);
const scoreDisplay = document.getElementById(“score”);
const timeDisplay = document.getElementById(“time”);
let score = 0;
let timeLeft = 30;
function spawnEnemy() {
const enemy = document.createElement(“div”);
enemy.classList.add(“enemy”);
const x = Math.random() * 560;
const y = Math.random() * 360;
enemy.style.left = x + “px”;
enemy.style.top = y + “px”;
enemy.addEventListener(“click”, () => {
score++;
scoreDisplay.textContent = score;
enemy.remove();
});
game.appendChild(enemy);
}
const gameInterval = setInterval(spawnEnemy, 800);
const timer = setInterval(() => {
timeLeft–;
timeDisplay.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(gameInterval);
clearInterval(timer);
alert(“ゲーム終了！スコア: ” + score);
}
}, 1000);
</script>
完成です
ターゲットの色を変更、ターゲットの大きさを変更、出現スピードの変更 などを実施してみましょう
＜よくあるトラブル＞
全角スペース、; の抜け、idの名前ミス