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

No:4565

108

←

Prev Next

→

Searchlight illuminates UFOs
Developer User3788｜Date and time 23/6/28 7:53:30
Build time 34.617 sec｜Game capacity 3.191KB｜

Script

ゲームを作ります。下記がコードです：

サーチライトでUFOを照らすゲーム

このゲームは、サーチライトでUFOを見つけて、照らし続けることが目的です。サーチライトをドラッグして照らすことができます。UFOがサーチライトに入った場合は、UFOがランダムに動きます。サーチライトとUFOの位置は画面上で表示されます。

←

Prev　Next

→ 　

Back　

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

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

ゲームを作ります。下記がコードです：

```
<!DOCTYPE html>
<html>
<head>
	<title>サーチライトでUFOを照らすゲーム</title>
</head>
<body>
	<h1>サーチライトでUFOを照らすゲーム</h1>
	<canvas id="gameCanvas"></canvas>

// UFOの初期位置
		var ufoX = canvas.width / 2;
		var ufoY = canvas.height / 2;

// サーチライトの初期位置
		var lightX = canvas.width / 2;
		var lightY = canvas.height;

// UFOの画像
		var ufoImg = new Image();
		ufoImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/flying-saucer_1f6f8.png";
		ufoImg.onload = function() {
			// 画像が読み込まれたら、初期位置に描画する
			ctx.drawImage(ufoImg, ufoX, ufoY);
		};

// サーチライトの画像
		var lightImg = new Image();
		lightImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/240/apple/271/flashlight_1f526.png";
		lightImg.onload = function() {
			// 画像が読み込まれたら、初期位置に描画する
			ctx.drawImage(lightImg, lightX - 25, lightY - 70);
		};

// サーチライトを移動する関数
		function moveLight(event) {
			if (event.touches && event.touches.length > 0) {
				// スマホのタッチ位置を取得
				var touchX = event.touches[0].clientX - canvas.offsetLeft;
				var touchY = event.touches[0].clientY - canvas.offsetTop;

// サーチライトを移動する
				lightX = touchX;
				lightY = touchY;

// UFOを照らしている場合は、UFOを移動する
				if (isUfoInLight()) {
					moveUfo();
				}

// サーチライトとUFOを再描画する
				drawLight();
				drawUfo();
			}
		}

// UFOを移動する関数
		function moveUfo() {
			// UFOをランダムに移動させる
			ufoX += Math.floor((Math.random() * 11) - 5);
			ufoY += Math.floor((Math.random() * 11) - 5);

// UFOが画面外に出た場合は、初期位置に戻す
			if (ufoX < 0 || ufoX > canvas.width || ufoY < 0 || ufoY > canvas.height) {
				ufoX = canvas.width / 2;
				ufoY = canvas.height / 2;
			}
		}

// UFOがサーチライトの範囲内にいるかどうかを判定する関数
		function isUfoInLight() {
			return (ufoX > (lightX - 120) && ufoX < (lightX + 120) && ufoY > (lightY - 120) && ufoY < (lightY + 120));
		}

// サーチライトを描画する関数
		function drawLight() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			ctx.drawImage(lightImg, lightX - 25, lightY - 70);
		}

// UFOを描画する関数
		function drawUfo() {
			ctx.drawImage(ufoImg, ufoX - 50, ufoY - 50);
		}

// サーチライトの移動イベントを登録する
		canvas.addEventListener("touchmove", moveLight, false);
	</script>
</body>
</html>
```