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

No:2626

1149

←

Prev Next

→

Drill holes and defeat the enemy.
Developer User3544｜Date and time 23/6/22 3:45:28
Build time 36.294 sec｜Game capacity 2.854KB｜

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 {
			font-size: 24px;
			text-align: center;
			background-color: #9c27b0;
			color: white;
		}

canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<h1>ドリルで穴を掘り敵を倒すゲーム</h1>
	<p>※スマホで操作可能です※</p>
	<canvas id="canvas"></canvas>
	<script>
		const canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth * 0.8;
		canvas.height = window.innerHeight * 0.8;
		const ctx = canvas.getContext("2d");

// 地面描画
		const groundPosY = canvas.height * 0.7;
		ctx.fillStyle = "#8bc34a";
		ctx.fillRect(0, groundPosY, canvas.width, canvas.height - groundPosY);

// 穴描画
		const holePosX = canvas.width * 0.5;
		const holeSize = 60;
		ctx.fillStyle = "#795548";
		ctx.beginPath();
		ctx.moveTo(holePosX, groundPosY);
		ctx.arc(holePosX, groundPosY, holeSize, Math.PI, 0, false);
		ctx.fill();

// ドリル描画
		const drillWidth = 40;
		const drillHeight = 80;
		let drillPosX = canvas.width * 0.2;
		let drillPosY = groundPosY - drillHeight;
		ctx.fillStyle = "#ffeb3b";
		ctx.fillRect(drillPosX, drillPosY, drillWidth, drillHeight);

// 敵描画
		const enemyWidth = 60;
		const enemyHeight = 80;
		let enemyPosX = canvas.width * 0.7;
		let enemyPosY = groundPosY - enemyHeight;
		ctx.fillStyle = "red";
		ctx.fillRect(enemyPosX, enemyPosY, enemyWidth, enemyHeight);

// ドリルと敵の衝突判定
		function checkCollision() {
			if (drillPosX + drillWidth > enemyPosX && drillPosX < enemyPosX + enemyWidth && drillPosY < enemyPosY + enemyHeight) {
				alert("敵を倒した！");
			}
		}

// 移動処理
		function moveDrill(event) {
			switch(event.keyCode) {
				case 37: // ←
					if (drillPosX > 0) {
						drillPosX -= 20;
					}
					break;
				case 39: // →
					if (drillPosX + drillWidth < canvas.width) {
						drillPosX += 20;
					}
					break;
				case 32: // スペース
					drillPosY -= 10;
					break;
			}
			checkCollision();
			draw();
		}

// 描画処理
		function draw() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 地面描画
			ctx.fillStyle = "#8bc34a";
			ctx.fillRect(0, groundPosY, canvas.width, canvas.height - groundPosY);

// 穴描画
			ctx.fillStyle = "#795548";
			ctx.beginPath();
			ctx.moveTo(holePosX, groundPosY);
			ctx.arc(holePosX, groundPosY, holeSize, Math.PI, 0, false);
			ctx.fill();

// ドリル描画
			ctx.fillStyle = "#ffeb3b";
			ctx.fillRect(drillPosX, drillPosY, drillWidth, drillHeight);

// 敵描画
			ctx.fillStyle = "red";
			ctx.fillRect(enemyPosX, enemyPosY, enemyWidth, enemyHeight);
		}

// キー押下時のイベントリスナー登録
		document.addEventListener("keydown", moveDrill);

draw();
	</script>
</body>
</html>