Moving Numbers's game | AI game creator

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

No:50380

75

Moving Numbers
Developer User21309｜Date and time 24/3/8 15:46:04
Build time 6.212 sec｜Game capacity 1.63KB｜

→ 　

0　

0　

[PR]現在の人気グッズランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Двигающиеся числа</title>
<style>
  body {
    font-family: Arial, sans-serif;
    text-align: center;
  }
  #container {
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
  }
  .number {
    margin: 0 10px;
    cursor: pointer;
    transition: transform 0.3s;
  }
</style>
</head>
<body>
<div id="container"></div>

<script>
  const container = document.getElementById('container');
  let numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
  
  const shuffleNumbers = () => {
    numbers.sort(() => Math.random() - 0.5);
    renderNumbers();
  };
  
  const renderNumbers = () => {
    container.innerHTML = '';
    numbers.forEach(number => {
      const numberElement = document.createElement('div');
      numberElement.textContent = number;
      numberElement.classList.add('number');
      numberElement.addEventListener('click', () => {
        if (isMoveable(number)) {
          moveNumber(number);
        }
      });
      container.appendChild(numberElement);
    });
  };
  
  const isMoveable = (number) => {
    const index = numbers.indexOf(number);
    return (index === 0 || index === numbers.length - 1);
  };
  
  const moveNumber = (number) => {
    const index = numbers.indexOf(number);
    const newIndex = index === 0 ? numbers.length - 1 : 0;
    numbers.splice(newIndex, 0, numbers.splice(index, 1)[0]);
    renderNumbers();
  };
  
  shuffleNumbers();
</script>
</body>
</html>