AI game creator

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

No:35424

←

Prev Next

→

Tetris
Developer User16538｜Date and time 24/1/14 12:03:55
Build time 29.082 sec｜Game capacity 11.21KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            background-color: #F0F0F0;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

canvas {
            display: block;
            margin: 0 auto;
            background-color: #FFF;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>

// Tetris game logic and rendering
        var tetrisGame = (function() {
            var canvas = document.getElementById("tetrisCanvas");
            var context = canvas.getContext("2d");

var ROWS = 20;
            var COLS = 10;
            var BLOCK_SIZE = canvas.width / COLS;
            var COLORS = {
                I: "#00FFFF",
                J: "#0000FF",
                L: "#FFA500",
                O: "#FFFF00",
                S: "#00FF00",
                T: "#800080",
                Z: "#FF0000"
            };

var board = [];
            var currentPiece = null;
            var score = 0;

// Initialize the game board
            function initBoard() {
                for (var row = 0; row < ROWS; row++) {
                    board[row] = [];
                    for (var col = 0; col < COLS; col++) {
                        board[row][col] = "";
                    }
                }
            }

// Generate a random tetromino piece
            function generateRandomPiece() {
                var pieces = Object.keys(COLORS);
                var randomPiece = pieces[Math.floor(Math.random() * pieces.length)];
                var piece = {
                    type: randomPiece,
                    rotation: 0,
                    x: Math.floor(COLS / 2) - 1,
                    y: 0
                };
                return piece;
            }

// Check if a piece can be placed at the specified position on the board
            function canPlacePiece(piece, row, col) {
                var shape = getPictogram(piece.type, piece.rotation);
                for (var i = 0; i < shape.length; i++) {
                    for (var j = 0; j < shape[i].length; j++) {
                        if (
                            shape[i][j] === 1 &&
                            (row + i >= ROWS ||
                                col + j < 0 ||
                                col + j >= COLS ||
                                board[row + i][col + j] !== "")
                        ) {
                            return false;
                        }
                    }
                }
                return true;
            }

// Handle keyboard input for moving and rotating the piece
            function handleInput(event) {
                var key = event.key;
                if (key === "ArrowLeft") {
                    movePiece("left");
                } else if (key === "ArrowRight") {
                    movePiece("right");
                } else if (key === "ArrowDown") {
                    movePiece("down");
                } else if (key === "ArrowUp") {
                    rotatePiece();
                }
            }

// Move the current piece in the specified direction
            function movePiece(direction) {
                var newRow = currentPiece.y;
                var newCol = currentPiece.x;

if (direction === "left") {
                    newCol--;
                } else if (direction === "right") {
                    newCol++;
                } else if (direction === "down") {
                    newRow++;
                }

if (canPlacePiece(currentPiece, newRow, newCol)) {
                    currentPiece.x = newCol;
                    currentPiece.y = newRow;
                }
            }

// Rotate the current piece
            function rotatePiece() {
                var newRotation = (currentPiece.rotation + 1) % 4;
                if (canPlacePiece(currentPiece, currentPiece.y, currentPiece.x, newRotation)) {
                    currentPiece.rotation = newRotation;
                }
            }

// Clear completed rows and update score
            function clearCompletedRows() {
                var completedRows = [];
                for (var row = 0; row < ROWS; row++) {
                    if (board[row].every(cell => cell !== "")) {
                        completedRows.push(row);
                    }
                }

for (var i = 0; i < completedRows.length; i++) {
                    var row = completedRows[i];
                    board.splice(row, 1);
                    board.unshift(Array(COLS).fill(""));
                    score++;
                }
            }

// Check if the game is over
            function isGameOver() {
                var shape = getPictogram(currentPiece.type, currentPiece.rotation);
                for (var i = 0; i < shape.length; i++) {
                    for (var j = 0; j < shape[i].length; j++) {
                        if (
                            shape[i][j] === 1 &&
                            (currentPiece.y + i >= ROWS ||
                                board[currentPiece.y + i][currentPiece.x + j] !== "")
                        ) {
                            return true;
                        }
                    }
                }
                return false;
            }

// Draw the game board and tetromino pieces
            function draw() {
                context.clearRect(0, 0, canvas.width, canvas.height);
                drawBoard();
                drawPiece();
                drawScore();
            }

// Draw the game board
            function drawBoard() {
                for (var row = 0; row < ROWS; row++) {
                    for (var col = 0; col < COLS; col++) {
                        if (board[row][col] !== "") {
                            context.fillStyle = COLORS[board[row][col]];
                            context.fillRect(col * BLOCK_SIZE, row * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
                        }
                    }
                }
            }

// Draw the current tetromino piece on the board
            function drawPiece() {
                var shape = getPictogram(currentPiece.type, currentPiece.rotation);
                context.fillStyle = COLORS[currentPiece.type];
                for (var row = 0; row < shape.length; row++) {
                    for (var col = 0; col < shape[row].length; col++) {
                        if (shape[row][col] === 1) {
                            context.fillRect(
                                (currentPiece.x + col) * BLOCK_SIZE,
                                (currentPiece.y + row) * BLOCK_SIZE,
                                BLOCK_SIZE,
                                BLOCK_SIZE
                            );
                        }
                    }
                }
            }

// Draw the score on the top-left corner of the canvas
            function drawScore() {
                context.font = "20px Arial";
                context.fillStyle = "#000";
                context.fillText("Score: " + score, 10, 30);
            }

// Get the pictogram shape of a tetromino piece based on its type and rotation
            function getPictogram(type, rotation) {
                var shape = [];
                switch (type) {
                    case "I":
                        shape = [[1, 1, 1, 1]];
                        break;
                    case "J":
                        shape = [[1, 0, 0], [1, 1, 1]];
                        break;
                    case "L":
                        shape = [[0, 0, 1], [1, 1, 1]];
                        break;
                    case "O":
                        shape = [[1, 1], [1, 1]];
                        break;
                    case "S":
                        shape = [[0, 1, 1], [1, 1, 0]];
                        break;
                    case "T":
                        shape = [[0, 1, 0], [1, 1, 1]];
                        break;
                    case "Z":
                        shape = [[1, 1, 0], [0, 1, 1]];
                        break;
                }

for (var i = 0; i < rotation; i++) {
                    shape = rotate(shape);
                }

return shape;
            }

// Rotate a matrix by 90 degrees
            function rotate(matrix) {
                var N = matrix.length;
                var newMatrix = [];
                for (var row = 0; row < N; row++) {
                    newMatrix[row] = [];
                    for (var col = 0; col < N; col++) {
                        newMatrix[row][col] = matrix[col][N - 1 - row];
                    }
                }
                return newMatrix;
            }

// Update the game state on each frame
            function update() {
                if (!currentPiece) {
                    currentPiece = generateRandomPiece();
                } else {
                    movePiece("down");
                    if (!canPlacePiece(currentPiece, currentPiece.y, currentPiece.x)) {
                        for (var row = 0; row < 4; row++) {
                            for (var col = 0; col < 4; col++) {
                                if (currentPiece.x + col >= 0 && currentPiece.x + col < COLS) {
                                    if (
                                        currentPiece.y + row >= 0 &&
                                        currentPiece.y + row < ROWS &&
                                        getPictogram(currentPiece.type, currentPiece.rotation)[row][col] === 1
                                    ) {
                                        board[currentPiece.y + row][currentPiece.x + col] = currentPiece.type;
                                    }
                                }
                            }
                        }

clearCompletedRows();

if (isGameOver()) {
                            alert("Game Over!\nYour score: " + score);
                            location.reload();
                        }

currentPiece = generateRandomPiece();
                    }
                }

draw();

requestAnimationFrame(update);
            }

// Initialize the game
            function init() {
                initBoard();
                document.addEventListener("keydown", handleInput);
                update();
            }

return {
                init: init
            };
        })();

// Start the game when the page is loaded
        window.onload = function() {
            tetrisGame.init();
        };
    </script>
</body>
</html>