AI game creator

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

No:1609

1870

←

Prev Next

→

Hero Battle
Developer AI絵師｜Date and time 23/6/18 19:31:41
Build time 60.371 sec｜Game capacity 5.207KB｜

Script

勇者A

HP: 100

勇者B

HP: 100

勇者C

HP: 100

勇者D

HP: 100

チームを選んでください！

このアプリは、勇者4人がいる英雄たちの戦いをテーマにしたゲームです。最初に、勇者4人の中からチームを選び、ゲームをスタートすると、ランダムに攻撃が繰り出されます。攻撃する勇者や被攻撃する勇者はランダムで決まり、攻撃のダメージもランダムに変動します。攻撃を受けた勇者のHPが0になると、その勇者は戦闘から去ります。10ターン後に、チームに残っている勇者の人数で勝利を決定します。スマホでも遊べるようにシンプルに作り、絵文字を多めに使用しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋ゲームアプリランキング

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

<html>
<head>
	<meta charset="UTF-8">
	<title>英雄大戦</title>
	<style>
		body{
			background-color: #e6e6e6;
			font-size: 1.2em;
			text-align: center;
		}
		.container{
			margin: 0 auto;
			max-width: 800px;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;
			align-items: center;
		}
		.hero{
			width: 200px;
			height: 240px;
			background-color: #fff;
			box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
			margin: 10px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			position: relative;
			cursor: pointer;
		}
		.hero img{
			width: 120px;
			height: 120px;
			margin-bottom: 10px;
		}
		.hero .name{
			font-weight: bold;
			padding: 5px;
			background-color: #4287f5;
			color: #fff;
			border-radius: 50%;
			position: absolute;
			top: 5%;
			left: 50%;
			transform: translateX(-50%);
			z-index: 1;
		}
		.hero .hp{
			font-size: 1.2em;
			margin-top: 10px;
		}
		.hero:hover{
			transform: translateY(-5px);
			box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5);
		}
		.message{
			margin-top: 20px;
			color: blue;
			font-weight: bold;
			font-size: 1.5em;
		}
		.button{
			margin-top: 30px;
			background-color: #4287f5;
			color: #fff;
			padding: 10px 20px;
			border: none;
			font-weight: bold;
			cursor: pointer;
			font-size: 1.2em;
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="hero">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/man_1f468.png">
			<div class="name">勇者A</div>
			<div class="hp">HP: 100</div>
		</div>
		<div class="hero">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/man_1f468-light-skin-tone.png">
			<div class="name">勇者B</div>
			<div class="hp">HP: 100</div>
		</div>
		<div class="hero">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/man_1f468-medium-light-skin-tone.png">
			<div class="name">勇者C</div>
			<div class="hp">HP: 100</div>
		</div>
		<div class="hero">
			<img src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/thumbs/120/apple/271/man_1f468-medium-dark-skin-tone.png">
			<div class="name">勇者D</div>
			<div class="hp">HP: 100</div>
		</div>
		<div class="message">チームを選んでください！</div>
		<button class="button" onclick="startGame()">スタート</button>
	</div>
	<script>
		var heroList = document.querySelectorAll('.hero');
		var teamA = [];
		var teamB = [];
		var turn = 1;

for(i = 0; i < heroList.length; i++){
			heroList[i].addEventListener('click', function(){
				if(this.classList.contains('selected')){
					this.classList.remove('selected');
				} else {
					this.classList.add('selected');
				}
			});
		}
	</script>
</body>
</html>