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

No:3016

141

Fallen object puzzle game
Developer もちきなこ｜Date and time 23/6/23 12:27:23
Build time 55.136 sec｜Game capacity 4.954KB｜

落ち物パズルゲーム

→ 　

0　

0　

　
　
　
　

[PR]現在の売れ筋アプリランキング

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

(C)2023 HisashiApp

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>落ち物パズルゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #ffc;
			user-select: none;
		}
		canvas {
			display: block;
			margin: auto;
			border: 4px solid #000;
		}
		h1 {
			text-align: center;
			font-size: 48px;
			margin-top: 32px;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<h1>落ち物パズルゲーム</h1>
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");

const BLOCK_SIZE = 64;
		const WIDTH = 8;
		const HEIGHT = 12;
		const DROP_SPEED = 4;

const BLOCK_IMG = new Image();
		BLOCK_IMG.src = "https://i.imgur.com/nLKaY8X.png";

let field = new Array(WIDTH * HEIGHT);
		let activeBlock = {x: 0, y: 0, type: 0};
		let nextBlockType = 0;
		let nextBlockImg = new Image();
		let score = 0;
		let isGameOver = false;

function init() {
			for (let i = 0; i < WIDTH * HEIGHT; i++) {
				field[i] = -1;
			}
			activeBlock = {x: 0, y: 0, type: Math.floor(Math.random() * 5)};
			nextBlockType = Math.floor(Math.random() * 5);
			nextBlockImg.src = "https://i.imgur.com/3OvzzI0.png";
			score = 0;
			isGameOver = false;
			update();
		}

function update() {
			if (isGameOver) {
				ctx.fillStyle = "rgba(0, 0, 0, 0.5)";
				ctx.fillRect(0, 0, canvas.width, canvas.height);
				ctx.fillStyle = "#fff";
				ctx.font = "48px sans-serif";
				ctx.fillText("GAME OVER", 100, 300);
				return;
			}
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawField();
			drawBlock(activeBlock.x, activeBlock.y, activeBlock.type);
			drawNextBlock(nextBlockImg, nextBlockType);
			if (checkCollision(activeBlock.x, activeBlock.y + DROP_SPEED, activeBlock.type)) {
				fixBlock(activeBlock.x, activeBlock.y, activeBlock.type);
				activeBlock = {x: 0, y: 0, type: nextBlockType};
				nextBlockType = Math.floor(Math.random() * 5);
				nextBlockImg.src = "https://i.imgur.com/3OvzzI0.png";
				if (checkCollision(activeBlock.x, activeBlock.y, activeBlock.type)) {
					isGameOver = true;
				}
			} else {
				activeBlock.y += DROP_SPEED;
			}
			setTimeout(update, 500);
		}

function drawField() {
			for (let y = 0; y < HEIGHT; y++) {
				for (let x = 0; x < WIDTH; x++) {
					let i = y * WIDTH + x;
					ctx.drawImage(BLOCK_IMG, field[i] * BLOCK_SIZE, 0, BLOCK_SIZE, BLOCK_SIZE, x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
				}
			}
		}

function drawBlock(x, y, type) {
			ctx.drawImage(BLOCK_IMG, type * BLOCK_SIZE, 0, BLOCK_SIZE, BLOCK_SIZE, x * BLOCK_SIZE, y * BLOCK_SIZE, BLOCK_SIZE, BLOCK_SIZE);
		}

function drawNextBlock(img, type) {
			ctx.drawImage(img, type * BLOCK_SIZE, 0, BLOCK_SIZE, BLOCK_SIZE, 520, 50, BLOCK_SIZE, BLOCK_SIZE);
		}

function fixBlock(x, y, type) {
			for (let py = 0; py < 4; py++) {
				for (let px = 0; px < 4; px++) {
					let i = (y + py) * WIDTH + (x + px);
					let j = py * 4 + px;
					if (typeTable[type][j]) {
						field[i] = type;
					}
				}
			}
			let lines = 0;
			for (let y = 0; y < HEIGHT; y++) {
				if (field.slice(y * WIDTH, y * WIDTH + WIDTH).every((value) => value >= 0)) {
					field.splice(y * WIDTH, WIDTH);
					field.unshift(-1, -1, -1, -1, -1, -1, -1, -1);
					lines++;
				}
			}
			score += lines * 100;
		}

function checkCollision(x, y, type) {
			for (let py = 0; py < 4; py++) {
				for (let px = 0; px < 4; px++) {
					let i = (y + py) * WIDTH + (x + px);
					let j = py * 4 + px;
					if (typeTable[type][j]) {
						if (x + px < 0 || x + px >= WIDTH || y + py >= HEIGHT) {
							return true;
						}
						if (y + py >= 0 && field[i] >= 0) {
							return true;
						}
					}
				}
			}
			return false;
		}

document.addEventListener("keydown", (event) => {
			if (isGameOver) {
				return;
			}
			switch (event.code) {
				case "ArrowLeft":
					if (!checkCollision(activeBlock.x - 1, activeBlock.y, activeBlock.type)) {
						activeBlock.x--;
					}
					break;
				case "ArrowRight":
					if (!checkCollision(activeBlock.x + 1, activeBlock.y, activeBlock.type)) {
						activeBlock.x++;
					}
					break;
				case "ArrowDown":
					if (!checkCollision(activeBlock.x, activeBlock.y + DROP_SPEED, activeBlock.type)) {
						activeBlock.y += DROP_SPEED;
					}
					break;
				case "ArrowUp":
					let rotatedType = (activeBlock.type + 1) % 5;
					if (!checkCollision(activeBlock.x, activeBlock.y, rotatedType)) {
						activeBlock.type = rotatedType;
					}
					break;
			}
		});

const typeTable = [
			[0, 0, 0, 0,
			 1, 1, 1, 0,
			 0, 0, 1, 0,
			 0, 0, 0, 0],
			[0, 0, 0, 0,
			 0, 2, 0, 0,
			 0, 2, 0, 0,
			 0, 2, 2, 0],
			[0, 0, 0, 0,
			 0, 0, 0, 0,
			 3, 3, 0, 0,
			 0, 3, 3, 0],
			[0, 0, 0, 0,
			 0, 4, 0, 0,
			 4, 4, 4, 0,
			 0, 0, 0, 0],
			[0, 0, 0, 0,
			 5, 5, 0, 0,
			 0, 5, 5, 0,
			 0, 0, 0, 0]
		];

init();
	</script>
</body>
</html>