Mashi's game | AI game creator

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

No:1662

2360

Mashi
Developer User3385｜Date and time 23/6/18 21:15:20
Build time 98.622 sec｜Game capacity 6.383KB｜

たった一つのHTMLファイルに、JavaScriptを含んで、スマートフォンで操作できるゲームアプリを実装しました。絵文字を多用し、ゲーム概要も説明します。＜ゲーム概要＞あなたは、可愛いネコを操作して飛んでいくゲームです。ネコを上手に操作して、進路上に現れるフィッシュを集めながら、コインも集めていってください。しかし、注意しなければならないのが、途中にいるバットです。バットにぶつかってしまうと、ネコは壁にぶつかって落ちてしまいます。バットを避けるために、上手にジャンプしていってください。それでは、ゲームをプレイしていただきましょう！「Play game！」ボタンを押して、ゲームスタートです。＜操作方法＞・画面をタップしてジャンプします。・バットにぶつかるとゲームオーバーになります。・フィッシュを集めるとスコアが加算されます。・スコアに応じて、レベルアップします。プレイしていただくには、以下のコードをコピペして、HTMLファイルとして保存してください。その後、ブラウザで開いてください。お楽しみください！

Score: 0

Level: 1

→ 　

0　

0　

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

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

(C)2023 HisashiApp

たった一つのHTMLファイルに、JavaScriptを含んで、スマートフォンで操作できるゲームアプリを実装しました。絵文字を多用し、ゲーム概要も説明します。

＜ゲーム概要＞
あなたは、可愛いネコを操作して飛んでいくゲームです。ネコを上手に操作して、進路上に現れるフィッシュを集めながら、コインも集めていってください。
しかし、注意しなければならないのが、途中にいるバットです。バットにぶつかってしまうと、ネコは壁にぶつかって落ちてしまいます。バットを避けるために、上手にジャンプしていってください。

それでは、ゲームをプレイしていただきましょう！
「Play game！」ボタンを押して、ゲームスタートです。

＜操作方法＞
・画面をタップしてジャンプします。
・バットにぶつかるとゲームオーバーになります。
・フィッシュを集めるとスコアが加算されます。
・スコアに応じて、レベルアップします。

プレイしていただくには、以下のコードをコピペして、HTMLファイルとして保存してください。その後、ブラウザで開いてください。お楽しみください！

```
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>ネコジャンプ</title>
	
	<style>	
	#game {
		height: 500px;
		width: 300px;
		margin: 0 auto;
		position: relative;
		background-image: url('https://i.pinimg.com/originals/f1/c0/b9/f1c0b9f8d9320681aa09221ca31bd02a.gif');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	
	#cat {
		height: 75px;
		width: 75px;
		background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/282/cat-face_1f431.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
		bottom: 75px;
		left: 75px;
	}
	
	#fish {
		height: 50px;
		width: 50px;
		background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/282/fish_1f41f.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
	}
	
	#coin {
		height: 50px;
		width: 50px;
		background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/282/money-bag_1f4b0.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
	}
	
	#bat {
		height: 75px;
		width: 75px;
		background-image: url('https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/twitter/282/bat_1f987.png');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
		position: absolute;
	}
	
	#score {
		position: absolute;
		top: 10px;
		left: 10px;
		font-size: 24px;
		color: white;
	}
	
	#level {
		position: absolute;
		top: 10px;
		right: 10px;
		font-size: 24px;
		color: white;
	}
	
	</style>
	
</head>
<body>
	<div id="game">
		<div id="cat"></div>
		<div id="fish"></div>
		<div id="coin"></div>
		<div id="bat"></div>
		<div id="score">Score: 0</div>
		<div id="level">Level: 1</div>
	</div>
	
	<button onclick="startGame()">Play game!</button>
	
	<script>
	// スタートボタンを押したら、ゲームがスタートする
	function startGame() {
		document.querySelector("button").style.display = "none"; // スタートボタンを非表示にする
		addElements(); // 要素を配置する関数を呼び出す
		moveCat(); // ネコを動かす関数を呼び出す
		moveFish(); // フィッシュを動かす関数を呼び出す
		moveCoin(); // コインを動かす関数を呼び出す
		spawnBat(); // バットを出現させる関数を呼び出す
	}
	
	// ネコをジャンプさせる
	window.addEventListener("touchstart", jumpCat);
	
	function jumpCat() {
		let cat = document.getElementById("cat");
		cat.style.bottom = parseInt(cat.style.bottom) + 75 + "px";
		setTimeout(function() {
			cat.style.bottom = parseInt(cat.style.bottom) - 75 + "px";
		}, 500);
	}
	
	// ネコを動かす
	function moveCat() {
		let cat = document.getElementById("cat");
		let game = document.getElementById("game");
		cat.style.left = "75px"; // 初期位置
		let bottom = parseInt(cat.style.bottom); // 初期位置
		let move = 75;
		let gameHeight = parseInt(game.style.height);
		
		setInterval(function () {
			let top = bottom + move;
			if (top > gameHeight) { // 画面外に出たら、ゲームオーバー
				gameOver();
			} else {
				bottom += move;
				cat.style.bottom = bottom + "px";
			}
		}, 1000);
	}
	
	// フィッシュを動かす
	function moveFish() {
		let fish = document.getElementById("fish");
		let game = document.getElementById("game");
		let gameWidth = parseInt(game.style.width);
		
		setInterval(function () {
			let left = Math.floor(Math.random() * (gameWidth - 75));
			fish.style.top = "0px"; // 初期位置
			fish.style.left = left + "px";
		}, 2000);
	}
	
	// コインを動かす
	function moveCoin() {
		let coin = document.getElementById("coin");
		let game = document.getElementById("game");
		let gameWidth = parseInt(game.style.width);
		
		setInterval(function () {
			let left = Math.floor(Math.random() * (gameWidth - 75));
			coin.style.top = "0px"; // 初期位置
			coin.style.left = left + "px";
		}, 3000);
	}
	
	// バットを出現させる
	function spawnBat() {
		let bat = document.getElementById("bat");
		let game = document.getElementById("game");
		let gameWidth = parseInt(game.style.width);
		
		setInterval(function () {
			let left = Math.floor(Math.random() * (gameWidth - 75));
			bat.style.top = "0px"; // 初期位置
			bat.style.left = left + "px";
		}, 4000);
	}
	
	// 要素を追加する
	function addElements() {
		let game = document.getElementById("game");
		let fish = document.getElementById("fish");
		let coin = document.getElementById("coin");
		let bat = document.getElementById("bat");
		
		game.appendChild(fish);
		game.appendChild(coin);
		game.appendChild(bat);
	}
	
	// ゲームオーバーにする
	function gameOver() {
		alert("ゲームオーバーです！");
		location.reload(); // ページをリロードする
	}
	
	</script>
	
</body>
</html>
```