プログラミングで作ったゲーム２つを公開！プログラミング初心者向け

今回は、タイピングゲームと熊を捕まえるゲームのソースコードを公開します。

■タイピングゲーム
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>Typing Game!</title>
  <style>
  body {
    padding-top: 40px;
    font-family: 'Courier New', sans-serif;
    text-align: center;
  }
  #target {
    font-size: 48px;
    letter-spacing: 3px;
  }
  .info {
    color: #ccc;
  }
  </style>
</head>
<body>
  <p id="target"></p>
  <p class="info">
    Letters count: <span id="score"></span>,
    Miss count: <span id="miss"></span>,
    Remaining Time: <span id="timer"></span>
  </p>
  <script>
  (function() {
    'use strict';

    var words = [
      'apple',
      'facebook',
      'google',
      'microsoft',
      'java',
      'c',
      'python',
      'ruby',
      'javascript',
      'php',
      'perl',
      'scala',
      'scratch',
      'go',
      'stevejobs',
      'markzuckerberg',
      'larrypage',
      'billgates',
    ];
    var currentWord;
    var currentLocation;
    var score;
    var miss;
    var timer;
    var target = document.getElementById('target');
    var scoreLabel = document.getElementById('score');
    var missLabel = document.getElementById('miss');
    var timerLabel = document.getElementById('timer');
    var isStarted;
    var timerId;

    function init() {
      currentWord = 'click to start';
      currentLocation = 0;
      score = 0;
      miss = 0;
      timer = 60;
      target.innerHTML = currentWord;
      scoreLabel.innerHTML = score;
      missLabel.innerHTML = miss;
      timerLabel.innerHTML = timer;
      isStarted = false;
    }

    init();

    function updateTimer() {
      timerId = setTimeout(function() {
        timer--;
        timerLabel.innerHTML = timer;
        if (timer <= 0) {
          // alert('game over');
          var accuracy = (score + miss) === 0 ? '0.00' : ((score / (score + miss)) * 100).toFixed(2);
          alert(score + ' letters, ' + miss + ' miss! ' + accuracy + ' % accuracy');
          clearTimeout(timerId);
          init();
          return;
        }
        updateTimer();
      }, 1000);
    }

    function setTarget() {
      currentWord = words[Math.floor(Math.random() * words.length)];
      target.innerHTML = currentWord;
      currentLocation = 0;
    }

    window.addEventListener('click', function() {
      if (!isStarted) {
        isStarted = true;
        setTarget();
        updateTimer();
      }
    });

    window.addEventListener('keyup', function(e) {
      if (!isStarted) {
        return;
      }
      // e.keyCode
      // console.log(String.fromCharCode(e.keyCode));
      if (String.fromCharCode(e.keyCode) === currentWord[currentLocation].toUpperCase()) {
        currentLocation++;
        var placeholder = '';
        for (var i = 0; i < currentLocation; i++) {
          placeholder += '_';
        }
        target.innerHTML = placeholder + currentWord.substring(currentLocation);
        // console.log('score!');
        score++;
        scoreLabel.innerHTML = score;
        if (currentLocation === currentWord.length) {
          setTarget();
        }
      } else {
        // console.log('miss!');
        miss++;
        missLabel.innerHTML = miss;
      }
    });

  })();
  </script>
</body>
</html>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

以下
タイピングゲームの開始時画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/297364/60c654b1-89a3-2718-64ec-2ce1b23c0e92.png)
タイピングゲームの打ち込み時画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/297364/4aa005f7-3337-7bb6-8dd9-4bd196cfe30f.png)
タイピングゲームの終了時画面
![image.png](https://qiita-image-store.s3.amazonaws.com/0/297364/f5d44457-7498-9927-6810-27eadefe161d.png)