AI game creator

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

No:18826

←

Prev Next

→

Message
Developer User7816｜Date and time 23/9/30 18:50:34
Build time 18.528 sec｜Game capacity 4.631KB｜

Script

Конечно! Я могу создать игру-головоломку для вас. Вот пример реализации:

Этот код создает игру-головоломку, где вам нужно перетаскивать пиктограммы на сетке, чтобы они совпадали. Пиктограммы могут быть изображены в виде эмодзи. Вы можете запустить игру, открыв этот HTML-файл в веб-браузере на смартфоне. Удачной игры!

←

Prev　Next

→ 　

Back　

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

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

Конечно! Я могу создать игру-головоломку для вас. Вот пример реализации:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Игра-головоломка</title>
</head>
<body>
  <script>
    // Создаем массив с пиктограммами
    var pictograms = [
      '🐶', '🐱', '🐭', '🐹', '🐰', '🐻', '🐼', '🐨', '🐯', '🦁',
      '🐮', '🐷', '🐸', '🐙', '🐵', '🐔', '🐧', '🐦', '🐤', '🦆'
    ];

// Перемешиваем массив с помощью алгоритма Фишера–Йетса
    function shuffleArray(array) {
      for (var i = array.length - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var temp = array[i];
        array[i] = array[j];
        array[j] = temp;
      }
      return array;
    }

// Создаем сетку игры
    function createGrid(size) {
      var grid = document.createElement('div');
      grid.classList.add('grid');
      for (var i = 0; i < size; i++) {
        var tile = document.createElement('div');
        tile.classList.add('tile');
        tile.dataset.position = i;
        tile.dataset.pictogram = '';
        grid.appendChild(tile);
      }
      return grid;
    }

// Стартовая функция для запуска игры
    function startGame(size) {
      var shuffledPictograms = shuffleArray(pictograms);
      var grid = createGrid(size);

var tiles = grid.querySelectorAll('.tile');

// Заполняем сетку пиктограммами
      for (var i = 0; i < size; i++) {
        tiles[i].dataset.pictogram = shuffledPictograms[i];
        tiles[i].innerText = shuffledPictograms[i];
      }

// Добавляем обработчики событий для перетаскивания
      tiles.forEach(function(tile) {
        tile.addEventListener('dragstart', handleDragStart, false);
        tile.addEventListener('dragenter', handleDragEnter, false);
        tile.addEventListener('dragover', handleDragOver, false);
        tile.addEventListener('dragleave', handleDragLeave, false);
        tile.addEventListener('drop', handleDrop, false);
        tile.addEventListener('dragend', handleDragEnd, false);
      });

// Добавляем сетку на страницу
      document.body.appendChild(grid);
    }

// Обработчики событий для перетаскивания
    function handleDragStart(e) {
      this.classList.add('tile--dragging');
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.innerHTML);
    }

function handleDragEnter(e) {
      this.classList.add('tile--over');
    }

function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      e.dataTransfer.dropEffect = 'move';
      return false;
    }

function handleDragLeave(e) {
      this.classList.remove('tile--over');
    }

function handleDragEnd(e) {
      this.classList.remove('tile--dragging');
      this.classList.remove('tile--over');
    }

// Запускаем игру с размером сетки 16х16
    startGame(16);
  </script>
  <style>
    .grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      grid-template-rows: repeat(4, 1fr);
      gap: 10px;
      margin: 100px auto;
      width: 300px;
      height: 300px;
    }

.tile {
      background-color: #e9e9e9;
      border-radius: 5px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      user-select: none;
      cursor: move;
    }

.tile:hover {
      background-color: #c8c8c8;
    }

.tile--dragging {
      opacity: 0.5;
    }

.tile--over {
      background-color: #a6a6a6;
    }
  </style>
</body>
</html>
```

Этот код создает игру-головоломку, где вам нужно перетаскивать пиктограммы на сетке, чтобы они совпадали. Пиктограммы могут быть изображены в виде эмодзи. Вы можете запустить игру, открыв этот HTML-файл в веб-браузере на смартфоне. Удачной игры!