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

No:860

281

←

Prev Next

→

Soccer Games
Developer User3168｜Date and time 23/6/17 21:04:20
Build time 47.715 sec｜Game capacity 3.54KB｜

Script

の例を示します。

サッカーゲーム

←左右の矢印キーで移動　↑キーでジャンプ　空中で←→キーで移動

このサッカーゲームは、赤いボールを右のゴールポストに入れることが目的です。青いキャラクターを操作し、ボールを跳ね返してゴールを目指しましょう。左右の矢印キーでキャラクターを移動させ、↑キーでジャンプします（空中で←→キーで移動可能）。スマホでも操作可能ですが、矢印キーが表示されず、物理キーボードを使う必要があります。また、画面が小さいため、操作には慣れが必要かもしれません。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

の例を示します。

<!DOCTYPE html>
<html>
<head>
	<title>サッカーゲーム</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #5eb95e;
			text-align: center;
		}
		canvas {
			border: 1px solid #000;
			background-color: #fff;
		}
	</style>
</head>
<body>
	<h1>サッカーゲーム</h1>
	<canvas id="canvas" width="300" height="200"></canvas>
	<p>←左右の矢印キーで移動　↑キーでジャンプ　空中で←→キーで移動</p>
	<script>
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// ボールの初期位置と速度
		var ballX = 150;
		var ballY = 100;
		var ballSpeedX = 3;
		var ballSpeedY = 0;

// ゴールポストの位置
		var goalX = 260;

// キャラクターの初期位置と速度
		var charX = 30;
		var charY = 120;
		var charSpeedX = 0;
		var charSpeedY = 5;

// キー入力のフラグ
		var leftKey = false;
		var rightKey = false;
		var upKey = false;

// キー入力のイベントリスナー
		document.addEventListener("keydown", function(event) {
			if (event.keyCode == 37) { // ←キー
				leftKey = true;
			} else if (event.keyCode == 39) { // →キー
				rightKey = true;
			} else if (event.keyCode == 38) { // ↑キー
				upKey = true;
			}
		});

// ゲームループ
		setInterval(function() {
			// キャラクターの移動
			if (leftKey && !rightKey) {
				charSpeedX = -3;
			} else if (!leftKey && rightKey) {
				charSpeedX = 3;
			} else {
				charSpeedX = 0;
			}

if (upKey && charY == 120) {
				charSpeedY = -10;
			}

charX += charSpeedX;
			charY += charSpeedY;

// 重力
			if (charY < 120) {
				charSpeedY += 0.5;
			} else {
				charSpeedY = 0;
				charY = 120;
			}

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

// ボールの跳ね返り
			if (ballX < 5 || ballX > 295) {
				ballSpeedX *= -1;
			}
			if (ballY < 5 || ballY > 195) {
				ballSpeedY *= -1;
			}

// ゴール判定
			if (ballX > goalX) {
				alert("ゴール！！！");
				ballX = 150;
				ballY = 100;
				ballSpeedX = 3;
				ballSpeedY = 0;
			}

// 描画
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.beginPath();
			ctx.arc(ballX, ballY, 5, 0, Math.PI*2, false);
			ctx.fillStyle = "#f00";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.moveTo(goalX, 0);
			ctx.lineTo(goalX, 200);
			ctx.lineWidth = 5;
			ctx.strokeStyle = "#fff";
			ctx.stroke();
			ctx.closePath();
			ctx.fillStyle = "#00f";
			ctx.fillRect(charX, charY, 20, 20);
		}, 30);
	</script>
</body>
</html>

このサッカーゲームは、赤いボールを右のゴールポストに入れることが目的です。青いキャラクターを操作し、ボールを跳ね返してゴールを目指しましょう。左右の矢印キーでキャラクターを移動させ、↑キーでジャンプします（空中で←→キーで移動可能）。

スマホでも操作可能ですが、矢印キーが表示されず、物理キーボードを使う必要があります。また、画面が小さいため、操作には慣れが必要かもしれません。