テトリスのようなゲーム's game

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

No:15666

←

Prev Next

→

テトリスのようなゲーム
Developer User6722｜Date and time 23/9/10 15:24:28
Build time 55.963 sec｜Game capacity 8.036KB｜

Script

了解です。以下にテトリスのようなゲームの実装例を示します。完成したゲームとしてプレイすることができます。

このHTMLファイルをブラウザで開くと、テトリスのようなゲームがプレイできます。スマートフォンでも操作可能です。絵文字を使用してブロック（🔴, 🟢, 🔵, 🟠, 🟡, 🟣, 🟤）を表現しています。上矢印キーで回転、左矢印キーで左移動、右矢印キーで右移動、下矢印キーで下移動します。

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

了解です。以下にテトリスのようなゲームの実装例を示します。完成したゲームとしてプレイすることができます。

```html
<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        #game-board {
            display: grid;
            grid-template-columns: repeat(10, 40px);
            grid-template-rows: repeat(20, 40px);
            grid-gap: 1px;
            border: 1px solid #000;
            background-color: #fff;
        }
        .cell {
            background-color: transparent;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <div id="game-board"></div>

// ピースの形状と色
        const PIECES = [
            { shape: [[1, 1], [1, 1]], color: '🔴' },
            { shape: [[1, 1, 1], [0, 1, 0]], color: '🟢' },
            { shape: [[1, 1, 1], [0, 0, 1]], color: '🔵' },
            { shape: [[1, 1, 1], [1, 0, 0]], color: '🟠' },
            { shape: [[1, 1], [1, 0], [1, 0]], color: '🟡' },
            { shape: [[1, 1], [0, 1], [0, 1]], color: '🟣' },
            { shape: [[1, 1, 1, 1]], color: '🟤' }
        ];

let board = createBoard();

let currentPiece;
        let currentRow;
        let currentCol;

createPiece();

setInterval(updateGame, 500);

function createPiece() {
            let pieceIndex = Math.floor(Math.random() * PIECES.length);
            currentPiece = PIECES[pieceIndex].shape;
            currentRow = 0;
            currentCol = Math.floor(COLS / 2) - Math.floor(currentPiece[0].length / 2);
        }

function moveLeft() {
            if (canMoveLeft()) {
                currentCol--;
            }
        }

function moveRight() {
            if (canMoveRight()) {
                currentCol++;
            }
        }

function rotatePiece() {
            let rotatedPiece = [];
            for (let col = 0; col < currentPiece[0].length; col++) {
                let rotatedCol = [];
                for (let row = currentPiece.length - 1; row >= 0; row--) {
                    rotatedCol.push(currentPiece[row][col]);
                }
                rotatedPiece.push(rotatedCol);
            }

if (isValidPosition(rotatedPiece, currentRow, currentCol)) {
                currentPiece = rotatedPiece;
            }
        }

function isValidPosition(piece, row, col) {
            for (let r = 0; r < piece.length; r++) {
                for (let c = 0; c < piece[r].length; c++) {
                    if (piece[r][c] === 1) {
                        let newRow = row + r;
                        let newCol = col + c;

if (newRow < 0 || newRow >= ROWS || newCol < 0 || newCol >= COLS || board[newRow][newCol] === 1) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

function clearLines() {
            let linesCleared = 0;

for (let row = ROWS - 1; row >= 0; row--) {
                let isRowFull = true;
                for (let col = 0; col < COLS; col++) {
                    if (board[row][col] === 0) {
                        isRowFull = false;
                        break;
                    }
                }

if (isRowFull) {
                    linesCleared++;
                    board.splice(row, 1);
                    let newRow = [];
                    for (let col = 0; col < COLS; col++) {
                        newRow.push(0);
                    }
                    board.unshift(newRow);
                    row++;
                }
            }

if (linesCleared > 0) {
                console.log('Cleared ' + linesCleared + ' line(s)!');
            }
        }

function updateGame() {
            moveDown();
            updateBoard();
        }

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

for (let row = 0; row < board.length; row++) {
                for (let col = 0; col < board[row].length; col++) {
                    let cell = document.createElement('div');
                    cell.className = 'cell';
                    cell.innerHTML = board[row][col] === 1 ? '🧱' : '';
                    gameBoard.appendChild(cell);
                }
            }
        }