パズルゲームテトリスブロック型簡単's game

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

No:20662

←

Prev Next

→

パズルゲームテトリスブロック型簡単
Developer User9120｜Date and time 23/10/10 15:02:52
Build time 48.258 sec｜Game capacity 8.33KB｜

Script

了解しました。以下にテトリスのパズルゲームを実装します。

このコードはHTMLファイルとして実装されており、必ずJavaScriptが含まれています。JavaScriptのコードは`
`タグで囲まれています。ゲームはスマートフォンで遊ぶことができます。また、絵文字は使用していませんが、ゲームのブロックは任意の色で表示されます。以上がテトリスの簡易なパズルゲームの実装です。

←

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>Tetris</title>
    <style>
        .container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
    </style>
</head>
<body>
    <div class="container">
        <canvas id="tetris" width="300" height="600"></canvas>
    </div>

const scale = 20;
            const rows = canvas.height / scale;
            const columns = canvas.width / scale;

let score = 0;

const colors = [
                "#000000",
                "#FF0000",
                "#00FF00",
                "#0000FF",
                "#FFFF00",
                "#FF00FF",
                "#00FFFF",
                "#FFFFFF"
            ];

const tetrominoes = [
                [[0, 0, 0, 0],
                [1, 1, 1, 1],
                [0, 0, 0, 0],
                [0, 0, 0, 0]],

[[0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0],
                [0, 0, 1, 0]],

[[0, 1, 0, 0],
                [0, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0]],

[[0, 0, 0, 0],
                [0, 1, 1, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0]],

[[0, 0, 0, 0],
                [0, 1, 1, 0],
                [1, 1, 0, 0],
                [0, 0, 0, 0]],

[[0, 0, 0, 0],
                [1, 1, 0, 0],
                [0, 1, 1, 0],
                [0, 0, 0, 0]],

[[0, 0, 0, 0],
                [0, 0, 1, 0],
                [1, 1, 1, 0],
                [0, 0, 0, 0]]
            ];

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

drawTetromino(player.tetromino, player.position.x, player.position.y, player.color);
                drawMatrix(arena, { x: 0, y: 0 }, "#000000");

requestAnimationFrame(draw);
            }

function createMatrix(width, height) {
                const matrix = [];
                for (let row = 0; row < height; ++row) {
                    matrix[row] = new Array(width).fill(0);
                }
                return matrix;
            }

function playerReset() {
                const tetrominoIndex = Math.floor(Math.random() * tetrominoes.length);
                player.tetromino = tetrominoes[tetrominoIndex];
                player.position.y = 0;
                player.position.x = Math.floor(arena[0].length / 2) - Math.floor(player.tetromino[0].length / 2);
                player.color = tetrominoIndex + 1;

if (collide(arena, player)) {
                    arena.forEach(row => row.fill(0));
                    score = 0;
                }
            }

function playerMove(direction) {
                player.position.x += direction;
                if (collide(arena, player)) {
                    player.position.x -= direction;
                }
            }

function playerDrop() {
                player.position.y++;
                if (collide(arena, player)) {
                    player.position.y--;
                    merge(arena, player);
                    playerReset();
                    arenaSweep();
                    updateScore();
                }
            }

function updateScore() {
                document.getElementById("score").innerText = score;
            }

const arena = createMatrix(columns, rows);

const player = {
                position: { x: 0, y: 0 },
                tetromino: null,
                color: null
            };

playerReset();
            updateScore();
            draw();
        });
    </script>
</body>
</html>
```

このコードはHTMLファイルとして実装されており、必ずJavaScriptが含まれています。JavaScriptのコードは`<script>`タグで囲まれています。ゲームはスマートフォンで遊ぶことができます。また、絵文字は使用していませんが、ゲームのブロックは任意の色で表示されます。

以上がテトリスの簡易なパズルゲームの実装です。