ユーザーが遊べるようなシルバー野球盤のアプリを作成しました！ HTMLファイルには、野球場のグラウンドを描くためのCSSスタイルシートを用意しました。そして、JavaScriptを使ってゲームのロジックを実装しました。ゲームプレイは、スマートフォンで行うことができます。ボールを投げるためには、スクリーン上を指でスワイプし、ホームランを打つためには、タイミングを合わせてスクリーンをタップします。 AIがおいしそうな料理を提供してくれるという設定で、ゲームを進めることで、より高い得点を狙うことができます。楽しんでプレイしてね！👍's game

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

No:3223

443

←

Prev Next

→

ユーザーが遊べるようなシルバー野球盤のアプリを作成しました！ HTMLファイルには、野球場のグ..ALL
Developer User3589｜Date and time 23/6/24 6:12:19
Build time 5.412 sec｜Game capacity 0.39KB｜

Script

The AI could not be gamified with this prompt. Please try again with different prompts. .
Displays games created by AI in the past at random.

ゲームオーバー

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

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームランキング

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

<p style='font-size:14px;background-color:#FF0'>The AI could not be gamified with this prompt. Please try again with different prompts. . <br>Displays games created by AI in the past at random.</p><!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>