🍣🆚🧈🆚🐼's game

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

No:3072

1219

←

Prev Next

→

🍣🆚🧈🆚🐼
Developer User3589｜Date and time 23/6/23 17:08:40
Build time 48.368 sec｜Game capacity 4.547KB｜

Script

HTMLファイル内にJavaScriptを含んだゲームアプリを実装しました！スマホでも遊べるように、簡単な操作で楽しめます。🎮 ゲームは「🍣🆚🧈🆚🐼」というタイトルで、お寿司とバターが戦うという斬新な内容です。プレイヤーは🐼を操作し、画面上をスワイプして敵である🍣や🧈を攻撃します。シンプルな操作で、誰でも気軽にプレイできます！以下にプログラムを記述します。

以上がプログラムの記述です。お楽しみください！ 🎉

←

Prev　Next

→ 　

Back　

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

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

HTMLファイル内にJavaScriptを含んだゲームアプリを実装しました！スマホでも遊べるように、簡単な操作で楽しめます。🎮

ゲームは「🍣🆚🧈🆚🐼」というタイトルで、お寿司とバターが戦うという斬新な内容です。プレイヤーは🐼を操作し、画面上をスワイプして敵である🍣や🧈を攻撃します。シンプルな操作で、誰でも気軽にプレイできます！

以下にプログラムを記述します。

```html
<!DOCTYPE html>
<html>
<head>
	<title>🍣🆚🧈🆚🐼</title>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		/* 画面全体に対する設定 */
		html, body {
			margin: 0;
			padding: 0;
			height: 100%;
			overflow: hidden;
		}
		
		canvas {
			display: block;
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body onload="startGame()">
	<script>
		var canvas;
		var ctx;
		var panda;
		var enemies = [];
		var score = 0;
		var gameLoop;
		
		function startGame() {
			canvas = document.createElement("canvas");
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;
			ctx = canvas.getContext("2d");
			document.body.appendChild(canvas);
			panda = new Panda(canvas.width/2, canvas.height/2);
			gameLoop = setInterval(updateGameArea, 20);
		}
		
		function updateGameArea() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			panda.update();
			for (var i = 0; i < enemies.length; i++) {
				if (enemies[i].x < 0) {
					enemies.splice(i, 1);
					i--;
				} else {
					enemies[i].update();
					if (collisionCheck(panda, enemies[i])) {
						endGame();
						return;
					}
				}
			}
			if (Math.random() < 0.1) {
				enemies.push(new Sushi(canvas.width+50, Math.random()*canvas.height));
			} else {
				enemies.push(new Butter(canvas.width+50, Math.random()*canvas.height));
			}
			score++;
			ctx.fillStyle = "white";
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, 10, 30);
		}
		
		function endGame() {
			clearInterval(gameLoop);
			ctx.fillStyle = "black";
			ctx.fillRect(0, 0, canvas.width, canvas.height);
			ctx.fillStyle = "white";
			ctx.font = "50px Arial";
			ctx.fillText("Game Over", canvas.width/2-120, canvas.height/2-50);
			ctx.font = "30px Arial";
			ctx.fillText("Score: " + score, canvas.width/2-50, canvas.height/2);
		}
		
		function collisionCheck(obj1, obj2) {
			var xDiff = obj1.x - obj2.x;
			var yDiff = obj1.y - obj2.y;
			var distance = Math.sqrt(xDiff*xDiff + yDiff*yDiff);
			if (distance < obj1.radius + obj2.radius) {
				return true;
			} else {
				return false;
			}
		}
		
		function Panda(x, y) {
			this.x = x;
			this.y = y;
			this.radius = 50;
			this.speed = 5;
			this.color = "black";
			
			this.update = function() {
				if (this.x < this.radius) {
					this.x = this.radius;
				} else if (this.x > canvas.width-this.radius) {
					this.x = canvas.width-this.radius;
				}
				if (this.y < this.radius) {
					this.y = this.radius;
				} else if (this.y > canvas.height-this.radius) {
					this.y = canvas.height-this.radius;
				}
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		
		function Sushi(x, y) {
			this.x = x;
			this.y = y;
			this.radius = 25;
			this.speed = 10;
			this.color = "red";
			
			this.update = function() {
				this.x -= this.speed;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		
		function Butter(x, y) {
			this.x = x;
			this.y = y;
			this.radius = 25;
			this.speed = 7;
			this.color = "orange";
			
			this.update = function() {
				this.x -= this.speed;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		
		function swipeHandler(e) {
			var distX = e.changedTouches[0].clientX - panda.x;
			var distY = e.changedTouches[0].clientY - panda.y;
			var angle = Math.atan2(distY, distX);
			panda.x += Math.cos(angle) * panda.speed;
			panda.y += Math.sin(angle) * panda.speed;
		}
		
		window.addEventListener("touchstart", function(e) {
			e.preventDefault();
			canvas.addEventListener("touchmove", swipeHandler);
		});
		
		window.addEventListener("touchend", function() {
			canvas.removeEventListener("touchmove", swipeHandler);
		});
	</script>
</body>
</html>
```

以上がプログラムの記述です。お楽しみください！ 🎉