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

No:3096

1532

←

Prev Next

→

Games committed to results
Developer User3662｜Date and time 23/6/23 21:00:54
Build time 32.825 sec｜Game capacity 3.738KB｜

Script

結果にコミットするゲーム

クリックしてタイリングを開始してください。

プログラムの説明：このゲームは、25個のタイルをクリックし、最終的なスコアを決定するタイルゲームです。ユーザーは「スタート！」ボタンをクリックして、5秒後にすべてのタイルが絵文字「👍」で表示されるまで、25個のタイルをクリックする必要があります。得点は、絵文字「🤞」から「✅」に変更するたびに1ポイント増加します。ボタンをクリックするたびに、ユーザーはボードをリセットして、新しいゲームを開始できます。ユーザーはスマートフォンで簡単に操作できます。

←

Prev　Next

→ 　

Back　

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

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 {
        text-align: center;
        font-family: Arial, sans-serif;
      }
      
      h1 {
        font-size: 3em;
        margin-bottom: 0;
      }
      
      #score {
        font-size: 2em;
        margin-bottom: 5px;
      }
      
      button {
        background-color: #4CAF50;
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        text-decoration: none;
        display: inline-block;
        font-size: 16px;
        margin: 4px 2px;
        cursor: pointer;
        border-radius: 10px;
      }
      
      .game-board {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        border: 5px solid black;
        padding: 10px;
        border-radius: 10px;
        margin-top: 10px;
      }
      
      .game-tile {
        width: 80px;
        height: 80px;
        background-color: white;
        border: 2px solid black;
        border-radius: 10px;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 3em;
        cursor: pointer;
      }
      
      .game-tile:hover {
        background-color: lightgray;
      }
      
    </style>
  </head>
  <body>
    <h1>結果にコミットするゲーム</h1>
    <p>クリックしてタイリングを開始してください。</p>
    <button id="start-button">スタート！</button>
    <div class="game-board"></div>
    <p id="score"></p>
    
    <script>
      const gameBoard = document.querySelector('.game-board');
      const scoreDisplay = document.getElementById('score');
      const startButton = document.getElementById('start-button');
      const size = 25;
      let tiles = [];
      let score = 0;
      
      function createTiles() {
        for (let i = 0; i < size; i++) {
          const tile = document.createElement('div');
          tile.classList.add('game-tile');
          tile.innerText = '🤞';
          tile.addEventListener('click', () => {
            if (tile.innerText === '🤞') {
              tile.innerText = '✅';
              score++;
              scoreDisplay.innerText = `SCORE: ${score}`;
            }
          })
          tiles.push(tile);
          gameBoard.appendChild(tile);
        }
      }
      
      function resetBoard() {
        tiles.forEach(tile => {
          tile.innerText = '🤞';
        })
        score = 0;
        scoreDisplay.innerText = 'SCORE: 0';
      }
      
      startButton.addEventListener('click', () => {
        resetBoard();
        startButton.disabled = true;
        startButton.innerText = 'タイリング中...';
        setTimeout(() => {
          tiles.forEach(tile => {
            tile.innerText = '👍';
          })
          startButton.innerText = 'やり直す';
          startButton.disabled = false;
        }, 5000);
      })
      
      createTiles();
    </script>
  </body>
</html>

プログラムの説明：
このゲームは、25個のタイルをクリックし、最終的なスコアを決定するタイルゲームです。ユーザーは「スタート！」ボタンをクリックして、5秒後にすべてのタイルが絵文字「👍」で表示されるまで、25個のタイルをクリックする必要があります。得点は、絵文字「🤞」から「✅」に変更するたびに1ポイント増加します。ボタンをクリックするたびに、ユーザーはボードをリセットして、新しいゲームを開始できます。ユーザーはスマートフォンで簡単に操作できます。