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

No:13850

←

Prev Next

→

Comic Creator
Developer User6030｜Date and time 23/8/30 4:50:19
Build time 11.978 sec｜Game capacity 2.059KB｜

Script

Comic Creator Game

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
  <title>Comic Creator Game</title>
</head>
<body>
  <h1>Comic Creator Game</h1>
  
  <div id="canvas"></div>
  <button id="drawButton">Нарисовать</button>
  
  <script>
    const characters = [
      {
        name: 'Персонаж 1',
        image: 'pictogram1.png',
      },
      {
        name: 'Персонаж 2',
        image: 'pictogram2.png',
      },
      {
        name: 'Персонаж 3',
        image: 'pictogram3.png',
      },
    ];
    
    function startGame() {
      const canvas = document.getElementById('canvas');
      const drawButton = document.getElementById('drawButton');
      
      drawButton.addEventListener('click', drawComic);
      
      characters.forEach((character) => {
        const characterElement = document.createElement('img');
        characterElement.src = character.image;
        characterElement.alt = character.name;
        characterElement.classList.add('character');
        
        canvas.appendChild(characterElement);
      });
    }
    
    function drawComic() {
      const selectedCharacters = document.getElementsByClassName('character');
      
      if (selectedCharacters.length === 0) {
        alert('Выберите хотя бы одного персонажа!');
        return;
      }
      
      const comicCanvas = document.createElement('div');
      comicCanvas.classList.add('comic');
      
      Array.from(selectedCharacters).forEach((character) => {
        const characterClone = character.cloneNode(true);
        comicCanvas.appendChild(characterClone);
      });
      
      document.body.appendChild(comicCanvas);
    }
    
    // Запускаем игру при загрузке страницы
    window.addEventListener('load', startGame);
  </script>
  
  <style>
    img.character {
      width: 80px;
      height: 80px;
      cursor: pointer;
      margin-right: 10px;
    }
    
    div.comic {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
  </style>
</body>
</html>