Tetris's game | AI game creator

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

No:42609

50

Tetris
Developer User18920｜Date and time 24/2/12 6:15:16
Build time 18.664 sec｜Game capacity 7.098KB｜

Sure, here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

To play the game, simply save the code above as an HTML file, and open it in a web browser. The game will start automatically, and you can use the arrow keys on your smartphone to control the tetrominoes (pieces) as they fall, trying to complete rows and earn points. The game will end if any blocks reach the top of the grid.

→ 　

0　

0　

　
　
　
　

[PR]現在のプレゼントランキング

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

(C)2023 HisashiApp

Sure, here's an example of a simple Tetris game implemented as a single HTML file using JavaScript:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        canvas {
            background-color: #000;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="320" height="480"></canvas>
    <script>
        document.addEventListener("DOMContentLoaded", function () {
            // Tetris game variables
            var canvas = document.getElementById("tetrisCanvas");
            var context = canvas.getContext("2d");
            var grid = createGrid();
            var currentPiece = getRandomPiece();
            var score = 0;
            var interval;

function createGrid() {
                var rows = 20;
                var columns = 10;
                var grid = [];
                for (var r = 0; r < rows; r++) {
                    grid[r] = [];
                    for (var c = 0; c < columns; c++) {
                        grid[r][c] = "";
                    }
                }
                return grid;
            }

function getRandomPiece() {
                var pieces = [
                    [[1, 1, 1, 1]],
                    [[1, 1], [1, 1]],
                    [[1, 1, 0], [0, 1, 1]],
                    [[0, 1, 1], [1, 1, 0]],
                    [[1, 1, 1], [0, 1, 0]]
                ];
                var randomIndex = Math.floor(Math.random() * pieces.length);
                return pieces[randomIndex];
            }

function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                for (var r = 0; r < grid.length; r++) {
                    for (var c = 0; c < grid[r].length; c++) {
                        if (grid[r][c] === 1) {
                            context.fillStyle = "#FF0000";
                            context.fillRect(c * 20, r * 20, 20, 20);
                        }
                    }
                }
            }

function movePiece(direction) {
                var pieceCopy = JSON.parse(JSON.stringify(currentPiece));
                switch (direction) {
                    case "left":
                        currentPiece[0].forEach(function (row, r) {
                            row.forEach(function (cell, c) {
                                if (cell === 1) {
                                    if (currentPiece[0][r][c - 1] !== undefined && currentPiece[0][r][c - 1] !== 1) {
                                        currentPiece[0][r][c] = "";
                                        currentPiece[0][r][c - 1] = 1;
                                    }
                                }
                            });
                        });
                        break;
                    case "right":
                        currentPiece[0].forEach(function (row, r) {
                            row.forEach(function (cell, c) {
                                if (cell === 1) {
                                    if (currentPiece[0][r][c + 1] !== undefined && currentPiece[0][r][c + 1] !== 1) {
                                        currentPiece[0][r][c] = "";
                                        currentPiece[0][r][c + 1] = 1;
                                    }
                                }
                            });
                        });
                        break;
                    case "down":
                        currentPiece[0].forEach(function (row, r) {
                            row.forEach(function (cell, c) {
                                if (cell === 1) {
                                    if (currentPiece[0][r + 1] !== undefined && currentPiece[0][r + 1][c] !== 1) {
                                        currentPiece[0][r][c] = "";
                                        currentPiece[0][r + 1][c] = 1;
                                    } else {
                                        freezePiece();
                                        currentPiece = getRandomPiece();
                                    }
                                }
                            });
                        });
                        break;
                }
            }

function freezePiece() {
                currentPiece[0].forEach(function (row, r) {
                    row.forEach(function (cell, c) {
                        if (cell === 1) {
                            grid[Math.floor(r + currentPiece[0].length / 2)][c + Math.floor(currentPiece[0][0].length / 2)] = 1;
                        }
                    });
                });
            }

function rotatePiece() {
                var rotatedPiece = [];
                currentPiece[0][0].forEach(function (cell, c) {
                    rotatedPiece[c] = [];
                    currentPiece[0].forEach(function (row, r) {
                        rotatedPiece[c][r] = currentPiece[0][r][c];
                    });
                    rotatedPiece[c].reverse();
                });
                currentPiece[0] = rotatedPiece;
            }

function checkRows() {
                var rowCount = 0;
                for (var r = 0; r < grid.length; r++) {
                    if (grid[r].every(cell => cell === 1)) {
                        grid.splice(r, 1);
                        grid.unshift(Array(10).fill(""));
                        score += 10;
                        rowCount++;
                    }
                }
                score += (rowCount > 1) ? Math.pow(2, rowCount - 1) * 10 : 0;
            }

function gameOver() {
                clearInterval(interval);
                alert("Game Over\nScore: " + score);
            }

function update() {
                draw();
                movePiece("down");
                checkRows();
                if (grid[0].some(cell => cell === 1)) {
                    gameOver();
                }
            }

document.addEventListener("keydown", function (event) {
                switch (event.keyCode) {
                    case 37: // left
                        movePiece("left");
                        break;
                    case 38: // up
                        rotatePiece();
                        break;
                    case 39: // right
                        movePiece("right");
                        break;
                    case 40: // down
                        movePiece("down");
                        break;
                }
            });

interval = setInterval(update, 500); // Game loop
        });
    </script>
</body>
</html>
```

To play the game, simply save the code above as an HTML file, and open it in a web browser. The game will start automatically, and you can use the arrow keys on your smartphone to control the tetrominoes (pieces) as they fall, trying to complete rows and earn points. The game will end if any blocks reach the top of the grid.