AI game creator

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

No:24830

←

Prev Next

→

Tetris
Developer User11915｜Date and time 23/11/12 22:47:43
Build time 197.958 sec｜Game capacity 7.693KB｜

Script

Score: 0

←

Prev　Next

→ 　

Back　

[PR]現在のフィギュア売れ筋ランキング

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

<!DOCTYPE html>
<html>
<head>
    <title>Tetris Game</title>
    <style>
        #game-board {
            width: 240px;
            height: 480px;
            border: 2px solid grey;
            margin: 0 auto;
        }
        
        #score {
            font-size: 20px;
            text-align: center;
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">Score: 0</div>

const colors = ['#FFD700', '#FF4500', '#00CED1', '#FF69B4', '#6A5ACD', '#00FF7F', '#FFA500'];

const boardWidth = 10;
        const boardHeight = 20;
        const blockSize = 24;

let score = 0;
        let currentShape = getRandomShape();
        let nextShape = getRandomShape();
        let currentPosition = { x: 0, y: 0 };
        let board = createEmptyBoard();

function getRandomShape() {
            return shapes[Math.floor(Math.random() * shapes.length)];
        }

function createEmptyBoard() {
            return Array.from({ length: boardHeight }, () => Array(boardWidth).fill(0));
        }

function drawBoard() {
            let gameBoard = document.getElementById('game-board');
            gameBoard.innerHTML = '';

for (let y = 0; y < boardHeight; y++) {
                for (let x = 0; x < boardWidth; x++) {
                    let cellState = board[y][x] ? 'filled' : 'empty';
                    let cellColor = board[y][x] ? colors[board[y][x] - 1] : 'transparent';

function drawShape() {
            for (let y = 0; y < currentShape.length; y++) {
                for (let x = 0; x < currentShape[y].length; x++) {
                    if (currentShape[y][x]) {
                        let cellX = currentPosition.x + x;
                        let cellY = currentPosition.y + y;
                        let cellState = (cellY >= 0 && board[cellY][cellX] !== 0) ? 'filled' : 'empty';
                        let cellColor = (cellY >= 0 && board[cellY][cellX] !== 0) ? colors[board[cellY][cellX] - 1] : colors[currentShape[y][x] - 1];

function clearShape() {
            let blocks = Array.from(document.getElementsByClassName('block'));
            blocks.forEach(block => block.remove());
        }

function rotateShape() {
            const rotatedShape = currentShape[0].map((_, index) =>
                currentShape.map(row => row[index]).reverse()
            );
            const previousShapeState = currentShape;
            currentShape = rotatedShape;
            if (collide()) {
                currentShape = previousShapeState;
            }
            drawBoard();
            drawShape();
        }

function moveShapeHorizontally(offset) {
            currentPosition.x += offset;
            if (collide()) {
                currentPosition.x -= offset;
            }
            drawBoard();
            drawShape();
        }

function resetGame() {
            score = 0;
            currentPosition = { x: 0, y: 0 };
            board = createEmptyBoard();
            currentShape = getRandomShape();
            nextShape = getRandomShape();
            drawBoard();
            drawShape();
        }

function handleKeyPress(event) {
            switch (event.keyCode) {
                case 37: // Left arrow
                    moveShapeHorizontally(-1);
                    break;
                case 39: // Right arrow
                    moveShapeHorizontally(1);
                    break;
                case 40: // Down arrow
                    moveShapeDown();
                    break;
                case 32: // Spacebar
                    rotateShape();
                    break;
            }
        }

function startGame() {
            resetGame();
            setInterval(moveShapeDown, 1000);
            document.addEventListener('keydown', handleKeyPress);
        }

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