Hercules beetle (Dynastes hercules)'s game

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

No:3534

2991

←

Prev Next

→

Hercules beetle (Dynastes hercules)
Developer anonymous｜Date and time 70/1/1 9:49:46
Build time unknown sec｜Game capacity 2.986KB｜

Script

以下にヘラクレスオオカブトのゲームアプリを実装したHTMLファイルを示します。

このアプリは、タップしてヘラクレスオオカブトを倒すゲームです。画面にランダムにヘラクレスオオカブトが現れ、タップすると倒せます。1匹倒すとスコアが加算されます。ゲームの目標は、できるだけ多くのカブトムシを倒すことです。

←

Prev　Next

→ 　

Back　

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

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

以下にヘラクレスオオカブトのゲームアプリを実装したHTMLファイルを示します。

```
<!DOCTYPE html>
<html>
<head>
	<title>ヘラクレスオオカブトゲーム</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}
		canvas {
			display: block;
			background-color: #222222;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>

init: function() {
				// キャンバスを取得
				this.canvas = document.getElementById("gameCanvas");
				this.ctx = this.canvas.getContext("2d");
				this.width = this.canvas.width;
				this.height = this.canvas.height;

// オオカブト画像を読み込み
				this.bugImg = new Image();
				this.bugImg.src = "https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/scarab_1f98b.png";

// クリックイベントを設定
				this.canvas.addEventListener("click", function(event) {
					var mouseX = event.offsetX;
					var mouseY = event.offsetY;

// クリックされた虫を取得
					var clickedBug = game.getBugsAtPos(mouseX, mouseY);

// 虫がクリックされたらスコアを加算して削除
					if (clickedBug) {
						game.score++;
						game.bugs.splice(game.bugs.indexOf(clickedBug), 1);
					}
				});

// ループを開始
				this.loop();
			},

loop: function() {
				// 虫を生成
				if (this.bugs.length < 10) {
					this.bugs.push({
						x: Math.random() * (this.width - 50),
						y: Math.random() * (this.height - 50),
						width: 50,
						height: 50,
					});
				}

// 画面をクリア
				this.ctx.clearRect(0, 0, this.width, this.height);

// 虫を描画
				for (var i = 0; i < this.bugs.length; i++) {
					var bug = this.bugs[i];
					this.ctx.drawImage(this.bugImg, bug.x, bug.y, bug.width, bug.height);
				}

// スコアを描画
				this.ctx.fillStyle = "#ffffff";
				this.ctx.font = "24px Arial";
				this.ctx.fillText("Score: " + this.score, 10, 24);

// 次のループを予約
				setTimeout(function() {
					game.loop();
				}, 1000 / 60);
			},

getBugsAtPos: function(x, y) {
				for (var i = 0; i < this.bugs.length; i++) {
					var bug = this.bugs[i];
					if (x >= bug.x && x < bug.x + bug.width &&
						y >= bug.y && y < bug.y + bug.height) {
						return bug;
					}
				}
				return null;
			},
		};

// ゲームを初期化
		game.init();
	</script>
</body>
</html>
```