AI game creator

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

No:22843

←

Prev Next

→

あみだくじ
Developer バファリンヌ｜Date and time 23/10/25 22:53:19
Build time 73.71 sec｜Game capacity 4.3KB｜

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: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      user-select: none;
    }
    
    .ladder {
      display: flex;
      flex-direction: column;
    }
    
    .ladder .row {
      display: flex;
      justify-content: space-between;
    }
    
    .ladder .row .bar {
      width: 50px;
      height: 100px;
      background-color: #000;
      margin: 0 10px;
    }
    
    .ladder .row .bar.holed {
      background-color: #FFC107;
    }
    
    .ladder .row .position {
      width: 50px;
      height: 50px;
      background-color: #FF5722;
      position: relative;
    }
    
    .ladder .row .position .dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #fff;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    
    .ladder .row .position.start .dot {
      background-color: #4CAF50;
    }
    
    .ladder .row .position.goal .dot {
      background-color: #FFEB3B;
    }
    
    .ladder .row .position.active .dot {
      background-color: #E91E63;
    }
    
    .ladder .row .position.active .dot::before {
      content: "";
      width: 15px;
      height: 15px;
      border: 2px solid #E91E63;
      border-radius: 50%;
      position: absolute;
      top: -10px;
      left: -10px;
    }
  </style>
</head>
<body>
  <div class="ladder"></div>

function createLadder(columns, rows) {
      const ladder = document.querySelector('.ladder');

for (let i = 0; i < rows; i++) {
        const row = document.createElement('div');
        row.classList.add('row');

for (let j = 0; j < columns - 1; j++) {
          const bar = document.createElement('div');
          const isHoled = randomBool();
          bar.classList.add('bar');
          if (isHoled) {
            bar.classList.add('holed');
          }
          row.appendChild(bar);
        }

ladder.appendChild(row);
      }
    }

function createPositions(columns, rows) {
      const ladder = document.querySelector('.ladder');

for (let i = 0; i < rows + 1; i++) {
        const row = document.createElement('div');
        row.classList.add('row');

for (let j = 0; j < columns; j++) {
          const position = document.createElement('div');
          position.classList.add('position');
          if (i === 0 && j === 0) {
            position.classList.add('start');
          } else if (i === rows && j === columns - 1) {
            position.classList.add('goal');
          }
          const dot = document.createElement('div');
          dot.classList.add('dot');
          position.appendChild(dot);
          row.appendChild(position);
        }

ladder.appendChild(row);
      }
    }

function moveActivePosition() {
      const positions = document.querySelectorAll('.position');
      const activePosition = document.querySelector('.position.active');

const index = Array.from(positions).indexOf(activePosition);

if (index === positions.length - 1) {
        activePosition.classList.remove('active');
        return;
      }

const nextPosition = positions[index + 1];

activePosition.classList.remove('active');
      nextPosition.classList.add('active');
    }

function startGame() {
      const startBtn = document.querySelector('.start-game-btn');
      startBtn.style.display = 'none';
      const ladder = document.querySelector('.ladder');
      ladder.style.opacity = '1';
      ladder.style.pointerEvents = 'auto';
      const positions = document.querySelectorAll('.position');
      positions[0].classList.add('active');
      const intervalId = setInterval(moveActivePosition, 500);

positions[positions.length - 1].addEventListener('click', function() {
        clearInterval(intervalId);
        this.classList.add('active');
        alert('ゴールしました！');
      });
    }

function initGame() {
      createLadder(6, 5);
      createPositions(6, 5);
    }

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