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

No:50458

82

2048
Developer User21309｜Date and time 24/3/8 16:20:51
Build time 8.925 sec｜Game capacity 3.025KB｜

2048

→ 　

0　

0　

　
　
　
　

[PR]現在の欲しいものランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html>
<head>
    <title>2048</title>
    <style>
        table {
            border-collapse: collapse;
            width: 90vw;
            height: 90vw;
            max-width: 400px;
            max-height: 400px;
            table-layout: fixed;
        }
        td {
            border: 1px solid black;
            width: calc(25% - 2px);
            height: calc(25% - 2px);
            text-align: center;
            font-size: 24px;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>2048</h1>
    <table id="gameBoard">
    </table>

<script>
        const size = 4;
        const emptyCellValue = 0;
        let gameBoard = [];
        
        function initializeGame() {
            for(let i = 0; i < size; i++) {
                gameBoard.push([]);
                for(let j = 0; j < size; j++) {
                    gameBoard[i][j] = emptyCellValue;
                }
            }
            generateNewCell();
            generateNewCell();
            renderBoard();
        }

function generateNewCell() {
            const emptyCells = [];
            for(let i = 0; i < size; i++) {
                for(let j = 0; j < size; j++) {
                    if(gameBoard[i][j] === emptyCellValue) {
                        emptyCells.push({x: i, y: j});
                    }
                }
            }
            const randomIndex = Math.floor(Math.random() * emptyCells.length);
            const newValue = Math.random() < 0.9 ? 2 : 4;
            const newCell = emptyCells[randomIndex];
            gameBoard[newCell.x][newCell.y] = newValue;
        }

function renderBoard() {
            const table = document.getElementById("gameBoard");
            table.innerHTML = "";
            for(let i = 0; i < size; i++) {
                const row = document.createElement("tr");
                for(let j = 0; j < size; j++) {
                    const cell = document.createElement("td");
                    cell.innerText = gameBoard[i][j] === emptyCellValue ? "" : gameBoard[i][j];
                    row.appendChild(cell);
                }
                table.appendChild(row);
            }
        }

function move(direction) {
            // Implement movement logic
        }

function canMove() {
            // Check if there are any valid moves left
        }

function handleKeyPress(event) {
            if(event.keyCode === 37 /*left*/) {
                move("left");
            } else if(event.keyCode === 38 /*up*/) {
                move("up");
            } else if(event.keyCode === 39 /*right*/) {
                move("right");
            } else if(event.keyCode === 40 /*down*/) {
                move("down");
            } else {
                return;
            }
        }

document.addEventListener("DOMContentLoaded", () => {
            initializeGame();
            document.addEventListener("keydown", handleKeyPress);
        });
    </script>
</body>
</html>