Tetris in the style of Eron Musk's game

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

No:5303

5725

←

Prev Next

→

Tetris in the style of Eron Musk
Developer User3819｜Date and time 23/6/29 22:37:18
Build time 70.843 sec｜Game capacity 8.578KB｜

Script

了解しました。以下にイーロンマスク風のテトリスのプログラムを書きます。

Score: 0

このプログラムは、HTMLのcanvas要素を使用してイーロンマスク風のテトリスゲームを実装しています。キーボード操作によってブロックを移動および回転させることができます。スコアはラインが消えるたびに更新されます。ゲームが終了したら、スコアに " - Game Over" が表示されます。このプログラムを1枚のHTMLファイルに保存し、ブラウザで開くと、イーロンマスク風のテトリスゲームをプレイすることができます。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

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

了解しました。以下にイーロンマスク風のテトリスのプログラムを書きます。

```html
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Elon Tetris</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

#canvas {
            width: 300px;
            height: 600px;
            border: 1px solid #000;
        }

#score {
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <div id="score">Score: 0</div>

// グリッドの作成
        const grid = [];
        for (let row = 0; row < height; row++) {
            grid[row] = [];
            for (let col = 0; col < width; col++) {
                grid[row][col] = "white";
            }
        }

// ピースを作成
        const pieces = [
            [
                [1, 1, 1, 1],  // I
            ],
            [
                [1, 1],       // O
                [1, 1],
            ],
            [
                [1, 1, 1],    // J
                [0, 0, 1],
            ],
            [
                [1, 1, 1],    // L
                [1, 0, 0],
            ],
            [
                [0, 1, 1],    // S
                [1, 1, 0],
            ],
            [
                [1, 1, 0],    // Z
                [0, 1, 1],
            ],
            [
                [1, 1, 1],    // T
                [0, 1, 0],
            ],
        ];

// ランダムなピースを取得
        function getRandomPiece() {
            const index = Math.floor(Math.random() * pieces.length);
            return pieces[index];
        }

// ピースの初期位置
        let piece = getRandomPiece();
        let x = Math.floor(width / 2) - Math.floor(piece[0].length / 2);
        let y = 0;

// ピースの描画
        function drawPiece() {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col] === 1) {
                        drawBlock(x + col, y + row, "gray");
                    }
                }
            }
        }

// ブロックの描画
        function drawBlock(x, y, color) {
            ctx.fillStyle = color;
            ctx.fillRect(x * blockSize, y * blockSize, blockSize, blockSize);
            ctx.strokeStyle = "white";
            ctx.strokeRect(x * blockSize, y * blockSize, blockSize, blockSize);
        }

// グリッドとピースの描画
        function draw() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

for (let row = 0; row < height; row++) {
                for (let col = 0; col < width; col++) {
                    drawBlock(col, row, grid[row][col]);
                }
            }

drawPiece();
        }

// ピースの衝突判定
        function hasCollision() {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col] === 1) {
                        if (grid[y + row] && (grid[y + row][x + col] !== "white" || x + col < 0 || x + col >= width || y + row >= height)) {
                            return true;
                        }
                    }
                }
            }
            return false;
        }

// ピースの固定
        function lockPiece() {
            for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    if (piece[row][col] === 1) {
                        grid[y + row][x + col] = "gray";
                    }
                }
            }
        }

// ピースの回転
        function rotatePiece() {
            const rotatedPiece = [];
            for (let row = 0; row < piece[0].length; row++) {
                rotatedPiece[row] = [];
                for (let col = 0; col < piece.length; col++) {
                    rotatedPiece[row][col] = 0;
                }
            }

for (let row = 0; row < piece.length; row++) {
                for (let col = 0; col < piece[row].length; col++) {
                    rotatedPiece[col][piece.length - 1 - row] = piece[row][col];
                }
            }

if (!hasCollision(rotatedPiece)) {
                piece = rotatedPiece;
            }
        }

// ラインが揃ったか判定
        function checkLines() {
            let lines = 0;

for (let row = 0; row < height; row++) {
                if (grid[row].every(cell => cell !== "white")) {
                    lines++;
                    grid.splice(row, 1);
                    grid.unshift(new Array(width).fill("white"));
                }
            }

updateScore(lines);
        }

// スコアの更新
        function updateScore(lines) {
            let score = parseInt(scoreElement.innerHTML.split(": ")[1]) || 0;
            score += lines * lines * 10;
            scoreElement.innerHTML = "Score: " + score;
        }

// ピースの落下
        let dropStart = Date.now();
        let gameOver = false;
        function drop() {
            const now = Date.now();
            const delta = now - dropStart;

if (delta > 1000) {
                y++;
                dropStart = Date.now();
            }

if (!gameOver) {
                if (!hasCollision()) {
                    draw();
                    requestAnimationFrame(drop);
                } else {
                    y--;
                    lockPiece();
                    checkLines();
                    piece = getRandomPiece();
                    x = Math.floor(width / 2) - Math.floor(piece[0].length / 2);
                    y = 0;

if (hasCollision()) {
                        gameOver = true;
                        scoreElement.innerHTML += " - Game Over";
                    }

draw();
                    requestAnimationFrame(drop);
                }
            }
        }

// ピースの移動
        function move(dir) {
            if (!gameOver) {
                if (dir === "left") {
                    x--;
                } else if (dir === "right") {
                    x++;
                } else if (dir === "down") {
                    y++;
                }

if (!hasCollision()) {
                    draw();
                } else {
                    if (dir === "left") {
                        x++;
                    } else if (dir === "right") {
                        x--;
                    } else if (dir === "down") {
                        y--;
                    }
                }
            }
        }

// キーボード操作
        function keyListener(event) {
            const keys = {
                37: "left",
                39: "right",
                40: "down",
                32: "rotate"
            };

if (keys[event.keyCode]) {
                event.preventDefault();
                move(keys[event.keyCode]);
                if (keys[event.keyCode] === "rotate") {
                    rotatePiece();
                }
            }
        }
        document.addEventListener("keydown", keyListener);

// ゲームの開始
        draw();
        drop();
    </script>
</body>
</html>
```

このプログラムは、HTMLのcanvas要素を使用してイーロンマスク風のテトリスゲームを実装しています。キーボード操作によってブロックを移動および回転させることができます。スコアはラインが消えるたびに更新されます。ゲームが終了したら、スコアに " - Game Over" が表示されます。

このプログラムを1枚のHTMLファイルに保存し、ブラウザで開くと、イーロンマスク風のテトリスゲームをプレイすることができます。