A game to shiv the salmon and collect salmon roe's game

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

No:4101

←

Prev Next

→

A game to shiv the salmon and collect salmon roe
Developer もちきなこ｜Date and time 23/6/27 12:13:21
Build time 47.976 sec｜Game capacity 4.247KB｜

Script

「サーモンラン」というゲームを作ってみました。以下が実際のプログラムです。

SCORE: 0

プレイヤーは加速度センサーで操作します。画面下にいる鮭が右から左に移動してきて、これを画面上部にいるイクラを集めていくゲームです。鮭に当たるとゲームオーバーになります。イクラを1つ取るとスコアが1加算され、イクラを10個取るとスコアが10加算されます。また、鮭に当たるとスコアは加算されません。プレイヤーを鮭から守って、高得点を目指しましょう！

←

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>
		body {
			margin: 0;
			padding: 0;
			background-color: #a2d9ff;
		}
		#player {
			width: 50px;
			height: 50px;
			background-color: salmon;
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
		}
		.iwashi {
			width: 25px;
			height: 25px;
			background-color: silver;
			position: absolute;
			top: 0;
		}
		.ikura {
			width: 35px;
			height: 35px;
			background-color: orange;
			position: absolute;
			top: 0;
		}
		.score {
			position: absolute;
			top: 10px;
			right: 10px;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div class="score">SCORE: 0</div>
	<script>
		// 定数
		const PLAYER_SPEED = 5;
		const IWASHI_SPEED_MIN = 2;
		const IWASHI_SPEED_MAX = 5;
		const IKURA_SPEED_MIN = 1;
		const IKURA_SPEED_MAX = 3;

// 変数
		let playerX = window.innerWidth / 2;
		let score = 0;

// プレイヤーの移動
		window.addEventListener("deviceorientation", function(event) {
			playerX -= event.gamma / 10;
			if (playerX < 0) {
				playerX = 0;
			} else if (playerX > window.innerWidth) {
				playerX = window.innerWidth;
			}
			document.querySelector("#player").style.left = playerX + "px";
		});

// シバきイワシの生成
		setInterval(function() {
			let iwashi = document.createElement("div");
			iwashi.classList.add("iwashi");
			iwashi.style.left = getRandomInt(0, window.innerWidth - 25) + "px";
			iwashi.speed = getRandomInt(IWASHI_SPEED_MIN, IWASHI_SPEED_MAX);
			document.body.appendChild(iwashi);

// 移動と消滅
			let iwashiInterval = setInterval(function() {
				iwashi.style.top = (iwashi.offsetTop + iwashi.speed) + "px";
				if (iwashi.offsetTop > window.innerHeight) {
					clearInterval(iwashiInterval);
					document.body.removeChild(iwashi);
				}

// 当たり判定
				if (isCollision(iwashi)) {
					clearInterval(iwashiInterval);
					document.body.removeChild(iwashi);
					score++;
					document.querySelector(".score").innerText = "SCORE: " + score;
				}
			}, 10);
		}, 1000);

// イクラの生成
		setInterval(function() {
			let ikura = document.createElement("div");
			ikura.classList.add("ikura");
			ikura.style.left = getRandomInt(0, window.innerWidth - 35) + "px";
			ikura.speed = getRandomInt(IKURA_SPEED_MIN, IKURA_SPEED_MAX);
			document.body.appendChild(ikura);

// 移動と消滅
			let ikuraInterval = setInterval(function() {
				ikura.style.top = (ikura.offsetTop + ikura.speed) + "px";
				if (ikura.offsetTop > window.innerHeight) {
					clearInterval(ikuraInterval);
					document.body.removeChild(ikura);
				}

// 当たり判定
				if (isCollision(ikura)) {
					clearInterval(ikuraInterval);
					document.body.removeChild(ikura);
					score += 10;
					document.querySelector(".score").innerText = "SCORE: " + score;
				}
			}, 10);
		}, 5000);

// ランダムな整数を得る関数
		function getRandomInt(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		}

// 当たり判定をチェックする関数
		function isCollision(target) {
			let player = document.querySelector("#player");
			let tw = target.offsetWidth;
			let th = target.offsetHeight;
			let tx = target.offsetLeft;
			let ty = target.offsetTop;
			let pw = player.offsetWidth;
			let ph = player.offsetHeight;
			let px = player.offsetLeft;
			let py = player.offsetTop;
			return (tx < px + pw && tx + tw > px && ty < py + ph && ty + th > py);
		}
	</script>
</body>
</html>