Click here for free DL of the app version that can save data.

No:2389

1560

←

Prev Next

→

Simons Challenge
Developer User3153｜Date and time 23/6/21 8:54:38
Build time 29.766 sec｜Game capacity 5.244KB｜

Script

ご依頼ありがとうございます。以下はアプリのサンプル実装です。

サイモン

ゲーム説明：サイモンが光る順番を覚えて、それと同じ順番でボタンを押していくゲームです。

スタート

ストリクト

このアプリはサイモンというゲームを再現したものです。スマホ上で動作します。ゲーム開始前にランダムに光る順番を決め、その順番を覚えて同じ順番でボタンを押します。間違えた場合はミスと表示され、もう一度やり直すか、ストリクトモードではすべての順番が初期化されます。回答順番が正しい場合、次の回答が求められます。スマホのタッチ操作、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

Click here for free DL of the app version that can save data.

ご依頼ありがとうございます。以下はアプリのサンプル実装です。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>サイモン</title>
    <style>
      body {
        background-color: #333;
        color: white;
        font-size: 40px;
        text-align: center;
      }
      .button {
        display: inline-block;
        margin: 20px;
        padding: 30px;
        background-color: white;
        color: #333;
        border-radius: 50%;
        font-size: 60px;
      }
      #start {
        background-color: green;
      }
      #strict {
        background-color: red;
        color: white;
      }
      #score {
        font-size: 30px;
        margin-top: 50px;
      }
    </style>
  </head>
  <body>
    <h1>サイモン</h1>
    <p>ゲーム説明：サイモンが光る順番を覚えて、それと同じ順番でボタンを押していくゲームです。</p>
    <div class="button" id="green"></div>
    <div class="button" id="red"></div>
    <div class="button" id="yellow"></div>
    <div class="button" id="blue"></div>
    <div class="button" id="start">スタート</div>
    <div class="button" id="strict">ストリクト</div>
    <div id="score">0</div>
    <script>
      const simon = {
        sequence: [],
        index: 0,
        buttons: {
          green: document.getElementById('green'),
          red: document.getElementById('red'),
          yellow: document.getElementById('yellow'),
          blue: document.getElementById('blue'),
          start: document.getElementById('start'),
          strict: document.getElementById('strict')
        },
        playButton: function(button) {
          button.animate([
            { backgroundColor: 'white' }, 
            { backgroundColor: button.id }
          ], 500);
          let audio = new Audio(button.id + '.mp3');
          audio.play();
        },
        playSequence: function() {
          let i = 0;
          let interval = setInterval(function() {
            if (i == simon.sequence.length) {
              clearInterval(interval);
              simon.index = 0;
              simon.buttons.start.innerHTML = 'リスタート';
              return;
            }
            let buttonId = simon.sequence[i];
            let button = simon.buttons[buttonId];
            simon.playButton(button);
            i++;
          }, 1000);
        },
        checkButton: function(buttonId) {
          let expectedButtonId = simon.sequence[simon.index];
          if (buttonId != expectedButtonId) {
            alert('ミス！');
            if (simon.buttons.strict.classList.contains('on')) {
              simon.sequence = [];
            }
            simon.index = 0;
            simon.buttons.start.innerHTML = 'スタート';
            simon.updateScore();
            return;
          }
          simon.index++;
          if (simon.index == simon.sequence.length) {
            simon.index = 0;
            simon.buttons.start.innerHTML = '次へ';
            let random = Math.floor(Math.random() * 4);
            let buttonIds = Object.keys(simon.buttons);
            let nextButtonId = buttonIds[random];
            simon.sequence.push(nextButtonId);
            simon.updateScore();
          }
        },
        updateScore: function() {
          let score = document.getElementById('score');
          let value = simon.sequence.length - 1;
          score.innerHTML = value;
        }
      }
      for (let buttonId in simon.buttons) {
        let button = simon.buttons[buttonId];
        if (buttonId != 'start' && buttonId != 'strict') {
          button.addEventListener('click', function() {
            simon.playButton(button);
            simon.checkButton(buttonId);
          });
        } else {
          button.addEventListener('click', function() {
            if (buttonId == 'start') {
              if (simon.sequence.length == 0) {
                let random = Math.floor(Math.random() * 4);
                let buttonIds = Object.keys(simon.buttons);
                let nextButtonId = buttonIds[random];
                simon.sequence.push(nextButtonId);
              }
              simon.playSequence();
            } else if (buttonId == 'strict') {
              let strictButton = simon.buttons.strict;
              if (strictButton.classList.contains('on')) {
                strictButton.classList.remove('on');
                strictButton.innerHTML = 'ストリクト';
              } else {
                strictButton.classList.add('on');
                strictButton.innerHTML = 'ストリクトON';
              }
            }
          });
        }
      }
    </script>
  </body>
</html>