AI game creator

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

No:1862

2719

←

Prev Next

→

beat-em-up game
Developer AI絵師｜Date and time 23/6/19 10:07:05
Build time 36.151 sec｜Game capacity 3.025KB｜

Script

ご依頼ありがとうございます！以下は、鬼畜ゲームの1枚のhtmlファイルでの実装例です。JavaScriptを使用しており、スマホでも動作するように設計されています。＜ゲームの概要＞プレイヤーは、追いかけてくる鬼から逃げながら、ゴールを目指すゲームです。プレイヤーが鬼に捕まるか、タイムアップになるとゲームオーバーとなります。＜実装例＞

ご確認いただけますと幸いです。また、何か問題があれば遠慮なくお知らせください。

←

Prev　Next

→ 　

Back　

[PR]現在の新着人気ランキング

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

ご依頼ありがとうございます！

以下は、鬼畜ゲームの1枚のhtmlファイルでの実装例です。JavaScriptを使用しており、スマホでも動作するように設計されています。

＜ゲームの概要＞
プレイヤーは、追いかけてくる鬼から逃げながら、ゴールを目指すゲームです。プレイヤーが鬼に捕まるか、タイムアップになるとゲームオーバーとなります。

＜実装例＞
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>鬼畜ゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #1c1c1c;
			overflow: hidden;
		}

#player {
			width: 50px;
			height: 50px;
			background-color: #ff6347;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}

#enemy {
			width: 50px;
			height: 50px;
			background-color: #4b0082;
			position: absolute;
			top: 10%;
			left: 10%;
		}

#goal {
			width: 50px;
			height: 50px;
			background-color: #00ff00;
			position: absolute;
			top: 90%;
			left: 90%;
		}

#time {
			position: absolute;
			top: 10px;
			right: 10px;
			color: #ffffff;
			font-size: 24px;
		}
	</style>
</head>
<body>
	<div id="player"></div>
	<div id="enemy"></div>
	<div id="goal"></div>
	<div id="time">30</div>

function movePlayer(event) {
			var x = event.touches[0].clientX;
			var y = event.touches[0].clientY;

player.style.left = x + "px";
			player.style.top = y + "px";
		}

function moveEnemy() {
			var x = Math.floor(Math.random() * window.innerWidth);
			var y = Math.floor(Math.random() * window.innerHeight);

enemy.style.left = x + "px";
			enemy.style.top = y + "px";
		}

function updateTime() {
			timeLeft--;
			timeText.innerHTML = timeLeft;

if (timeLeft == 0) {
				clearInterval(timer);
				alert("ゲームオーバー");
			}
		}

function checkCollision() {
			var playerRect = player.getBoundingClientRect();
			var enemyRect = enemy.getBoundingClientRect();
			var goalRect = goal.getBoundingClientRect();

if (playerRect.left < goalRect.left && playerRect.right > goalRect.left && playerRect.top < goalRect.top && playerRect.bottom > goalRect.top) {
				clearInterval(timer);
				alert("クリア！");
			}

if (playerRect.left < enemyRect.right && playerRect.right > enemyRect.left && playerRect.top < enemyRect.bottom && playerRect.bottom > enemyRect.top) {
				clearInterval(timer);
				alert("ゲームオーバー");
			}
		}

var timer = setInterval(function() {
			moveEnemy();
			updateTime();
			checkCollision();
		}, 1000);

document.addEventListener("touchmove", movePlayer);
	</script>
</body>
</html>

ご確認いただけますと幸いです。また、何か問題があれば遠慮なくお知らせください。