AI game creator

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

No:37859

←

Prev Next

→

Tetris shape maker
Developer User17064｜Date and time 24/1/21 18:28:43
Build time 12.432 sec｜Game capacity 3.682KB｜

Script

Sure! Here's a simple implementation of a Tetris shape maker game using JavaScript, HTML, and CSS. The game allows you to create Tetris shapes by selecting different pictograms and arranging them on the game grid. Note: This is a simplified version of the Tetris game and might not have all the functionalities of a typical Tetris game.

In this game, a grid with 10 columns and 20 rows is created. You can select a pictogram by modifying the `selectedPictogram` variable. By clicking on the cells in the grid, you can place the currently selected pictogram on those cells. The selected pictogram will be rendered as a pictogram shape on the grid. Note that this is just a basic Tetris shape maker simulation and doesn't include features like scoring, line clearing, or game-over conditions. Feel free to extend the game logic to add more functionalities based on your requirements.

←

Prev　Next

→ 　

Back　

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

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

Note: This is a simplified version of the Tetris game and might not have all the functionalities of a typical Tetris game.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Tetris Shape Maker</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
    }
    
    .game-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f2f2f2;
    }
    
    .grid {
      display: grid;
      grid-template-columns: repeat(10, 40px);
      grid-template-rows: repeat(20, 40px);
      grid-gap: 1px;
      background-color: #e4e4e4;
    }
    
    .cell {
      background-color: #fff;
    }
    
    .pictogram {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div class="game-container">
    <div class="grid"></div>
  </div>

// Initialize the grid and the current shape
    const grid = [];
    let currentShape = null;
    let selectedPictogram = '◆'; // Default selected pictogram

// Function to create the game grid
    function createGrid() {
      const gridContainer = document.querySelector('.grid');
      
      for (let row = 0; row < 20; row++) {
        for (let col = 0; col < 10; col++) {
          const cell = document.createElement('div');
          cell.classList.add('cell');
          cell.dataset.row = row;
          cell.dataset.col = col;
          gridContainer.appendChild(cell);
        }
      }
    }

// Function to render the current shape on the grid
    function renderShape() {
      for (let i = 0; i < currentShape.length; i++) {
        const { row, col } = currentShape[i];
        const gridCell = document.querySelector(`.cell[data-row="${row}"][data-col="${col}"]`);
        
        if (gridCell) {
          gridCell.innerHTML = selectedPictogram;
          gridCell.classList.add('pictogram');
        }
      }
    }

// Function to select a pictogram
    function selectPictogram(pictogram) {
      selectedPictogram = pictogram;
      renderShape();
    }

// Function to handle cell click events
    function handleCellClick(e) {
      const { target } = e;
      
      if (currentShape && target.classList.contains('cell') && !target.classList.contains('pictogram')) {
        const row = parseInt(target.dataset.row);
        const col = parseInt(target.dataset.col);
        
        // Update the current shape with the clicked cell
        currentShape.push({ row, col });
        
        // Render the updated shape
        renderShape();
      }
    }

// Initialize the game
    function initGame() {
      createGrid();
      document.querySelector('.grid').addEventListener('click', handleCellClick);
    }

// Start the game
    initGame();
  </script>
</body>
</html>
```

Note that this is just a basic Tetris shape maker simulation and doesn't include features like scoring, line clearing, or game-over conditions. Feel free to extend the game logic to add more functionalities based on your requirements.