AI game creator

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

No:407

343

←

Prev Next

→

soccer
Developer User3044｜Date and time 23/6/13 23:19:09
Build time 59.915 sec｜Game capacity 3.353KB｜

Script

Score: 0

左右の矢印キーで選手を移動させ、スペースキーでシュートを決めよう！

このアプリはサッカーゲームです。ゴールキーパーとなり、ボールを外に出さずに相手のチームからシュートを防ぎます。プレイヤーは左右の矢印キーで移動し、スペースキーでシュートができます。ボールがプレイヤーの下にあるときにスペースキーを押すと、プレイヤーの位置に応じてボールがシュートされます。シュートがゴールに入るとスコアが加算されます。ボールが地面に落ちるとゲームオーバーになり、スコアが表示されます。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>Soccer Game</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: Arial, sans-serif;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			height: 100vh;
			background-color: #C6C6C6;
		}

canvas {
			border: 2px solid black;
		}

#score {
			font-size: 2rem;
		}
	</style>
</head>
<body>
	<div id="score">Score: 0</div>
	<canvas id="canvas" width="800" height="600"></canvas>
	<p>左右の矢印キーで選手を移動させ、スペースキーでシュートを決めよう！</p>
	<script>
		// ゲームの変数
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");
		var score = 0;
		var playerX = canvas.width / 2;
		var ballX = canvas.width / 2;
		var ballY = canvas.height - 50;
		var ballSpeedX = 5;
		var ballSpeedY = -5;
		
		// ゲームのループ
		function drawGame() {
			// 背景
			ctx.fillStyle = "#50C878";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// ボール
			ctx.beginPath();
			ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, false);
			ctx.fillStyle = "#FFFFFF";
			ctx.fill();
			ctx.closePath();

// プレイヤー
			ctx.fillStyle = "#F05A28";
			ctx.fillRect(playerX - 50, canvas.height - 20, 100, 15);

// スコア
			ctx.fillStyle = "#000000";
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, 10, 40);

// ボールの移動
			ballX += ballSpeedX;
			ballY += ballSpeedY;

// ボールが壁にぶつかったときの処理
			if (ballX < 10 || ballX > canvas.width - 10) {
				ballSpeedX = -ballSpeedX;
			}

if (ballY < 10) {
				ballSpeedY = -ballSpeedY;
			}

// ボールがプレイヤーに当たったときの処理
			if (ballY + 10 >= canvas.height - 20 && ballX >= playerX - 50 && ballX <= playerX + 50) {
				ballSpeedY = -ballSpeedY;
				score += 10;
			}

// ゲームオーバーの処理
			if (ballY > canvas.height) {
				clearInterval(drawInterval);
				alert("Game Over! Score: " + score);
				window.location.reload();
			}
		}

// キーイベントの処理
		document.addEventListener("keydown", function(event) {
			if (event.keyCode === 37) { // 左矢印キー
				playerX -= 20;
			} else if (event.keyCode === 39) { // 右矢印キー
				playerX += 20;
			} else if (event.keyCode === 32) { // スペースキー
				if (ballSpeedY > 0 && ballY >= canvas.height - 60) { // ボールが地面に付いているときだけシュートできる
					ballSpeedY = -10;
					ballSpeedX = (ballX - playerX) / 10;
				}
			}
		});

var drawInterval = setInterval(drawGame, 20);
	</script>
</body>
</html>