Pac-Man (chess game)'s game

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

No:2282

4718

←

Prev Next

→

Pac-Man (chess game)
Developer User3522｜Date and time 23/6/20 20:32:19
Build time 75.636 sec｜Game capacity 5.753KB｜

Script

game over

*Im assuming youre using a smartphone.、The layout of the answer column is vertical, which makes the screen narrower. It is recommended to operate in landscape orientation on an actual smartphone.

←

Prev　Next

→ 　

Back　

[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 {
			margin: 0;
			padding: 0;
		}

canvas {
			width: 100%;
			height: 100%;
			background-color: #000;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			z-index: 1;
		}

#score {
			font-size: 24px;
			color: #fff;
			position: absolute;
			top: 20px;
			right: 20px;
			z-index: 2;
		}

#gameover {
			font-size: 48px;
			color: #fff;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			text-align: center;
			display: none;
			z-index: 3;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score"></div>
	<div id="gameover">ゲームオーバー</div>
	<script>
		const canvas = document.getElementById('canvas');
		const ctx = canvas.getContext('2d');

const PACMAN_RADIUS = 15;
		const PACMAN_SPEED = 3;
		const GHOST_RADIUS = 15;
		const GHOST_SPEED = 2;
		const DOT_RADIUS = 5;
		const DOT_COUNT = 100;

const UP = 0;
		const RIGHT = 1;
		const DOWN = 2;
		const LEFT = 3;

let pacmanX = canvas.width / 2;
		let pacmanY = canvas.height / 2;
		let pacmanDirection = RIGHT;
		let pacmanScore = 0;

let ghostX = Math.floor(Math.random() * canvas.width);
		let ghostY = Math.floor(Math.random() * canvas.height);
		let ghostDirection = Math.floor(Math.random() * 4);

let dots = [];
		for (let i = 0; i < DOT_COUNT; i++) {
			dots.push({
				x: Math.floor(Math.random() * canvas.width),
				y: Math.floor(Math.random() * canvas.height),
				eaten: false,
			});
		}

function drawGhost(x, y, radius) {
			ctx.beginPath();
			ctx.arc(x, y, radius, 0, Math.PI * 2);
			ctx.fillStyle = '#f44336';
			ctx.fill();
			ctx.closePath();
		}

function drawDot(x, y, radius, eaten) {
			if (!eaten) {
				ctx.beginPath();
				ctx.arc(x, y, radius, 0, Math.PI * 2);
				ctx.fillStyle = '#fff';
				ctx.fill();
				ctx.closePath();
			}
		}

function distance(x1, y1, x2, y2) {
			return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
		}

function checkCollisions() {
			if (distance(pacmanX, pacmanY, ghostX, ghostY) < PACMAN_RADIUS + GHOST_RADIUS) {
				gameOver();
			}

for (let i = 0; i < DOT_COUNT; i++) {
				if (!dots[i].eaten && distance(pacmanX, pacmanY, dots[i].x, dots[i].y) < PACMAN_RADIUS + DOT_RADIUS) {
					dots[i].eaten = true;
					pacmanScore += 10;
				}
			}
		}

function gameOver() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = '#000';
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.font = '48px sans-serif';
			ctx.fillStyle = '#fff';
			ctx.textAlign = 'center';
			ctx.fillText('ゲームオーバー', canvas.width / 2, canvas.height / 2);
			document.removeEventListener('keydown', handleInput);
		}

if (ghostDirection === UP) {
				ghostY -= GHOST_SPEED;
			} else if (ghostDirection === RIGHT) {
				ghostX += GHOST_SPEED;
			} else if (ghostDirection === DOWN) {
				ghostY += GHOST_SPEED;
			} else if (ghostDirection === LEFT) {
				ghostX -= GHOST_SPEED;
			}

if (pacmanX < 0) {
				pacmanX = canvas.width;
			} else if (pacmanX > canvas.width) {
				pacmanX = 0;
			}

if (pacmanY < 0) {
				pacmanY = canvas.height;
			} else if (pacmanY > canvas.height) {
				pacmanY = 0;
			}

if (ghostX < 0) {
				ghostX = canvas.width;
			} else if (ghostX > canvas.width) {
				ghostX = 0;
			}

if (ghostY < 0) {
				ghostY = canvas.height;
			} else if (ghostY > canvas.height) {
				ghostY = 0;
			}

if (distance(pacmanX, pacmanY, ghostX, ghostY) < PACMAN_RADIUS + GHOST_RADIUS) {
				gameOver();
			}

ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = '#000';
			ctx.fillRect(0, 0, canvas.width, canvas.height);

for (let i = 0; i < DOT_COUNT; i++) {
				drawDot(dots[i].x, dots[i].y, DOT_RADIUS, dots[i].eaten);
			}

drawGhost(ghostX, ghostY, GHOST_RADIUS);
			drawPacman(pacmanX, pacmanY, pacmanDirection, PACMAN_RADIUS);

document.getElementById('score').innerHTML = 'SCORE: ' + pacmanScore;

requestAnimationFrame(update);
		}

document.addEventListener('keydown', handleInput);
		update();
	</script>
</body>
</html>

※スマホでの操作が前提ですが、回答欄のレイアウトが縦長なため画面が狭くなってしまいます。実際のスマホでは横向きで操作することをおすすめします。