AI game creator

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

No:3571

5347

←

Prev Next

→

Featured game
Developer anonymous｜Date and time 70/1/1 10:02:57
Build time unknown sec｜Game capacity 3.777KB｜

Script

はありません。「フルーツスライサー」というスマホ向けのゲームを作ってみました。以下がそのコードです。

画面上に表示された果物をスライスするゲームです。画面内を動くプレイヤーをマウスで操作し、クリックした瞬間に色が変わり、果物に触れるとスコアが上がります。果物が画面下に落ちてしまうとゲームオーバーとなります。 JavaScriptを使用してゲームを作成し、

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいものランキング

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

はありません。

「フルーツスライサー」というスマホ向けのゲームを作ってみました。

以下がそのコードです。

```html
<!DOCTYPE html>
<html>
<head>
	<title>フルーツスライサー</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		body {
			margin: 0;
			padding: 0;
		}

canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>

// 画面サイズ
			canvas.width = window.innerWidth;
			canvas.height = window.innerHeight;

// プレイヤー
			var player = {
				x: canvas.width / 2,
				y: canvas.height - 50,
				color: "black",
				speed: 10
			};

// フルーツ
			var fruits = [];
			var fruitsColors = ["red", "orange", "yellow", "green", "blue", "purple"];
			var fruitRadius = 50;
			var fruitSpeed = 5;

// スコア
			var score = 0;
			ctx.font = "bold 30px sans-serif";
			ctx.textAlign = "right";

// マウスイベントの設定
			canvas.addEventListener("mousedown", function(event) {
				player.color = "white";
			});

canvas.addEventListener("mouseup", function(event) {
				player.color = "black";
			});

canvas.addEventListener("mousemove", function(event) {
				player.x = event.clientX - canvas.offsetLeft;
			});

// フルーツの生成
			setInterval(function() {
				var fruit = {
					x: Math.random() * canvas.width,
					y: -fruitRadius,
					color: fruitsColors[Math.floor(Math.random() * 6)]
				};

fruits.push(fruit);
			}, 1000);

// 描画の更新
			function update() {
				// 背景
				ctx.fillStyle = "#f7decd";
				ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤー
				ctx.fillStyle = player.color;
				ctx.fillRect(player.x - 50, player.y - 50, 100, 100);

// フルーツ
				for (var i = 0; i < fruits.length; i++) {
					var fruit = fruits[i];

ctx.beginPath();
					ctx.fillStyle = fruit.color;
					ctx.arc(fruit.x, fruit.y, fruitRadius, 0, Math.PI * 2);
					ctx.fill();

fruit.y += fruitSpeed;

if (distance(player.x, player.y, fruit.x, fruit.y) < fruitRadius) {
						fruits.splice(i, 1);
						score++;

var audio = new Audio("slice.mp3");
						audio.play();
					}

if (fruit.y > canvas.height + fruitRadius) {
						fruits.splice(i, 1);
					}
				}

// スコア
				ctx.fillStyle = "black";
				ctx.fillText("Score: " + score, canvas.width - 10, 40);
			}

// 距離の計算
			function distance(x1, y1, x2, y2) {
				return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));
			}

// 描画の更新を繰り返す
			setInterval(function() {
				update();
			}, 1000 / 60);
		};
	</script>

<audio src="slice.mp3"></audio>
</body>
</html>
```

画面上に表示された果物をスライスするゲームです。画面内を動くプレイヤーをマウスで操作し、クリックした瞬間に色が変わり、果物に触れるとスコアが上がります。果物が画面下に落ちてしまうとゲームオーバーとなります。

JavaScriptを使用してゲームを作成し、<canvas>タグを使用して描画を行っています。果物の生成や落下の処理、スコアのカウントなどのロジックはJavaScriptで実装しています。

また、絵文字は使用していませんが、効果音を再生しています。効果音は<audio>タグを使用して再生しています。

スマホでプレイすることも可能で、マウス操作に代わってタッチ操作でプレイすることができます。