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

No:2339

2424

←

Prev Next

→

Fighting games with stunts
Developer User3506｜Date and time 23/6/21 0:06:54
Build time 93.887 sec｜Game capacity 5.939KB｜

Script

The following is a list of、JavaScript code for a smartphone-operated stunt warfare game implemented as a single html file.

Stunt Games

The player rides a motorcycle、The player who scores more points within the time limit wins the game. The player who scores more points within the time limit wins.

This game is、Player 1 presses the up key、Player 2 presses the W key.、Jump each motorcycle. If an obstacle appears in the screen、If a player is hit by it, his/her score is reduced (if he/she avoids it completely, his/her score is added). The player with the most points is、Victory is awarded when the time limit expires.

←

Prev　Next

→ 　

Back　

[PR]現在の本の売れ筋ランキング

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

以下が、1枚のhtmlファイルとして実装したスマホで操作可能なスタント戦ゲームのJavaScriptコードです。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>スタント戦ゲーム</title>
</head>
<body>

<h1>スタント戦ゲーム</h1>
	<p>プレイヤーはモーターサイクルに乗り、相手プレイヤーとスタントバトルを行います。制限時間内により多くの点数を獲得したプレイヤーが勝利となります。</p>
	
	<canvas id="gameCanvas" width="400" height="400"></canvas>

// イベントリスナーの設定
		window.addEventListener("keydown", keyDownHandler, false);
		window.addEventListener("keyup", keyUpHandler, false);

// 主な処理（ゲームループ）
		drawGameObjects();
		timerId = setInterval(decreaseTimeLeft, 1000);

function drawGameObjects() {
			// ゲームオブジェクトの描画
			drawBackground();
			drawBikes();
			drawObstacles();
			drawScores();
			drawTimeLeft();

// ゲームオブジェクトの移動
			moveBikes();
			moveObstacles();
			
			// 一定時間ごとにログを出力
			setTimeout(function() {
				console.log("player1 score: " + player1.score);
				console.log("player2 score: " + player2.score);
			}, 3000);

// 制限時間が過ぎたらゲーム終了
			if (timeLeft <= 0) {
				clearInterval(timerId);
				alert("時間切れ！\n" + (player1.score > player2.score ? "player1の勝利！" : "player2の勝利！"));
			} else {
				requestAnimationFrame(drawGameObjects);
			}
		}

function drawBackground() {
			// 背景の描画
			context.fillStyle = "#cde";
			context.fillRect(0, 0, canvas.width, canvas.height);
			context.strokeStyle = "#36f";
			context.lineWidth = 5;
			context.strokeRect(0, 0, canvas.width, canvas.height);
		}

function drawBikes() {
			// 自車の描画
			drawBike(player1.x, player1.y, "#f00");
			drawBike(player2.x, player2.y, "#00f");
		}

function drawBike(x, y, color) {
			// モーターサイクルの描画（一般的なイメージ。実際の見た目は違うかもしれません）
			context.fillStyle = color;
			context.fillRect(x, y, bikeWidth, bikeHeight);
			context.fillStyle = "#000";
			context.fillRect(x + bikeWidth / 4, y + bikeHeight / 10, bikeWidth / 2, bikeHeight * 3 / 5);
			context.fillStyle = "#ff0";
			context.fillRect(x + bikeWidth * 2 / 5, y, bikeWidth / 5, bikeHeight / 10);
			context.beginPath();
			context.arc(x + bikeWidth / 4, y + bikeHeight * 9 / 10, bikeWidth / 10, 0, Math.PI * 2, false);
			context.arc(x + bikeWidth * 3 / 4, y + bikeHeight * 9 / 10, bikeWidth / 10, 0, Math.PI * 2, false);
			context.fillStyle = "#0f0";
			context.fill();
		}

function keyDownHandler(event) {
			// キーが押されたときの処理
			if (event.keyCode == 38 && !player1.isJumping) { // ↑キー
				player1.isJumping = true;
			}
			if (event.keyCode == 87 && !player2.isJumping) { // Wキー
				player2.isJumping = true;
			}
		}

function keyUpHandler(event) {
			// キーが離されたときの処理
		}

function drawScores() {
			// 得点の描画
			context.fillStyle = "#000";
			context.font = "24px sans-serif";
			context.fillText("player1: " + player1.score, 10, 30);
			context.fillText("player2: " + player2.score, canvas.width - 120, 30);
		}

function drawTimeLeft() {
			// 制限時間の描画
			context.fillStyle = "#000";
			context.font = "24px sans-serif";
			context.fillText("time left: " + timeLeft, canvas.width / 2 - 60, 30);
		}

function decreaseTimeLeft() {
			// 制限時間の減少
			timeLeft--;
		}
	</script>

</body>
</html>

このゲームは、プレイヤー1が↑キーを、プレイヤー2がWキーを押すことで、それぞれのモーターサイクルをジャンプさせます。障害物が画面内に現れた場合は、それに当たるとプレイヤーの得点が減少します（避け切った場合には得点が加算されます）。最も得点が多いプレイヤーが、制限時間が過ぎた時に勝利となります。