Games to cure allergies's game

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

No:288

654

←

Prev Next

→

Games to cure allergies
Developer User2983｜Date and time 23/6/11 16:49:59
Build time 89.593 sec｜Game capacity 6.717KB｜

Script

ゲームスタート！

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>アレルギーを治すゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #ffd700;
			color: #444;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: #fff;
			border: 1px solid #bbb;
			box-shadow: 2px 2px 5px #bbb;
		}
		#startButton {
			display: block;
			margin: 20px auto;
			padding: 10px;
			background-color: #fff;
			border: 1px solid #444;
			color: #444;
			font-size: 24px;
			font-weight: bold;
			cursor: pointer;
			box-shadow: 2px 2px 5px #bbb;
			text-align: center;
		}
	</style>
</head>
<body>
	<canvas id="canvas" width="320" height="480"></canvas>
	<div id="startButton">ゲームスタート！</div>
	<script>
		// ゲームの概要：アレルギーの原因となる食品を避けながら、アレルギーを治療するゲームです。

// 画像の読み込み
		var images = {};

loadImages(["doctor.png", "patient.png", "needle.png", "cat.png", "egg.png", "peanut.png"]);

// ゲームの設定
		var canvas = document.getElementById("canvas");
		var ctx = canvas.getContext("2d");

var player = {
			x: canvas.width / 2,
			y: canvas.height - 80,
			width: 40,
			height: 40,
			speed: 5,
			image: images["doctor.png"]
		};

var needles = [];
		var cats = [];
		var eggs = [];
		var peanuts = [];
		var foodSpeed = 2;

var score = 0;
		var highScore = localStorage.getItem("highScore") || 0;

// キー操作の設定
		var keys = {};

window.addEventListener("keydown", function(e) {
			keys[e.keyCode] = true;
		});

window.addEventListener("keyup", function(e) {
			keys[e.keyCode] = false;
		});

// ゲームのメインループ
		function loop() {
			update();
			draw();
			window.requestAnimationFrame(loop);
		}

function update() {
			// プレイヤーの移動
			if (keys[37] && player.x > player.width / 2) {
				player.x -= player.speed;
			}
			if (keys[39] && player.x < canvas.width - player.width / 2) {
				player.x += player.speed;
			}

// 新しい食品を追加
			if (Math.random() < 0.02) {
				var x = Math.random() * (canvas.width - 40) + 20;
				var y = -40;
				if (Math.random() < 0.25) {
					needles.push({x: x, y: y, width: 20, height: 40, speed: foodSpeed, image: images["needle.png"]});
				} else if (Math.random() < 0.5) {
					cats.push({x: x, y: y, width: 40, height: 40, speed: foodSpeed, image: images["cat.png"]});
				} else if (Math.random() < 0.75) {
					eggs.push({x: x, y: y, width: 30, height: 40, speed: foodSpeed, image: images["egg.png"]});
				} else {
					peanuts.push({x: x, y: y, width: 40, height: 40, speed: foodSpeed, image: images["peanut.png"]});
				}
			}

// 食品の移動
			for (var i = 0; i < needles.length; i++) {
				var needle = needles[i];
				needle.y += needle.speed;
				if (needle.y > canvas.height + 20) {
					needles.splice(i, 1);
					i--;
				} else if (isColliding(player, needle)) {
					// プレイヤーが針に当たったらゲームオーバー
					gameOver();
				}
			}
			for (var i = 0; i < cats.length; i++) {
				var cat = cats[i];
				cat.y += cat.speed;
				if (cat.y > canvas.height + 20) {
					cats.splice(i, 1);
					i--;
				} else if (isColliding(player, cat)) {
					// プレイヤーが猫に当たったらスコア+1
					score++;
					if (score > highScore) {
						highScore = score;
						localStorage.setItem("highScore", highScore);
					}
					cats.splice(i, 1);
					i--;
				}
			}
			for (var i = 0; i < eggs.length; i++) {
				var egg = eggs[i];
				egg.y += egg.speed;
				if (egg.y > canvas.height + 20) {
					eggs.splice(i, 1);
					i--;
				} else if (isColliding(player, egg)) {
					// プレイヤーが卵に当たったらスコア+2
					score += 2;
					if (score > highScore) {
						highScore = score;
						localStorage.setItem("highScore", highScore);
					}
					eggs.splice(i, 1);
					i--;
				}
			}
			for (var i = 0; i < peanuts.length; i++) {
				var peanut = peanuts[i];
				peanut.y += peanut.speed;
				if (peanut.y > canvas.height + 20) {
					peanuts.splice(i, 1);
					i--;
				} else if (isColliding(player, peanut)) {
					// プレイヤーがピーナッツに当たったらゲームクリア
					gameClear();
				}
			}
		}

function draw() {
			// 背景色
			ctx.fillStyle = "#ffd700";
			ctx.fillRect(0, 0, canvas.width, canvas.height);

// プレイヤーの描画
			ctx.drawImage(player.image, player.x - player.width / 2, player.y - player.height / 2, player.width, player.height);

// 食品の描画
			for (var i = 0; i < needles.length; i++) {
				var needle = needles[i];
				ctx.drawImage(needle.image, needle.x - needle.width / 2, needle.y - needle.height / 2, needle.width, needle.height);
			}
			for (var i = 0; i < cats.length; i++) {
				var cat = cats[i];
				ctx.drawImage(cat.image, cat.x - cat.width / 2, cat.y - cat.height / 2, cat.width, cat.height);
			}
			for (var i = 0; i < eggs.length; i++) {
				var egg = eggs[i];
				ctx.drawImage(egg.image, egg.x - egg.width / 2, egg.y - egg.height / 2, egg.width, egg.height);
			}
			for (var i = 0; i < peanuts.length; i++) {
				var peanut = peanuts[i];
				ctx.drawImage(peanut.image, peanut.x - peanut.width / 2, peanut.y - peanut.height / 2, peanut.width, peanut.height);
			}

// スコアの描画
			ctx.fillStyle = "#444";
			ctx.font = "24px 'メイリオ'";
			ctx.textAlign = "right";
			ctx.fillText("SCORE: " + score, canvas.width - 20, 40);
			ctx.fillText("HIGH SCORE: " + highScore, canvas.width - 20, 80);
		}

function isColliding(a, b) {
			return a.x - a.width / 2 < b.x + b.width / 2 &&
			       a.x + a.width / 2 > b.x - b.width / 2 &&
			       a.y - a.height / 2 < b.y + b.height / 2 &&
			       a.y + a.height / 2 > b.y - b.height / 2;
		}

function gameOver() {
			alert("アレルギー症状が悪化してしまいました…\nSCORE: " + score);
			score = 0;
			needles = [];
			cats = [];
			eggs = [];
			peanuts = [];
		}

function gameClear() {
			alert("アレルギーが完治しました！おめでとうございます！\nSCORE: " + score);
			score = 0;
			needles = [];
			cats = [];
			eggs = [];
			peanuts = [];
		}

// ゲームスタート
		document.getElementById("startButton").addEventListener("click", function() {
			loop();
			document.getElementById("startButton").style.display = "none";
		});
	</script>
</body>
</html>