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

No:4319

346

Throwing shurikens at a moving target
Developer User1006｜Date and time 23/6/27 19:38:44
Build time 51.77 sec｜Game capacity 4.917KB｜

この要件に基づいて作成したゲームのサンプルコードを示します。

忍者アドベンチャー

スマホで遊べる、手裏剣を使ったアクションゲームです。

このサンプルコードは、画面上部にタイトルを表示し、キャンバスを使用して手と手裏剣を描画しています。手裏剣は上から下に生成され、手に当たった場合にスコアを得点し、手裏剣が一定の位置に達するまでに手に当たらなかった場合は、手裏剣が画面下部に達したことが判定されます。手裏剣が手に当たる前に画面下部に達した場合は、得点されません。プレイヤーが手裏剣に当たると、ゲームオーバーと判定されます。プレイヤーは、キャンバスの左右にあるエリアをタップすることで手を移動できます。また、テキストメッセージを使用して、ゲームオーバー時にメッセージを表示します。

→ 　

2　

1　

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

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

(C)2023 HisashiApp

この要件に基づいて作成したゲームのサンプルコードを示します。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>忍者アドベンチャー</title>
</head>
<body>
	<h1>忍者アドベンチャー</h1>
	<p>スマホで遊べる、手裏剣を使ったアクションゲームです。</p>
	
	<canvas id="gameCanvas" width="400" height="400"></canvas>
	
	<script>
		// ゲームのパラメータを定義
		const GAME_SPEED = 1;
		const CANVAS_BORDER_COLOR = 'black';
		const CANVAS_BACKGROUND_COLOR = "white";
		const HANDS_WIDTH = 20;
		const HANDS_HEIGHT = 20;
		const HANDS_COLOR = 'red';
		const SHURIKEN_RADIUS = 10;
		const SHURIKEN_COLOR = 'blue';
		const SHURIKEN_SPEED = 5;
		const SHURIKEN_INTERVAL = 500;
		const TOUCH_MARGIN = 40;
		const GAME_OVER_MSG = "GAME OVER";
		
		// ゲームの状態を定義
		let score = 0;
		let gameOver = false;

// ゲーム画面を描画するための関数
		function draw() {
			if (gameOver) {
				ctx.font = "30px Arial";
				ctx.fillStyle = "red";
				ctx.fillText(GAME_OVER_MSG, canvas.width/2 - 75, canvas.height/2);
				return;
			}
			
			// 画面をクリア
			ctx.fillStyle = CANVAS_BACKGROUND_COLOR;
			ctx.strokestyle = CANVAS_BORDER_COLOR;
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.strokeRect(0, 0, canvas.width, canvas.height);
			
			// 手を描画
			ctx.fillStyle = HANDS_COLOR;
			ctx.fillRect(handsX, handsY, HANDS_WIDTH, HANDS_HEIGHT);
			
			// 手裏剣を描画
			ctx.fillStyle = SHURIKEN_COLOR;
			shurikenList.forEach(function(shuriken) {
				ctx.beginPath();
				ctx.arc(shuriken.x, shuriken.y, SHURIKEN_RADIUS, 0, 2*Math.PI);
				ctx.fill();
				shuriken.y += SHURIKEN_SPEED;
			});
			
			// 衝突判定
			shurikenList.forEach(function(shuriken, shurikenIndex) {
				if (!gameOver && shuriken.y + SHURIKEN_RADIUS >= handsY && shuriken.x > handsX && shuriken.x < handsX + HANDS_WIDTH) {
					shurikenList.splice(shurikenIndex, 1);
					score++;
				}
				
				if (shuriken.y + SHURIKEN_RADIUS > canvas.height) {
					shurikenList.splice(shurikenIndex, 1);
				}
			});
			
			// スコアを表示
			ctx.font = "20px Arial";
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + score, 10, 30);
		}
		
		// ゲームオーバー時の処理
		function gameOverFunc() {
			gameOver = true;
		}
		
		// キャンバスをクリックしたときの処理
		function canvasClicked(event) {
			if (event.clientX > handsX + HANDS_WIDTH/2) {
				handsX += 10;
			} else {
				handsX -= 10;
			}
		}
		
		// スマホのタッチイベントでの操作処理
		function touchScreen(event) {
			event.preventDefault();
			if (event.changedTouches) {
				let handTouch = event.changedTouches[0];
				if (handTouch.pageX > handsX + HANDS_WIDTH/2 + TOUCH_MARGIN) {
					handsX += 10;
				} else if (handTouch.pageX < handsX + HANDS_WIDTH/2 - TOUCH_MARGIN) {
					handsX -= 10;
				}
			}
		}
		
		// 手裏剣を生成する処理
		function generateShuriken() {
			if (!gameOver) {
				let x = Math.floor(Math.random() * (canvas.width - 2*SHURIKEN_RADIUS)) + SHURIKEN_RADIUS;
				let y = 0;
				
				shurikenList.push({x: x, y: y});
			}
		}
		
		// ゲーム画面のキャンバスを取得
		let canvas = document.getElementById("gameCanvas");
		let ctx = canvas.getContext("2d");
		
		// キャンバスをクリックしたときのイベントリスナーを設定
		canvas.addEventListener('click', canvasClicked, false);
		
		// スマホ操作のイベントリスナーを設定
		canvas.addEventListener('touchstart', touchScreen, false);
		canvas.addEventListener('touchmove', touchScreen, false);
		canvas.addEventListener('touchend', touchScreen, false);
		
		// ゲームオバーライドのイベントリスナーを設定
		canvas.addEventListener('gameOver', gameOverFunc, false);
		
		// ゲームループを開始
		let handsX = canvas.width/2 - HANDS_WIDTH/2;
		let handsY = canvas.height - HANDS_HEIGHT*2;
		let shurikenList = [];
		setInterval(draw, GAME_SPEED);
		setInterval(generateShuriken, SHURIKEN_INTERVAL);
	</script>
</body>
</html>

このサンプルコードは、画面上部にタイトルを表示し、キャンバスを使用して手と手裏剣を描画しています。手裏剣は上から下に生成され、手に当たった場合にスコアを得点し、手裏剣が一定の位置に達するまでに手に当たらなかった場合は、手裏剣が画面下部に達したことが判定されます。手裏剣が手に当たる前に画面下部に達した場合は、得点されません。プレイヤーが手裏剣に当たると、ゲームオーバーと判定されます。プレイヤーは、キャンバスの左右にあるエリアをタップすることで手を移動できます。また、テキストメッセージを使用して、ゲームオーバー時にメッセージを表示します。