AI game creator

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

No:38107

←

Prev Next

→

Pac-Man
Developer User17224｜Date and time 24/1/22 15:15:10
Build time 12.033 sec｜Game capacity 2.257KB｜

Script

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>Pac-Man</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas" width="400" height="400"></canvas>
	<script>
		// Initialize the game canvas
		const canvas = document.getElementById("gameCanvas");
		const context = canvas.getContext("2d");

// Pac-Man object
		const pacMan = {
			x: 200,
			y: 200,
			speed: 2,
			direction: 0,  // 0: right, 1: down, 2: left, 3: up
		};

// Handle smartphone touch events to control Pac-Man
		document.addEventListener("touchstart", handleTouchStart, false);
		document.addEventListener("touchmove", handleTouchMove, false);

let xDown = null;
		let yDown = null;

function handleTouchStart(event) {
			const firstTouch = event.touches[0];
			xDown = firstTouch.clientX;
			yDown = firstTouch.clientY;
		}

function handleTouchMove(event) {
			if (!xDown || !yDown) {
				return;
			}

const xUp = event.touches[0].clientX;
			const yUp = event.touches[0].clientY;

const xDiff = xDown - xUp;
			const yDiff = yDown - yUp;

if (Math.abs(xDiff) > Math.abs(yDiff)) {
				if (xDiff > 0) {
					// Left swipe
					pacMan.direction = 2;
				} else {
					// Right swipe
					pacMan.direction = 0;
				}
			} else {
				if (yDiff > 0) {
					// Up swipe
					pacMan.direction = 3;
				} else {
					// Down swipe
					pacMan.direction = 1;
				}
			}

xDown = null;
			yDown = null;
		}

// Game loop
		function gameLoop() {
			// Clear the canvas
			context.clearRect(0, 0, canvas.width, canvas.height);

// Move Pac-Man based on direction
			switch (pacMan.direction) {
				case 0: // Right
					pacMan.x += pacMan.speed;
					break;
				case 1: // Down
					pacMan.y += pacMan.speed;
					break;
				case 2: // Left
					pacMan.x -= pacMan.speed;
					break;
				case 3: // Up
					pacMan.y -= pacMan.speed;
					break;
			}

// Draw Pac-Man
			context.fillStyle = "yellow";
			context.beginPath();
			context.arc(pacMan.x, pacMan.y, 20, 0.15 * Math.PI, 1.85 * Math.PI);
			context.lineTo(pacMan.x, pacMan.y);
			context.closePath();
			context.fill();

// Request next frame of the game loop
			requestAnimationFrame(gameLoop);
		}

// Start the game loop
		gameLoop();
	</script>
</body>
</html>