はじめに
プログラミングで何かを作る楽しさとは？
プログラミングって、なんだか難しそうだと思っていませんか？
「どこから始めればいいかわからない」と感じている方も多いかもしれません。
しかし、プログラミングは実はとても楽しいものです。自分でアイデアを形にし、動くものを作り出せるという達成感は格別です。
特に、簡単なゲームを作ることは初心者にとって素晴らしい経験になります。
ゲームを作ることで、プログラミングの基本的な考え方を学びながら、自分の作ったものが実際に動いて遊べるという喜びを味わうことができるからです。
今回の記事では、プログラミング初心者でも作れる「簡単なゲーム」である「モグラ叩き」を一緒に作っていきます。
わかりやすいステップに分けて説明するので、これを機に「自分でもできる！」という自信を持って、プログラミングの第一歩を踏み出してみましょう。
どんなゲームを作るのか？
今回作るゲームは、とてもシンプルで初心者向けの「モグラ叩き」です。
モグラ叩きは、画面上に現れるキャラクターをクリックして得点を稼ぐ、シンプルながらも楽しいゲームです。
プログラミングの基本的なスキルを使って、短時間で完成させることができます。
ゲームの流れは下記になります。
- 画面上にモグラ（キャラクター）がランダムに現れる
- プレイヤーはそれをクリックすることでポイントが加算される
- 制限時間内にどれだけ叩けたかでスコアが決まる
このゲームは、HTMLやCSS、そしてJavaScriptの基礎を学ぶのにピッタリです。
初心者でも理解しやすいシンプルなコードを使って、動くゲームを作り出す経験を楽しんでください。次のステップでは、ゲームを作るために必要な技術について簡単に説明していきます。
ゲーム作成に必要な基本技術
ゲームを作るために必要な技術は、実はそれほど多くありません。
今回は、以下の3つの技術を使って、簡単な「モグラ叩きゲーム」を作ります。
- HTML（HyperText Markup Language）
HTMLは、ウェブページの基本的な構造を作る言語です。今回のゲームでは、ゲーム画面のレイアウトや「モグラ」キャラクターを表示するための枠組みをHTMLで作ります。 - CSS（Cascading Style Sheets）
CSSは、HTMLで作ったゲームの見た目を整えるために使います。背景の色やモグラのデザイン、ゲーム全体のレイアウトをシンプルにスタイリングするための技術です。 - JavaScript
JavaScriptは、ウェブページに動きを加えるためのプログラミング言語です。今回のゲームでは、モグラがランダムに表示されたり、クリックしたときに得点が加算されるように、このJavaScriptを使ってゲームのロジックを実装します。
これらの技術は、ウェブ開発の基礎中の基礎でもあります。
このゲームを通じて、これらの技術がどのように連携して動くのかを理解できるはずです。次のステップでは、実際にHTMLでゲームの基本構造を作っていきましょう。
HTMLでゲームの基本構造を作ろう
まずは、ゲームの基本的な骨組みを作るために、HTMLを使ってシンプルなページを作りましょう。
ここでは、ゲームの画面やボタンを配置する部分を作成します。
HTMLファイルの作成
パソコンにテキストエディタ（VSCodeやメモ帳など）を開いて、以下のコードを入力して保存しましょう。
ファイル名は index.html にします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>モグラ叩きゲーム</title>
<style>
/* 後でCSSを使ってデザインしますが、まずは基本的な準備 */
body {
font-family: Arial, sans-serif;
text-align: center;
}
#game-board {
width: 300px;
height: 300px;
margin: 20px auto;
background-color: #f2f2f2;
position: relative;
}
.mole {
width: 50px;
height: 50px;
background-color: brown;
position: absolute;
border-radius: 50%;
display: none; /* 最初は表示しない */
}
</style>
</head>
<body>
<h1>モグラ叩きゲーム</h1>
<p>モグラをクリックしてポイントを稼ごう！</p>
<div id="game-board">
</div>
<button id="start-button">ゲームスタート</button>
<p>スコア: <span id="score">0</span></p>
<script>
// 次のステップでJavaScriptを追加します
</script>
</body>
</html>コードの解説
このコードは、基本的なHTMLの構造を持っています。
#game-board: ゲームのフィールド（モグラが現れる場所）です。300×300ピクセルのシンプルな四角形で、これが「モグラ叩き」の舞台となります。#start-button: ゲームを開始するためのボタン。#score: 現在のスコアを表示する部分です。モグラを叩くと、このスコアが増えていきます。
次のステップでは、CSSを使ってデザインを少し整え、JavaScriptを追加してゲームを動かしていきます。
CSSで見た目を整える
次に、CSSを使ってゲームのデザインを少し整えていきます。
ゲームをプレイする時に、見た目が整っているとより楽しくなるので、ここで基本的なデザインを加えていきましょう。
背景やモグラのスタイルを整える
先ほどのHTMLファイルに書いたスタイルを少し変更して、見た目を改善していきます。
次のCSSコードを使用して、ゲームのフィールドやモグラの見た目を調整します。
#game-board {
width: 300px;
height: 300px;
margin: 20px auto;
background-color: #e0e0e0;
position: relative;
border: 3px solid #333;
}
.mole {
width: 50px;
height: 50px;
background-color: #8B4513;
position: absolute;
border-radius: 50%;
cursor: pointer;
border: 2px solid #000;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
#score {
font-size: 24px;
font-weight: bold;
}CSSの解説
#game-board: ゲームの背景色を少し薄いグレーにして、周囲に黒い枠を追加しました。これでフィールドが見やすくなり、ゲーム感が出てきます。.mole: モグラ（キャラクター）のデザインも少し調整し、茶色い色と丸い形にして、「土の中から出てくるモグラ」のイメージを強化しています。また、モグラにマウスを合わせると「叩く」感じが出るように、cursor: pointerでクリック可能な見た目にしています。button: スタートボタンのデザインを少し強調し、押したくなるような感じにしています。ボタンをホバーしたときに色が変わる効果も追加しています。#score: スコア表示部分も大きくして、プレイヤーがわかりやすく確認できるようにしました。
これで、ゲームのフィールドやモグラのデザインが完成しました。
次はいよいよJavaScriptを使って、ゲームに動きを加えていきます！
JavaScriptでゲームの動きを実装する
ここからは、JavaScriptを使ってゲームに動きを加えます。
モグラがランダムに現れ、クリックすると得点が加算される仕組みを作りましょう。
JavaScriptの基本ロジック
次のJavaScriptコードを、先ほど作成したHTMLファイルの <script> タグの中に追加します。
const gameBoard = document.getElementById('game-board');
const startButton = document.getElementById('start-button');
const scoreDisplay = document.getElementById('score');
let score = 0;
let gameInterval;
// モグラをランダムな場所に追加する関数
function addMole() {
const mole = document.createElement('div');
mole.classList.add('mole');
const x = Math.random() * (gameBoard.clientWidth - 50);
const y = Math.random() * (gameBoard.clientHeight - 50);
mole.style.left = `${x}px`;
mole.style.top = `${y}px`;
gameBoard.appendChild(mole);
// モグラをクリックすると消えてスコアを加算
mole.addEventListener('click', () => {
score += 1;
scoreDisplay.textContent = score;
mole.remove(); // クリックされたモグラを消す
});
// 一定時間後に自動でモグラを消す
setTimeout(() => {
if (gameBoard.contains(mole)) {
mole.remove(); // モグラがクリックされなければ消える
}
}, 2000); // 2秒後に消える
}
// ゲームをスタートする
startButton.addEventListener('click', () => {
score = 0;
scoreDisplay.textContent = score;
// 1秒ごとにモグラを追加
gameInterval = setInterval(addMole, 1000);
// 10秒後にゲーム終了
setTimeout(() => {
clearInterval(gameInterval);
alert(`ゲーム終了！あなたのスコアは${score}です。`);
}, 10000); // 10秒間ゲームを続ける
});
コードの解説
- モグラの生成:
addMole()関数で、モグラをランダムな位置に追加しています。新しく<div>要素を作成してモグラとして扱い、ゲームボード上に追加します。 - クリックでモグラを削除: プレイヤーがモグラをクリックすると、スコアが加算され、そのモグラは
mole.remove()によって削除されます。 - 時間が経過したモグラを自動削除: モグラがクリックされずに2秒経過すると、モグラは自動的に消えるように
setTimeout()を使用しています。 - ゲームの開始と終了: 「ゲームスタート」ボタンを押すと、1秒ごとにモグラが現れるように
setInterval()が実行されます。そして10秒後にゲームが終了し、プレイヤーのスコアが表示される仕組みです。
動作確認
すべてのコードをHTMLファイルに保存してブラウザで開くと、ゲームが動作するはずです。
「ゲームスタート」ボタンを押すと、モグラがランダムに現れ、クリックするたびにスコアが増えていきます。10秒後にゲームが終了し、スコアが表示されます。
ゲームを改良しよう
ゲームが完成しましたが、ここからさらに楽しくするためにいくつかの改良アイデアを提案します。
これらを実装することで、プログラミングのスキルを磨くことができ、ゲームもより面白くなります。
スコア機能を強化する
- ハイスコアを保存: ローカルストレージを使って、プレイヤーが今までに取った最高得点を保存し、次回以降のプレイで比較できるようにする機能を追加することができます。
- コンボボーナス: モグラを連続して素早く叩いた場合に、追加のポイントが入る「コンボボーナス」機能を追加すると、さらにスリルが増します。
難易度を調整する
- モグラのスピードを変える: ゲームが進むごとにモグラが現れる速度が速くなるなど、難易度を調整する機能を追加できます。これは、初心者から中級者まで楽しめる内容にするための良い工夫です。
- 複数のモグラ: 画面に複数のモグラが同時に現れるようにすることで、プレイヤーにさらに難しい挑戦を与えることができます。
グラフィックを向上させる
- カスタム画像の使用: モグラや背景にカスタム画像を追加することで、よりプロフェッショナルな見た目に仕上げることができます。例えば、動物キャラクターやアニメーションを追加して、より魅力的なゲームにすることが可能です。
これらの改良を行うことで、単純なモグラ叩きゲームがより魅力的で奥深いものになります。
プログラミングを学びながら、自分のアイデアをどんどん加えて、ゲームを成長させてください。
まとめ
今回のプロジェクトでは、簡単な「モグラ叩きゲーム」を作りながら、HTML、CSS、JavaScriptの基礎を学びました。
最初は小さなプログラムでも、自分で動くものを作ることで得られる達成感は大きいですよね。
このゲームを作ることで、次のステップへの自信を得られたのではないでしょうか。
さらにスキルを磨きたい方は、今回学んだ内容を基にして、もっと複雑なゲームやウェブアプリに挑戦してみましょう。
また、プログラミングスクールやオンラインのリソースを活用して、ステップアップを目指すのもおすすめです。
プログラミングの世界は無限に広がっています。
ぜひ次のプロジェクトにもチャレンジして、どんどん自分のアイデアを形にしていってください！
