const canvas = document.getElementById('canvas'); const ctx = canvas.getContext('2d'); const gridSize = 4; const tileSize = 70; const padding = 10; const elements = ["H", "He", "Li", "Be", "B", "C", "N", "O", "F", "Ne", "Na"]; let grid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); function addRandomTile() { let emptyTiles = []; for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { if (!grid[y][x]) emptyTiles.push({ x, y }); } } if (emptyTiles.length > 0) { let { x, y } = emptyTiles[Math.floor(Math.random() * emptyTiles.length)]; grid[y][x] = 0; } } function drawGrid() { ctx.clearRect(0, 0, canvas.width, canvas.height); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { let value = grid[y][x]; ctx.fillStyle = value !== null ? "#eee" : "#ccc"; ctx.fillRect(x * (tileSize + padding), y * (tileSize + padding), tileSize, tileSize); if (value !== null) { ctx.fillStyle = "#000"; ctx.font = "20px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(elements[value], x * (tileSize + padding) + tileSize / 2, y * (tileSize + padding) + tileSize / 2); } } } } function slide(row) { let arr = row.filter(v => v !== null); for (let i = 0; i < arr.length - 1; i++) { if (arr[i] === arr[i + 1]) { arr[i]++; arr.splice(i + 1, 1); } } while (arr.length < gridSize) arr.push(null); return arr; } function rotateGrid(grid) { let newGrid = Array(gridSize).fill().map(() => Array(gridSize).fill(null)); for (let y = 0; y < gridSize; y++) { for (let x = 0; x < gridSize; x++) { newGrid[x][gridSize - y - 1] = grid[y][x]; } } return newGrid; } function move(direction) { for (let i = 0; i < direction; i++) grid = rotateGrid(grid); for (let y = 0; y < gridSize; y++) grid[y] = slide(grid[y]); for (let i = direction; i < 4; i++) grid = rotateGrid(grid); addRandomTile(); drawGrid(); } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowUp') move(0); if (e.key === 'ArrowRight') move(1); if (e.key === 'ArrowDown') move(2); if (e.key === 'ArrowLeft') move(3); }); addRandomTile(); addRandomTile(); drawGrid();

GPTgame

Sign up for free tokens!

2048게임에 숫자 대신 원소를 넣어 같은 원소끼리 합쳐지는 게임

GPTgame