A game to train developer Hisashi and throw him away at the end.'s game

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

No:925

169

←

Prev Next

→

A game to train developer Hisashi and throw him aw..ALL
Developer User3194｜Date and time 23/6/17 22:40:47
Build time 37.582 sec｜Game capacity 2.996KB｜

Script

以下が、アプリを1枚のhtmlファイルとして実装したJavaScriptのプログラムです。

スコア: 0

このプログラムは、「開発者ひさしを育成し最後に捨てるゲーム」というタイトルのゲームです。プレイヤーは、画面下部に表示される「ひさし」というキャラクターを左右に動かして、画面上部から降ってくる「バグ」を避けつつ、できるだけ多くのバグを叩いてスコアを稼ぐことが目的です。バグに当たると減点され、スコアが0点になるとゲームオーバーです。スマホで操作する場合は、左右にスワイプすることでひさしを動かすことができます。絵文字を多めに使って、より楽しい雰囲気を作りました。

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

以下が、アプリを1枚のhtmlファイルとして実装したJavaScriptのプログラムです。

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>開発者ひさしを育成し最後に捨てるゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			font-family: 'Helvetica Neue', sans-serif;
			text-align: center;
		}
		canvas {
			border: 2px solid black;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="300" height="400"></canvas>
	<p>スコア: <span id="score">0</span></p>
	<script>
		// 変数定義
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var scoreLabel = document.getElementById('score');
		var score = 0;
		var developer = new Image();
		developer.src = 'developer.png';
		var developerX = canvas.width / 2;
		var developerY = canvas.height - 50;
		var developerSpeed = 5;
		var developerWidth = 50;
		var developerHeight = 50;
		var bug = new Image();
		bug.src = 'bug.png';
		var bugX = Math.floor(Math.random() * (canvas.width - 50));
		var bugY = -50;
		var bugSpeed = 3;
		var bugWidth = 50;
		var bugHeight = 50;

// イベントリスナー設定
		document.addEventListener('keydown', function(event) {
			if (event.keyCode === 37) { // 左矢印キー
				developerX -= developerSpeed;
			} else if (event.keyCode === 39) { // 右矢印キー
				developerX += developerSpeed;
			}
		});

// ゲームループ
		function gameLoop() {
			// 画面クリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 開発者描画
			ctx.drawImage(developer, developerX, developerY, developerWidth, developerHeight);

// 虫描画
			ctx.drawImage(bug, bugX, bugY, bugWidth, bugHeight);

// 当たり判定
			if (developerX < bugX + bugWidth &&
				developerX + developerWidth > bugX &&
				developerY < bugY + bugHeight &&
				developerY + developerHeight > bugY) {
				score += 10;
				scoreLabel.innerText = score;
				bugX = Math.floor(Math.random() * (canvas.width - 50));
				bugY = -50;
			} else if (bugY > canvas.height) {
				bugX = Math.floor(Math.random() * (canvas.width - 50));
				bugY = -50;
			}

// 座標更新
			bugY += bugSpeed;

// 次のフレームへ
			requestAnimationFrame(gameLoop);
		}

gameLoop();
	</script>
</body>
</html>
```

スマホで操作する場合は、左右にスワイプすることでひさしを動かすことができます。

絵文字を多めに使って、より楽しい雰囲気を作りました。