執筆者のプログラミングレベル

プログラミング入門レベルを学習して3ケ月。
HTML,CSS,Javascriptを学習。
プログラミング練習としてホームページの模写コーディングも実装済み。

【楽しい学習方法】何か簡単なゲームやアプリを作る

せっかく学習をしたからには、何か面白いものを作成しながら勉強していきたいと思いました。
今回は「クリックゲーム」を作成してみました。
まだまだ技術力不足ですが、何かを作成していくことは楽しい学習方法だと感じています。

作成画面

ソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>クリックゲーム</title>
  <style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      margin: 0;
      background-color: #f0f0f0;
      font-family: Arial, sans-serif;
    }

    .container {
      text-align: center;
    }

    .game-info {
      padding: 20px;
      background-color: #3498db;
      border-radius: 10px;
      color: white;
    }

    #clicker, #start, #reset {
      font-size: 1.5em;
      padding: 10px 20px;
      margin: 10px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
    }

    #clicker:disabled {
      background-color: #bdc3c7;
      cursor: not-allowed;
    }

    #reset {
      background-color: #e74c3c;
    }

    #reset:hover {
      background-color: #c0392b;
    }

    #start {
      background-color: #27ae60;
    }

    #start:hover {
      background-color: #219d54;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="game-info">
      <h1>クリックゲーム</h1>
      <button id="clicker" disabled>クリックボタン</button>
      <div id="score">クリック数: 0</div>
      <div id="timer">残り時間: 10 秒</div>
      <button id="start" onclick="startGame()">スタート</button>
      <button id="reset" onclick="resetGame()">リセット</button>
    </div>
  </div>

  <script>
    let score = 0;
    let timer = 10;
    let timerInterval;

    const startButton = document.getElementById('start');
    const clickerButton = document.getElementById('clicker');
    const scoreDisplay = document.getElementById('score');
    const timerDisplay = document.getElementById('timer');

    clickerButton.addEventListener('click', () => {
      score++;
      scoreDisplay.textContent = `クリック数: ${score}`;
    });

    function startGame() {
      score = 0;
      timer = 10;
      scoreDisplay.textContent = `クリック数: ${score}`;
      timerDisplay.textContent = `残り時間: ${timer} 秒`;

      clickerButton.disabled = false;
      startButton.disabled = true;

      timerInterval = setInterval(() => {
        timer--;
        timerDisplay.textContent = `残り時間: ${timer} 秒`;

        if (timer === 0) {
          clearInterval(timerInterval);
          clickerButton.disabled = true;
          startButton.disabled = false;
          alert('ゲーム終了！');
        }
      }, 1000);
    }

    function resetGame() {
      clearInterval(timerInterval);
      window.location.reload();
    }
  </script>
</body>
</html>

学習目的

プログラミング学習をしてIT転職を考えている。
プログラミングは楽しいので、Web系のエンジニアなどの転職を視野に入れている。

今後の学習内容

HTML,CSS,Javascriptで何かゲームやアプリを作成しながら学習していきたい。
転職活動にはポートフォリオが必要ですが、最終的には質の高いポートフォリオ作成を目指したいです。

気になる学習サイト

javascriptで簡単なゲームを作成しているのを紹介しているサイトです。