AI game creator

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

No:1265

136

←

Prev Next

→

Cat Shooting Game
Developer User3290｜Date and time 23/6/18 9:28:14
Build time 51.61 sec｜Game capacity 4.508KB｜

Script

猫のシューティングゲーム

得点: 0

HP: 3

スマホで操作してね！

猫を操作して、敵を撃ち落とそう！

この猫のシューティングゲームは、プレイヤーが猫を操作して、画面上を飛ぶ敵を撃ち落とすゲームです。プレイヤーは画面をタップして弾を撃ち、敵を倒すことで得点が加算されます。プレイヤーのHPが0になるとゲームオーバーになります。スマホでのプレイ前提で、絵文字を多用しています。

←

Prev　Next

→ 　

Back　

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

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 {
			background-color: #F5DCD0;
			font-size: 2em;
			text-align: center;
		}
		div {
			display: inline-block;
			padding: 20px;
		}
		img {
			width: 100px;
			height: 100px;
		}
		.gamearea {
			position: relative;
			width: 90%;
			margin: auto;
			height: 400px;
			background-color: #FFFFFF;
		}
		.cat {
			position: absolute;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 100px;
			height: 100px;
		}
		.bullet {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 30px;
			height: 30px;
		}
		.enemy {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			width: 80px;
			height: 80px;
		}
	</style>
</head>
<body>
	<div>猫のシューティングゲーム</div>
	<div id="score">得点: 0</div>
	<div id="hp">HP: 3</div>
	<div>スマホで操作してね！</div>
	<br>
	<div>猫を操作して、敵を撃ち落とそう！</div>
	<br>
	<div class="gamearea" onclick="shoot(event)">
		<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/cat-face_1f431.png" alt="猫" class="cat">
	</div>
	<script>
		var score = 0;
		var hp = 3;
		var speed = 5;
		var interval = 1000;
		var gamearea = document.querySelector('.gamearea');
		var cat = document.querySelector('.cat');
		var bullets = [];

function shoot(e) {
			var bullet = document.createElement('img');
			bullet.setAttribute('src', 'https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/triangular-flag-on-post_1f6a9.png');
			bullet.setAttribute('alt', '弾');
			bullet.setAttribute('class', 'bullet');
			bullet.setAttribute('data-y', gamearea.offsetHeight - cat.offsetHeight - bullet.offsetHeight - 10);
			bullet.setAttribute('style', 'top: ' + bullet.getAttribute('data-y') + 'px;');
			bullets.push(bullet);
			gamearea.appendChild(bullet);
			setTimeout(function() {
				bullets.shift();
				gamearea.removeChild(bullet);
			}, interval);
		}