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

No:43955

←

Prev Next

→

Tetris
Developer User19300｜Date and time 24/2/17 1:39:43
Build time 21.096 sec｜Game capacity 5.721KB｜

Script

Tetris

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            background-color: #202020;
            margin: 0;
        }
        canvas {
            bacekground-color: #000000;
            display: block;
            margin: 20px auto;
        }
        h1 {
            text-align: center;
            color: #FFFFFF;
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>
    <canvas id="tetris" width="240" height="400"></canvas>
    <script>
        const canvas = document.getElementById('tetris');
        const context = canvas.getContext('2d');

const scale = 20;
        const rows = canvas.height / scale;
        const columns = canvas.width / scale;

let score = 0;

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

context.strokeStyle = '#FFFFFF';
            context.lineWidth = 2;
            for (let i = 0; i < rows; i++) {
                for (let j = 0; j < columns; j++) {
                    context.strokeRect(j * scale, i * scale, scale, scale);
                }
            }
        }

const pieces = [
            [ [0, 1, 0], [1, 1, 1], [0, 0, 0] ],   // L-Piece
            [ [1, 1], [1, 1] ],                     // Square-Piece
            [ [1, 1, 0], [0, 1, 1], [0, 0, 0] ],   // Z-Piece
            [ [0, 1, 1], [1, 1, 0], [0, 0, 0] ],   // S-Piece
            [ [0, 1, 0], [1, 1, 1], [0, 0, 0] ],   // T-Piece
            [ [1, 1, 1, 1] ],                       // I-Piece
            [ [1, 0, 0], [1, 1, 1], [0, 0, 0] ]    // J-Piece
        ];

function randomPiece() {
            const rand = Math.floor(Math.random() * pieces.length);
            return pieces[rand];
        }

let piece = randomPiece();
        let pieceX = 3;
        let pieceY = 0;

let grid = Array.from({ length: rows }, () => Array(columns).fill(0));

function draw() {
            drawGrid();
            drawPiece();
            drawGridPiece();
        }

function movePiece(direction) {
            pieceX += direction;
            if (collide()) {
                pieceX -= direction;
            }
        }

function rotatePiece() {
            const rotatedPiece = piece[0].map((_, index) => piece.map(row => row[index])).reverse();
            if (!collide(rotatedPiece)) {
                piece = rotatedPiece;
            }
        }

let dropInterval = 1000;
        let dropTimer = Date.now();

function drop() {
            const time = Date.now();
            const deltaTime = time - dropTimer;

if (deltaTime > dropInterval) {
                pieceY++;
                if (collide()) {
                    pieceY--;
                    merge();
                }

dropTimer = time;
            }

if (!collide()) {
                requestAnimationFrame(drop);
            }
        }

document.addEventListener('keydown', event => {
            switch (event.keyCode) {
                case 37: // Left Arrow
                    movePiece(-1);
                    break;
                case 39: // Right Arrow
                    movePiece(1);
                    break;
                case 40: // Down Arrow
                    drop();
                    break;
                case 38: // Up Arrow
                    rotatePiece();
                    break;
            }
        });

draw();
        drop();

</script>
</body>
</html>