AI game creator

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

No:24315

111

←

Prev Next

→

Tetris
Developer User11429｜Date and time 23/11/7 12:54:16
Build time 310.604 sec｜Game capacity 6.999KB｜

Script

Sure, here's a simple implementation of Tetris using JavaScript, HTML, and CSS. I've provided the code below:

To use the Tetris game, simply copy and paste the above code into a blank HTML file, save it with an .html extension, and open it in a web browser. The game will automatically start, and you can use the arrow keys to move the Tetrominoes and the Q/W keys to rotate them. The objective is to clear as many lines as possible by filling them with blocks without reaching the top. Good luck and have fun playing Tetris!

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

Sure, here's a simple implementation of Tetris using JavaScript, HTML, and CSS. I've provided the code below:

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
        }

canvas {
            background-color: #000;
            display: block;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');
        const scale = 20;

context.scale(scale, scale);

// Tetromino shapes
        const tetrominos = [
            [],
            [[1, 1, 1, 1]],
            [[1, 1], [1, 1]],
            [[1, 0, 0], [1, 1, 1]],
            [[0, 0, 1], [1, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 1, 1], [0, 1, 0]],
            [[1, 1, 0], [0, 1, 1]]
        ];

const colors = [
            null,
            'purple',
            'yellow',
            'blue',
            'orange',
            'green',
            'red',
            'cyan'
        ];

let arena = createMatrix(12, 20);

let player = {
            pos: { x: 0, y: 0 },
            matrix: null,
            score: 0
        };

function createMatrix(w, h) {
            const matrix = [];
            while (h--) {
                matrix.push(new Array(w).fill(0));
            }
            return matrix;
        }

function draw() {
            context.fillStyle = '#000';
            context.fillRect(0, 0, canvas.width, canvas.height);

drawMatrix(arena, { x: 0, y: 0 });
            drawMatrix(player.matrix, player.pos);
        }

function rotate(matrix, dir) {
            for (let y = 0; y < matrix.length; ++y) {
                for (let x = 0; x < y; ++x) {
                    [matrix[x][y], matrix[y][x]] = [matrix[y][x], matrix[x][y]];
                }
            }

if (dir > 0) {
                matrix.forEach(row => row.reverse());
            } else {
                matrix.reverse();
            }
        }

function playerDrop() {
            player.pos.y++;
            if (collide(arena, player)) {
                player.pos.y--;
                merge(arena, player);
                resetPlayer();
                arenaSweep();
                updateScore();
            }
            dropCounter = 0;
        }

function playerMove(dir) {
            player.pos.x += dir;
            if (collide(arena, player)) {
                player.pos.x -= dir;
            }
        }

let dropCounter = 0;
        let dropInterval = 1000;
        let lastTime = 0;

function update(time = 0) {
            const deltaTime = time - lastTime;
            lastTime = time;
            dropCounter += deltaTime;
            if (dropCounter > dropInterval) {
                playerDrop();
            }
            draw();
            requestAnimationFrame(update);
        }

function updateScore() {
            document.getElementById('score').innerText = player.score;
        }

function resetPlayer() {
            const pieces = 'LJOTSZI';
            player.matrix = tetrominos[pieces[pieces.length * Math.random() | 0]];
            player.pos.y = 0;
            player.pos.x = Math.floor(arena[0].length / 2) -
                Math.floor(player.matrix[0].length / 2);

if (collide(arena, player)) {
                arena.forEach(row => row.fill(0));
                player.score = 0;
                dropInterval = 1000;
                updateScore();
            }
        }

resetPlayer();
        updateScore();
        update();
    </script>
</body>
</html>
```