Theres no use in arguing (about it)'s game

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

No:1363

5124

←

Prev Next

→

Theres no use in arguing (about it)
Developer anonymous｜Date and time 70/1/1 10:21:59
Build time unknown sec｜Game capacity 4.919KB｜

Script

HTMLファイルにJavaScriptを含めて、スマートフォンで遊べるゲームを作ってみました。ゲームの概要：『emojiシューティング』プレイヤーは画面下部に表示される弓を操作し、落下する絵文字をシューティングしていくゲームです。絵文字を打ち落とすことで得点を稼ぎ、高得点を目指しましょう。実際のプログラム：

このように、画面には弓が表示され、指でスワイプすることで弓が操作できます。落下する絵文字をシューティングしていき、得点を稼ぎましょう。ゲームオーバーになった場合は、画面中央に「Game Over!」と表示されます。スマートフォンでも遊びやすいよう、タッチイベントを使用して操作しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

HTMLファイルにJavaScriptを含めて、スマートフォンで遊べるゲームを作ってみました。

ゲームの概要：
『emojiシューティング』
プレイヤーは画面下部に表示される弓を操作し、落下する絵文字をシューティングしていくゲームです。
絵文字を打ち落とすことで得点を稼ぎ、高得点を目指しましょう。

実際のプログラム：

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>emojiシューティング</title>
	<style>
		body {
			background-color: #f0f0f0;
		}
		#canvas {
			border: 2px solid #444;
			margin: 50px auto;
			display: block;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<script>
		// キャンバス取得
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

// 変数定義
		var score = 0;
		var arrows = [];
		var emojis = [];

// 弓を作成
		var bow = {
			x: canvas.width / 2,
			y: canvas.height - 60,
			width: 20,
			height: 50
		}

// 絵文字を作成
		function createEmoji() {
			var emoji = {
				x: Math.random() * (canvas.width - 30) + 15,
				y: 0,
				radius: 20,
				speed: 3,
				color: "#" + ((1 << 24) * Math.random() | 0).toString(16)
			}
			emojis.push(emoji);
		}

// 絵文字を描画
		function drawEmojis() {
			for (var i = 0; i < emojis.length; i++) {
				ctx.beginPath();
				ctx.arc(emojis[i].x, emojis[i].y, emojis[i].radius, 0, Math.PI * 2);
				ctx.fillStyle = emojis[i].color;
				ctx.fill();
				ctx.closePath();
			}
		}

// 絵文字を移動
		function moveEmojis() {
			for (var i = 0; i < emojis.length; i++) {
				emojis[i].y += emojis[i].speed;
			}
		}

// 弓を描画
		function drawBow() {
			ctx.beginPath();
			ctx.fillStyle = "#444";
			ctx.fillRect(bow.x - bow.width / 2, bow.y - bow.height, bow.width, bow.height);
			ctx.closePath();
		}

// 矢を作成
		function createArrow() {
			var arrow = {
				x: bow.x,
				y: bow.y - bow.height,
				width: 5,
				height: 20,
				speed: 10,
				color: "#000"
			}
			arrows.push(arrow);
		}

// 矢を描画
		function drawArrows() {
			for (var i = 0; i < arrows.length; i++) {
				ctx.beginPath();
				ctx.fillStyle = arrows[i].color;
				ctx.fillRect(arrows[i].x - arrows[i].width / 2, arrows[i].y, arrows[i].width, arrows[i].height);
				ctx.closePath();
			}
		}

// 矢を移動
		function moveArrows() {
			for (var i = 0; i < arrows.length; i++) {
				arrows[i].y -= arrows[i].speed;
			}
		}

// 絵文字と矢の接触判定
		function hitTest() {
			for (var i = 0; i < arrows.length; i++) {
				for (var j = 0; j < emojis.length; j++) {
					var dx = arrows[i].x - emojis[j].x;
					var dy = arrows[i].y - emojis[j].y;
					var distance = Math.sqrt(dx * dx + dy * dy);
					if (distance < arrows[i].height / 2 + emojis[j].radius) {
						arrows.splice(i, 1);
						emojis.splice(j, 1);
						score += 10;
					}
				}
			}
		}

// 得点を描画
		function drawScore() {
			ctx.font = "24px Arial";
			ctx.fillStyle = "#000";
			ctx.fillText("Score: " + score, 20, 40);
		}

// ゲームオーバーを描画
		function drawGameOver() {
			ctx.font = "48px Arial";
			ctx.fillStyle = "#000";
			var message = "Game Over!";
			var width = ctx.measureText(message).width;
			ctx.fillText(message, canvas.width / 2 - width / 2, canvas.height / 2 - 24);
		}

// ゲームループ
		function gameLoop() {
			// キャンバスクリア
			ctx.clearRect(0, 0, canvas.width, canvas.height);

// 絵文字生成
			if (Math.random() < 0.05) {
				createEmoji();
			}

// 絵文字描画・移動
			drawEmojis();
			moveEmojis();

// 矢生成
			if (arrows.length == 0) {
				createArrow();
			}

// 矢描画・移動
			drawArrows();
			moveArrows();

// 接触判定
			hitTest();

// 弓描画
			drawBow();

// 得点描画
			drawScore();

// ゲームオーバー判定
			if (emojis.length > 0 && emojis[emojis.length - 1].y >= bow.y - bow.height) {
				drawGameOver();
				clearInterval(timer);
			}
		}

// ゲーム開始
		var timer = setInterval(gameLoop, 30);

// 弓を操作
		document.addEventListener("touchmove", function(event) {
			event.preventDefault();
			bow.x = event.touches[0].pageX - canvas.offsetLeft;
			if (bow.x < bow.width / 2) {
				bow.x = bow.width / 2;
			} else if (bow.x > canvas.width - bow.width / 2) {
				bow.x = canvas.width - bow.width / 2;
			}
		});
	</script>
</body>
</html>

このように、画面には弓が表示され、指でスワイプすることで弓が操作できます。
落下する絵文字をシューティングしていき、得点を稼ぎましょう。
ゲームオーバーになった場合は、画面中央に「Game Over!」と表示されます。
スマートフォンでも遊びやすいよう、タッチイベントを使用して操作しています。