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

No:35002

←

Prev Next

→

Tetris
Developer User16401｜Date and time 24/1/12 22:54:59
Build time 32.598 sec｜Game capacity 6.583KB｜

Script

Tetris

←

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>
    #game-board {
        width: 240px;
        height: 480px;
        border: 1px solid #000;
        position: relative;
    }

.block {
        width: 30px;
        height: 30px;
        position: absolute;
    }
</style>
</head>
<body>
<h1>Tetris</h1>
<div id="game-board"></div>

// Define colors for different tetromino shapes
    const colors = ['#00FFFF', '#FFFF00', '#FF00FF', '#FF0000', '#00FF00', '#FFA500', '#0000FF'];

// Define game board dimensions
    const rows = 16;
    const cols = 8;

let gameBoard = [];
    let currentPiece, currentRow, currentCol, currentShapeIndex, currentColor;
    let gameInterval, score, gameEnded;

function initializeGame() {
        gameBoard = [];
        for (let i = 0; i < rows; i++) {
            gameBoard[i] = new Array(cols).fill(0);
        }
        currentPiece = null;
        currentRow = 0;
        currentCol = 0;
        currentShapeIndex = 0;
        currentColor = null;
        gameInterval = null;
        score = 0;
        gameEnded = false;
    }

function generateRandomPiece() {
        const index = Math.floor(Math.random() * shapes.length);
        currentPiece = shapes[index];
        currentShapeIndex = index;
        currentColor = colors[index];
        currentRow = 0;
        currentCol = Math.floor((cols - currentPiece[0].length) / 2);

if (!isPiecePositionValid(currentPiece, currentRow, currentCol)) {
            endGame();
        }
    }

function movePieceLeft() {
        if (isPiecePositionValid(currentPiece, currentRow, currentCol - 1)) {
            currentCol--;
        }
    }

function movePieceRight() {
        if (isPiecePositionValid(currentPiece, currentRow, currentCol + 1)) {
            currentCol++;
        }
    }

function rotatePiece() {
        const newPiece = [];
        for (let i = 0; i < currentPiece[0].length; i++) {
            newPiece[i] = [];
            for (let j = currentPiece.length - 1; j >= 0; j--) {
                newPiece[i].push(currentPiece[j][i]);
            }
        }

if (isPiecePositionValid(newPiece, currentRow, currentCol)) {
            currentPiece = newPiece;
        }
    }

function drawGameBoard() {
        const gameBoardElement = document.getElementById('game-board');
        gameBoardElement.innerHTML = '';

for (let i = 0; i < gameBoard.length; i++) {
            for (let j = 0; j < gameBoard[i].length; j++) {
                if (gameBoard[i][j] === 1) {
                    const block = document.createElement('div');
                    block.className = 'block';
                    block.style.backgroundColor = currentColor;
                    block.style.top = i * 30 + 'px';
                    block.style.left = j * 30 + 'px';
                    gameBoardElement.appendChild(block);
                }
            }
        }
    }

function drawCurrentPiece() {
        const gameBoardElement = document.getElementById('game-board');

for (let i = 0; i < currentPiece.length; i++) {
            for (let j = 0; j < currentPiece[i].length; j++) {
                if (currentPiece[i][j] === 1) {
                    const block = document.createElement('div');
                    block.className = 'block';
                    block.style.backgroundColor = currentColor;
                    block.style.top = (currentRow + i) * 30 + 'px';
                    block.style.left = (currentCol + j) * 30 + 'px';
                    gameBoardElement.appendChild(block);
                }
            }
        }
    }

function drawScore() {
        const scoreElement = document.createElement('h2');
        scoreElement.innerHTML = 'Score: ' + score;
        document.body.appendChild(scoreElement);
    }

function startGame() {
        initializeGame();
        generateRandomPiece();
        drawScore();

gameInterval = setInterval(function () {
            movePieceDown();
            if (!gameEnded) {
                drawGameBoard();
                drawCurrentPiece();
            }
        }, 1000);
    }

function endGame() {
        clearInterval(gameInterval);
        gameEnded = true;
        alert('Game Over! Final Score: ' + score);
    }

startGame();
</script>
</body>
</html>