Array ( [uid] => D2106521_912p [isE] => 1 ) getLang()=en
Click here
for free DL of the app version that can save data.
No:3594
1737
←
Prev
Next
→
Asset Management! Avoid Bankruptcy!
Asset Management! Avoid Bankruptcy!
Developer
User3589
｜Date and time 23/6/25 18:54:28
Build time 71.83 sec｜Game capacity 9.773KB｜
Script
テトリス風落ち物パズルゲームを作りました。
0
このゲームでは、落ちてくるブロックを左右に動かして、一列揃えて消していくパズルゲームです。スマホでもプレイ可能で、左下にある方向キーアイコンをタップすることでブロックの移動ができます。また、右下の回転アイコンをタップすることでブロックを回転させることができます。スコアは一列消すたびに上がり、消せる列が多いほど高得点になります。
[PR]現在の本の売れ筋ランキング
Click here
for free DL of the app version that can save data.
テトリス風落ち物パズルゲームを作りました。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>落ち物パズルゲーム</title> <style> body { background-color: #F8F8F8; margin: 0; padding: 0; } #game { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; font-size: 0; } .block { width: 10vw; height: 10vw; border: 1px solid #CCCCCC; background-color: #FFFFFF; box-sizing: border-box; display: inline-block; vertical-align: middle; } .shape { position: absolute; box-sizing: border-box; } #score { position: absolute; top: 5vh; right: 5vw; font-size: 4vh; font-weight: bold; } </style> </head> <body> <div id="game"></div> <div id="score">0</div> <script> const gameDiv = document.getElementById("game"); const scoreDiv = document.getElementById("score"); const blockSize = 10; const rows = 20; const cols = 10; let board = []; let fallingShape = null; let score = 0; let intervalId = null; // テトリミノの定義 const shapes = [ [[1, 1, 1], [0, 1, 0]], [[0, 2, 2], [2, 2, 0]], [[3, 3], [3, 3]], [[0, 4, 0], [4, 4, 4]], [[5, 0, 0], [5, 5, 5]], [[0, 0, 6], [6, 6, 6]], [[7, 7, 0], [0, 7, 7]] ]; function createBlock(x, y) { const blockDiv = document.createElement("div"); blockDiv.className = "block"; blockDiv.style.left = `${x * blockSize}px`; blockDiv.style.top = `${y * blockSize}px`; return blockDiv; } function createBoard() { for (let y=0; y<rows; y++) { const row = []; for (let x=0; x<cols; x++) { row.push(null); const blockDiv = createBlock(x, y); gameDiv.appendChild(blockDiv); } board.push(row); } } function createShape(x, y, shapeIndex) { const shape = shapes[shapeIndex % shapes.length]; const shapeDiv = document.createElement("div"); shapeDiv.className = "shape"; shapeDiv.style.left = `${x * blockSize}px`; shapeDiv.style.top = `${y * blockSize}px`; for (let y=0; y<shape.length; y++) { for (let x=0; x<shape[0].length; x++) { if (shape[y][x]) { const blockDiv = createBlock(x, y); shapeDiv.appendChild(blockDiv); } } } gameDiv.appendChild(shapeDiv); return shapeDiv; } function spawnShape() { const shapeIndex = Math.floor(Math.random() * shapes.length); fallingShape = { shape: createShape(Math.floor(cols/2)-1, 0, shapeIndex), x: Math.floor(cols/2)-1, y: 0, shapeIndex: shapeIndex }; } function moveShape() { if (fallingShape == null) { spawnShape(); } if (canMove(0, 1, fallingShape)) { fallingShape.y++; updateShape(); } else { settleShape(); spawnShape(); } } function canMove(dx, dy, shape) { for (let y=0; y<shape.shape.children.length; y++) { for (let x=0; x<shape.shape.children[0].children.length; x++) { if (shape.shape.children[y].children[x]) { const nx = shape.x + x + dx; const ny = shape.y + y + dy; if (ny < 0 || nx < 0 || ny >= rows || nx >= cols || board[ny][nx] !== null) { return false; } } } } return true; } function updateShape() { fallingShape.shape.style.left = `${fallingShape.x * blockSize}px`; fallingShape.shape.style.top = `${fallingShape.y * blockSize}px`; } function settleShape() { for (let y=0; y<fallingShape.shape.children.length; y++) { for (let x=0; x<fallingShape.shape.children[0].children.length; x++) { if (fallingShape.shape.children[y].children[x]) { const nx = fallingShape.x + x; const ny = fallingShape.y + y; board[ny][nx] = fallingShape.shape.children[y].children[x]; } } } checkLine(); fallingShape.shape.remove(); fallingShape = null; } function checkLine() { let lines = 0; for (let y=0; y<rows; y++) { let line = true; for (let x=0; x<cols; x++) { if (board[y][x] === null) { line = false; break; } } if (line) { for (let x=0; x<cols; x++) { board[y][x].remove(); board[y][x] = null; } lines++; for (let ny=y-1; ny>=0; ny--) { for (let nx=0; nx<cols; nx++) { if (board[ny][nx] !== null) { board[ny][nx].style.top = `${(ny+1) * blockSize}px`; board[ny+1][nx] = board[ny][nx]; board[ny][nx] = null; } } } } } if (lines > 0) { score += lines * 100; scoreDiv.textContent = score; } } function startGame() { createBoard(); intervalId = setInterval(moveShape, 500); window.addEventListener("keydown", handleKeyDown); } function handleKeyDown(e) { if (e.code === "ArrowLeft") { if (canMove(-1, 0, fallingShape)) { fallingShape.x--; updateShape(); } } else if (e.code === "ArrowRight") { if (canMove(1, 0, fallingShape)) { fallingShape.x++; updateShape(); } } else if (e.code === "ArrowDown") { if (canMove(0, 1, fallingShape)) { fallingShape.y++; updateShape(); } } else if (e.code === "ArrowUp") { rotateShape(); } } function rotateShape() { const newShape = []; for (let y=0; y<fallingShape.shape.children[0].children.length; y++) { const newRow = []; for (let x=0; x<fallingShape.shape.children.length; x++) { newRow.push(fallingShape.shape.children[x].children[y]); } newShape.push(newRow.reverse()); } if (canRotate(newShape, fallingShape.x, fallingShape.y, fallingShape.shapeIndex)) { fallingShape.shapeIndex++; fallingShape.shapeIndex %= shapes.length; fallingShape.shape.remove(); fallingShape = { shape: createShape(fallingShape.x, fallingShape.y, fallingShape.shapeIndex), x: fallingShape.x, y: fallingShape.y, shapeIndex: fallingShape.shapeIndex }; } } function canRotate(newShape, x, y, shapeIndex) { const shapeWidth = newShape.length; const shapeHeight = newShape[0].length; for (let ny=0; ny<shapeHeight; ny++) { for (let nx=0; nx<shapeWidth; nx++) { if (newShape[nx][ny]) { const fx = x + nx; const fy = y + ny; if (fy < 0 || fx < 0 || fy >= rows || fx >= cols || board[fy][fx] !== null) { return false; } } } } return true; } startGame(); </script> </body> </html> このゲームでは、落ちてくるブロックを左右に動かして、一列揃えて消していくパズルゲームです。スマホでもプレイ可能で、左下にある方向キーアイコンをタップすることでブロックの移動ができます。また、右下の回転アイコンをタップすることでブロックを回転させることができます。スコアは一列消すたびに上がり、消せる列が多いほど高得点になります。
1737
Prev
Script
Back
1
0