make tetris but the blocks are rainbow changing's game

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

No:45818

←

Prev Next

→

make tetris but the blocks are rainbow changing
Developer User19412｜Date and time 24/2/21 11:15:26
Build time 19.197 sec｜Game capacity 5.354KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

```html
<!DOCTYPE html>
<html>
<head>
    <title>Rainbow Tetris</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <canvas id="tetrisCanvas" width="300" height="600"></canvas>

const ROWS = 20;
        const COLS = 10;
        const BLOCK_SIZE = 30;
        let board = Array.from({ length: ROWS }, () => Array(COLS).fill(0));

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

const shapes = [
            [[1, 1, 1, 1]],
            [[1, 1, 0], [0, 1, 1]],
            [[0, 1, 1], [1, 1, 0]],
            [[1, 1], [1, 1]],
            [[1, 1, 1], [0, 1, 0]],
            [[0, 1, 0], [1, 1, 1]],
            [[1, 0, 0], [1, 1, 1]],
        ];

let currentShape = shapes[Math.floor(Math.random() * shapes.length)];
        let currentColor = colors[Math.floor(Math.random() * colors.length)];
        let x = 4, y = 0;

function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
            ctx.strokeStyle = 'black';
            ctx.strokeRect(x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
        }

function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

drawBoard();

for (let i = 0; i < currentShape.length; i++) {
                for (let j = 0; j < currentShape[i].length; j++) {
                    if (currentShape[i][j] === 1) {
                        drawBlock(x + j, y + i, currentColor);
                    }
                }
            }
        }

function rotateShape() {
            const temp = currentShape[0];
            currentShape[0] = currentShape[currentShape.length - 1];
            currentShape[currentShape.length - 1] = temp;

for (let i = 0; i < currentShape.length; i++) {
               currentShape[i] = currentShape[i].map((_, index) => currentShape[currentShape.length - 1 - index][i]);
            }

if(!validMove(currentShape, x, y)) {
                rotateShape();
            }
        }

function createNewShape() {
            currentShape = shapes[Math.floor(Math.random() * shapes.length)];
            currentColor = colors[Math.floor(Math.random() * colors.length)];
            x = 4;
            y = 0;

if (!validMove(currentShape, x, y)) {
                alert('Game Over! Refresh the page to play again.');
            }
        }

function moveLeft() {
            if (validMove(currentShape, x - 1, y)) {
                x--;
            }
        }

function moveRight() {
            if (validMove(currentShape, x + 1, y)) {
                x++;
            }
        }

setInterval(() => {
            moveDown();
            draw();
        }, 500);

draw();
    </script>
</body>
</html>
```