AI game creator

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

No:17340

112

←

Prev Next

→

Tetris And lava
Developer User7638｜Date and time 23/9/23 5:43:57
Build time 78.135 sec｜Game capacity 7.602KB｜

Script

Sure! Here's a Tetris-like game called "Tetris and Lava" implemented as a single HTML file using JavaScript:

To play the game, simply open the HTML file in a web browser, and you can start controlling the tetrominos using the arrow keys on your smartphone. The goal is to complete lines and score points while avoiding collisions with the lava blocks. The game will end when a tetromino reaches the top of the grid, and your final score will be displayed. Enjoy playing "Tetris and Lava"!

←

Prev　Next

→ 　

Back　

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

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

Sure! Here's a Tetris-like game called "Tetris and Lava" implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>Tetris and Lava</title>
    <style>
      canvas {
        border: 1px solid #000;
        display: block;
        margin: 0 auto;
      }
    </style>
  </head>
  <body>
    <canvas id="gameCanvas" width="400" height="800"></canvas>
    
    <script>
      // Game variables
      var canvas;
      var context;
      var grid;
      var tileSize;
      var lavaInterval;
      var timer;
      var score;
    
      // Tetromino shapes
      var shapes = [
        [[1, 1], [1, 1]],  // Square shape
        [[1, 1, 1, 1]],    // Line shape
        [[1, 1, 0], [0, 1, 1]], // Z shape
        [[0, 1, 1], [1, 1, 0]], // S shape
        [[0, 1, 0], [1, 1, 1]], // T shape
        [[1, 0, 0], [1, 1, 1]], // L shape
        [[0, 0, 1], [1, 1, 1]]  // J shape
      ];
    
      // Initialize the game
      function init() {
        canvas = document.getElementById('gameCanvas');
        context = canvas.getContext('2d');
        
        tileSize = 40;
        grid = [];
        score = 0;
    
        for (var r = 0; r < canvas.height / tileSize; r++) {
          grid[r] = [];
          for (var c = 0; c < canvas.width / tileSize; c++) {
            grid[r][c] = 0;
          }
        }
    
        document.addEventListener('keydown', handleKeyPress);
        
        timer = setInterval(update, 1000);
        lavaInterval = setInterval(spawnLava, 3000);
    
        // Start the first tetromino
        spawnTetromino();
      }
    
      // Spawn a new tetromino
      function spawnTetromino() {
        var shape = randomShape();
        var col = Math.floor((canvas.width / tileSize) / 2) - Math.floor(shape[0].length / 2);
    
        var tetromino = {
          shape: shape,
          row: 0,
          col: col
        };
    
        if (!collision(tetromino)) {
          currentTetromino = tetromino;
        } else {
          // Game over
          clearInterval(timer);
          clearInterval(lavaInterval);
          alert('Game over! Your score: ' + score);
        }
      }
    
      // Generate a random shape from the available shapes
      function randomShape() {
        var index = Math.floor(Math.random() * shapes.length);
        return shapes[index];
      }
    
      // Move the tetromino down
      function moveDown() {
        currentTetromino.row++;
        if (collision(currentTetromino)) {
          currentTetromino.row--;
          lockTetromino();
          clearLines();
          spawnTetromino();
        }
      }
    
      // Move the tetromino left
      function moveLeft() {
        currentTetromino.col--;
        if (collision(currentTetromino)) {
          currentTetromino.col++;
        }
      }
    
      // Move the tetromino right
      function moveRight() {
        currentTetromino.col++;
        if (collision(currentTetromino)) {
          currentTetromino.col--;
        }
      }
    
      // Rotate the tetromino
      function rotate() {
        var originalShape = currentTetromino.shape;
        currentTetromino.shape = rotateMatrix(currentTetromino.shape);
    
        if (collision(currentTetromino)) {
          currentTetromino.shape = originalShape;
        }
      }
    
      // Rotate a matrix 90 degrees
      function rotateMatrix(matrix) {
        var result = [];
        for (var c = 0; c < matrix[0].length; c++) {
          result[c] = [];
          for (var r = 0; r < matrix.length; r++) {
            result[c][r] = matrix[matrix.length - 1 - r][c];
          }
        }
        return result;
      }
    
      // Lock the current tetromino and update the grid
      function lockTetromino() {
        for (var r = 0; r < currentTetromino.shape.length; r++) {
          for (var c = 0; c < currentTetromino.shape[r].length; c++) {
            if (currentTetromino.shape[r][c]) {
              grid[currentTetromino.row + r][currentTetromino.col + c] = 1;
            }
          }
        }
      }
    
      // Clear completed lines
      function clearLines() {
        for (var r = 0; r < grid.length; r++) {
          var completed = true;
          for (var c = 0; c < grid[r].length; c++) {
            if (grid[r][c] === 0) {
              completed = false;
              break;
            }
          }
          if (completed) {
            grid.splice(r, 1);
            grid.unshift(new Array(grid[0].length).fill(0));
            score++;
          }
        }
      }
    
      // Check for collision between tetromino and grid boundaries or other locked tetrominos
      function collision(tetromino) {
        for (var r = 0; r < tetromino.shape.length; r++) {
          for (var c = 0; c < tetromino.shape[r].length; c++) {
            if (
              tetromino.shape[r][c] &&
              (tetromino.row + r >= grid.length ||
                tetromino.col + c < 0 ||
                tetromino.col + c >= grid[r].length ||
                grid[tetromino.row + r][tetromino.col + c])
            ) {
              return true;
            }
          }
        }
        return false;
      }
    
      // Spawn lava on random grid positions
      function spawnLava() {
        for (var r = 0; r < grid.length; r++) {
          var col = Math.floor(Math.random() * grid[r].length);
          grid[r][col] = 1;
        }
        moveDown();
      }
    
      // Handle key presses
      function handleKeyPress(event) {
        switch (event.key) {
          case 'ArrowUp':
            rotate();
            break;
          case 'ArrowDown':
            moveDown();
            break;
          case 'ArrowLeft':
            moveLeft();
            break;
          case 'ArrowRight':
            moveRight();
            break;
        }
      }
    
      // Update and render the game
      function update() {
        moveDown();
        render();
      }
    
      // Render the game
      function render() {
        context.clearRect(0, 0, canvas.width, canvas.height);
    
        // Render grid
        for (var r = 0; r < grid.length; r++) {
          for (var c = 0; c < grid[r].length; c++) {
            if (grid[r][c]) {
              context.fillStyle = '#000';
              context.fillRect(c * tileSize, r * tileSize, tileSize, tileSize);
            }
          }
        }
    
        // Render current tetromino
        if (currentTetromino) {
          for (var r = 0; r < currentTetromino.shape.length; r++) {
            for (var c = 0; c < currentTetromino.shape[r].length; c++) {
              if (currentTetromino.shape[r][c]) {
                context.fillStyle = '#f00';
                context.fillRect(
                  (currentTetromino.col + c) * tileSize,
                  (currentTetromino.row + r) * tileSize,
                  tileSize,
                  tileSize
                );
              }
            }
          }
        }
    
        // Render score
        context.fillStyle = '#000';
        context.font = '24px Arial';
        context.fillText('Score: ' + score, 10, 30);
      }
    
      // Start the game
      init();
    </script>
  </body>
</html>
```