AI game creator

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

No:2630

4145

←

Prev Next

→

homing missile
Developer User3494｜Date and time 23/6/22 4:43:09
Build time 28.859 sec｜Game capacity 2.674KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在のプレゼントランキング

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ホーミングミサイル</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #000080;
		}
		canvas {
			display: block;
			margin: auto;
			background-color: #ffffff;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas"></canvas>
	<script>
		let canvas = document.getElementById("myCanvas");
		let ctx = canvas.getContext("2d");

canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;

let missileX = canvas.width / 2;
		let missileY = canvas.height;
		let targetX = Math.floor(Math.random() * (canvas.width - 100)) + 50;
		let targetY = 50;
		let missileSpeed = 5;
		let targetSize = 50;
		let score = 0;
        
        // 絵文字を準備する
        let explosionEmoji = "💥";
        let targetEmoji = "🎯";

function drawMissile() {
			ctx.beginPath();
			ctx.arc(missileX, missileY, 5, 0, Math.PI * 2);
			ctx.fillStyle = "#ff0000";
			ctx.fill();
			ctx.closePath();
		}

function drawTarget() {
			ctx.font = "50px Arial";
			ctx.textBaseline = "middle";
			ctx.textAlign = "center";
			ctx.fillStyle = "#ff00ff";
			ctx.fillText(targetEmoji, targetX, targetY);
			// 点滅するアニメーションを作る
			ctx.globalAlpha = Math.abs(new Date() / 1000 % 2 - 1);
			ctx.fillText(targetEmoji, targetX, targetY);
			ctx.globalAlpha = 1;
		}

function collisionDetection() {
			let distance = Math.sqrt((missileX - targetX) * (missileX - targetX) + (missileY - targetY) * (missileY - targetY));
			if (distance < targetSize + 5) {
				score++;
                // 爆発のアニメーションを追加する
                ctx.font = "100px Arial";
                ctx.textBaseline = "middle";
                ctx.textAlign = "center";
                ctx.fillStyle = "#ffff00";
                ctx.fillText(explosionEmoji, targetX, targetY);
				targetX = Math.floor(Math.random() * (canvas.width - 100)) + 50;
				targetY = 50;
			}
		}

function drawScore() {
			ctx.font = "30px Arial";
			ctx.fillStyle = "#ffffff";
			ctx.fillText("Score: " + score, 10, 50);
		}

function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawMissile();
			drawTarget();
			collisionDetection();
			drawScore();
			missileY -= missileSpeed;
			if (missileY < targetY) {
				missileY = canvas.height;
				score--;
			}
			requestAnimationFrame(gameLoop);
		}

gameLoop();

canvas.addEventListener("mousemove", function(event) {
			missileX = event.clientX;
		});

canvas.addEventListener("touchmove", function(event) {
			event.preventDefault();
			missileX = event.touches[0].clientX;
		});
	</script>
</body>
</html>