Games like Crocodile Wani Panic's game

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

No:491

411

←

Prev Next

→

Games like Crocodile Wani Panic
Developer User2906｜Date and time 23/6/14 21:46:45
Build time 69.568 sec｜Game capacity 3.979KB｜

Script

を作りました。プレイヤーは水中にいるワニを操作し、魚を食べたり、獲物から逃げたりしながら、スコアを競います。以下がプログラムの例です。

このプログラムでは、HTMLのcanvas要素を使ってゲーム画面を表示しています。ワニと魚はそれぞれ図形の描画を行い、キーボードの入力に応じてワニの位置を更新します。魚とワニの距離が一定以下になった時に、魚を食べたことを判定し、スコアを加算します。全ての魚が食べられたら、クリアとして処理します。また、ゲームループはrequestAnimationFrameを使って行っています。

←

Prev　Next

→ 　

Back　

[PR]現在のゲームギフトランキング

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

を作りました。プレイヤーは水中にいるワニを操作し、魚を食べたり、獲物から逃げたりしながら、スコアを競います。

以下がプログラムの例です。

<!DOCTYPE html>
<html>
<head>
	<title>ワニワニパニック</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
		canvas {
			width: 100%;
			height: 100%;
			position: absolute;
			top: 0;
			left: 0;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<script>
		// ゲームの各種設定
		var gameConfig = {
			width: 600,			// ゲーム画面の幅
			height: 400,		// ゲーム画面の高さ
			speed: 5,			// ワニの移動速度
			fishCount: 10		// 出現する魚の数
		};

// ゲームのスコア
		var score = 0;

// ゲーム画面を描画するキャンバス
		var canvas = document.getElementById("canvas");
		canvas.width = gameConfig.width;
		canvas.height = gameConfig.height;
		var ctx = canvas.getContext("2d");

// ワニの初期位置
		var waniX = gameConfig.width / 2;
		var waniY = gameConfig.height / 2;

// 魚の座標をランダムに生成する関数
		function createFish() {
			return {
				x: Math.random() * (gameConfig.width - 40) + 20,
				y: Math.random() * (gameConfig.height - 40) + 20
			};
		}

// 魚の初期位置を生成する
		var fishes = [];
		for (var i = 0; i < gameConfig.fishCount; i++) {
			fishes.push(createFish());
		}

// ワニを描画する関数
		function drawWani() {
			ctx.beginPath();
			ctx.arc(waniX, waniY, 20, 0, Math.PI * 2);
			ctx.fillStyle = "green";
			ctx.fill();
			ctx.closePath();
		}

// 魚を描画する関数
		function drawFish(fish) {
			ctx.beginPath();
			ctx.arc(fish.x, fish.y, 10, 0, Math.PI * 2);
			ctx.fillStyle = "blue";
			ctx.fill();
			ctx.closePath();
		}

// ゲーム画面を描画する関数
		function draw() {
			ctx.clearRect(0, 0, gameConfig.width, gameConfig.height);
			drawWani();
			for (var i = 0; i < fishes.length; i++) {
				drawFish(fishes[i]);
			}
			ctx.fillStyle = "black";
			ctx.fillText("Score: " + score, 10, 20);
		}

// キーボードの入力を受け取る関数
		function keyDownHandler(e) {
			if (e.key == "ArrowUp" && waniY > 20) {
				waniY -= gameConfig.speed;
			}
			else if (e.key == "ArrowDown" && waniY < gameConfig.height - 20) {
				waniY += gameConfig.speed;
			}
			else if (e.key == "ArrowLeft" && waniX > 20) {
				waniX -= gameConfig.speed;
			}
			else if (e.key == "ArrowRight" && waniX < gameConfig.width - 20) {
				waniX += gameConfig.speed;
			}
		}

// スコアを加算する関数
		function addScore() {
			score += 10;
			if (score >= gameConfig.fishCount * 10) {
				alert("You win!");
				document.location.reload();
			}
		}

// ワニが魚を食べた時の処理
		function eatFish(fish) {
			var distance = Math.sqrt(Math.pow(waniX - fish.x, 2) + Math.pow(waniY - fish.y, 2));
			if (distance <= 30) {
				var index = fishes.indexOf(fish);
				if (index > -1) {
					fishes.splice(index, 1);
				}
				addScore();
			}
		}

// ゲームループの処理
		function gameLoop() {
			draw();
			for (var i = 0; i < fishes.length; i++) {
				eatFish(fishes[i]);
			}
			window.requestAnimationFrame(gameLoop);
		}

// イベントリスナーの登録
		document.addEventListener("keydown", keyDownHandler, false);

// ゲームを開始する
		gameLoop();
	</script>
</body>
</html>