Nature or Game! Is a golf course natural? Are dams natural? Are beavers environmentally friendly?'s game | AI game creator

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

No:3253

163

Nature or Game! Is a golf course natural? Are dams..ALL
Developer User3589｜Date and time 23/6/24 9:57:08
Build time 44.259 sec｜Game capacity 3.851KB｜

今回、私は自然をテーマにしたゴルフゲームを作成しました。以下が実際のプログラムでの記述です。

このゲームは、マウスで操作することができます。まず、マウスの左ボタンを押し続けている間、パワーバーが上昇し、最大値まで達したらボタンを離すとボールが打てます。また、マウスの移動に合わせて打つ方向も変えることができます。ボールをホールに入れるとスコアが加算され、次のホールに進みます。画面外にボールが出るとペナルティが加算されます。このゲームはスマホでも遊べるようになっており、画面をタップしてパワーをチャージし、スライドすることで打つ方向を変えます。今回は、直感的に操作ができるように、絵文字を使わずにシンプルなグラフィックを採用しました。また、ゴルフ場は原則として自然の地形を利用したものが多く、環境問題にも配慮されていると言えます。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

今回、私は自然をテーマにしたゴルフゲームを作成しました。以下が実際のプログラムでの記述です。

<!DOCTYPE html>
<html>
<head>
	<title>自然ゴルフ</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #8DEEEE;
		}

#canvas {
			display: block;
			margin: auto;
			background-color: #00CD00;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="480" height="320"></canvas>

<script>
		//　変数を宣言
		var canvas, ctx;
		var ballX = 50, ballY = 160;
		var holeX = 440, holeY = 150;
		var power = 0, angle = 0;
		var score = 0;

window.onload = function() {
			// canvas を取得
			canvas = document.getElementById("canvas");
			ctx = canvas.getContext("2d");

// イベントリスナーを追加
			canvas.addEventListener("mousedown", chargePower);
			canvas.addEventListener("mousemove", changeAngle);
			canvas.addEventListener("mouseup", hitBall);

// ゲームを開始
			draw();
		}

function chargePower(e) {
			// パワーをチャージ
			power += 1;
			if (power > 50) {
				power = 50;
			}
		}

function changeAngle(e) {
			// 方向を変更
			var rect = canvas.getBoundingClientRect();
			var mx = e.clientX - rect.left;
			var my = e.clientY - rect.top;
			var dx = mx - ballX;
			var dy = my - ballY;
			angle = Math.atan2(dy, dx);
		}

function hitBall(e) {
			// ボールを打つ
			var vx = power * Math.cos(angle);
			var vy = power * Math.sin(angle);
			ballX += vx;
			ballY += vy;

var dist = Math.sqrt(Math.pow(holeX - ballX, 2) + Math.pow(holeY - ballY, 2));
			if (dist < 15) {
				// ホールに入ったらゴール
				score += 1;
				reset();
			} else if (ballX < 0 || ballX > 480 || ballY < 0 || ballY > 320) {
				// ボールが画面外に出たらペナルティ
				score += 3;
				reset();
			} else {
				// まだプレイ中
				score += 0;
			}

// パワーと角度をリセット
			power = 0;
			angle = 0;
		}

function reset() {
			// ボールとホールをリセット
			ballX = 50;
			ballY = 160;
			holeX = Math.floor(Math.random() * 400) + 40;
			holeY = Math.floor(Math.random() * 260) + 40;
		}

function draw() {
			// ゲーム画面を描画
			ctx.clearRect(0, 0, 480, 320);

// ボールとホールを描画
			ctx.beginPath();
			ctx.arc(ballX, ballY, 10, 0, Math.PI * 2, false);
			ctx.fillStyle = "#FFFF00";
			ctx.fill();
			ctx.closePath();
			ctx.beginPath();
			ctx.arc(holeX, holeY, 15, 0, Math.PI * 2, false);
			ctx.fillStyle = "#8B4513";
			ctx.fill();
			ctx.closePath();

// パワーバーを描画
			ctx.fillStyle = "#228B22";
			ctx.fillRect(20, 250 - power * 5, 20, power * 5);

// スコアを表示
			ctx.fillStyle = "#FFFFFF";
			ctx.font = "bold 20px Arial";
			ctx.fillText("SCORE: " + score, 20, 50);

// 再描画
			requestAnimationFrame(draw);
		}
	</script>
</body>
</html>

このゲームは、マウスで操作することができます。まず、マウスの左ボタンを押し続けている間、パワーバーが上昇し、最大値まで達したらボタンを離すとボールが打てます。また、マウスの移動に合わせて打つ方向も変えることができます。ボールをホールに入れるとスコアが加算され、次のホールに進みます。画面外にボールが出るとペナルティが加算されます。
このゲームはスマホでも遊べるようになっており、画面をタップしてパワーをチャージし、スライドすることで打つ方向を変えます。
今回は、直感的に操作ができるように、絵文字を使わずにシンプルなグラフィックを採用しました。また、ゴルフ場は原則として自然の地形を利用したものが多く、環境問題にも配慮されていると言えます。