A game in which popular characters fight in a big battle's game

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

No:1732

328

←

Prev Next

→

A game in which popular characters fight in a big ..ALL
Developer User3346｜Date and time 23/6/18 23:21:34
Build time 45.67 sec｜Game capacity 3.893KB｜

Script

このゲームは、人気キャラクターたちが大乱闘するゲームです。プレイヤーはマリオ、ピカチュウ、リンク、カービィのいずれかを選んで、コンピューターと戦います。攻撃ボタンをクリックすると、プレイヤーキャラクターがランダムに選ばれたコンピューターキャラクターに攻撃をします。また、コンピューターキャラクターもプレイヤーキャラクターに攻撃をします。どちらかのキャラクターの体力が0になると、その時点で勝敗が決まります。絵文字を多めに使用して、わかりやすく楽しめるよう工夫しました。スマホでも操作できるように、ボタンサイズを大きめにしています。

←

Prev　Next

→ 　

Back　

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

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

<!DOCTYPE html>
<html>
<head>
	<title>大乱闘キャラクターゲーム</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style>
	body {
		margin: 0;
		padding: 0;
		background-image: url('background.jpg');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center center;
	}
	#game-container {
		display: flex;
		flex-wrap: wrap;
	}
	.game-char {
		width: 15%;
		display: block;
		flex-direction: column;
		align-items: center;
		margin-bottom: 2%;
	}
	.char-image {
		width: 80%;
		margin-bottom: 5%;
	}
	button {
		background-color: yellow;
		color: black;
		font-size: 1.5em;
		border-radius: 20px;
		border-color: black;
		padding: 3%;
		cursor: pointer;
		outline: none;
	}
	</style>
</head>
<body>
	<div id="game-container">
		<div class="game-char">
			<img src="mario.png" class="char-image">
			<button onclick="attack('mario')">攻撃！</button>
		</div>
		<div class="game-char">
			<img src="pikachu.png" class="char-image">
			<button onclick="attack('pikachu')">攻撃！</button>
		</div>
		<div class="game-char">
			<img src="link.png" class="char-image">
			<button onclick="attack('link')">攻撃！</button>
		</div>
		<div class="game-char">
			<img src="kirby.png" class="char-image">
			<button onclick="attack('kirby')">攻撃！</button>
		</div>
	</div>
	<h3 id="result"></h3>

function attack(char) {
			var player = window[char];
			var computer = [mario, pikachu, link, kirby][Math.floor(Math.random() * 4)];
			var computerAttack = Math.floor(Math.random() * 10) + 1;

computer.health -= player.attack;
			player.health -= computerAttack;

document.getElementById("result").innerHTML = player.name + "の攻撃！ " + player.attackMessage
			+ "<br>" + computer.name + "に" + player.attack + "のダメージを与えた！"
			+ "<br>" + computer.name + "の攻撃！ " + computer.attackMessage
			+ "<br>" + player.name + "に" + computerAttack + "のダメージを与えた！"
			+ "<br><br>" + player.name + "の残りの体力：" + player.health
			+ "<br>" + computer.name + "の残りの体力：" + computer.health;

if (player.health <= 0) {
				document.getElementById("result").innerHTML += "<br><br>あなたの負けです！";
			} else if (computer.health <= 0) {
				document.getElementById("result").innerHTML += "<br><br>あなたの勝ちです！";
			}
		}
	</script>
</body>
</html>