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

No:3160

2634

←

Prev Next

→

Pentagonal radar graph for random parameter switch..ALL
Developer User3655｜Date and time 23/6/24 0:34:16
Build time 37.407 sec｜Game capacity 2.813KB｜

Script

されるポケモンバトルゲームを作ってみました🐱‍👤🎮

ポケモンバトル

あなたのポケモンが勝利するように戦いましょう！

←

Prev　Next

→ 　

Back　

[PR]現在の人気ゲームランキング

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

されるポケモンバトルゲームを作ってみました🐱‍👤🎮

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Pokemon Battle</title>
	<style>
		body {
			background-color: #F5F5F5;
			text-align: center;
		}
		canvas {
			border: 2px solid black;
		}
		button {
			margin-top: 20px;
			padding: 10px;
			background-color: #4CAF50;
			color: white;
			border: none;
			border-radius: 8px;
			cursor: pointer;
		}
	</style>
</head>
<body>
	<h1>ポケモンバトル</h1>
	<h3>あなたのポケモンが勝利するように戦いましょう！</h3>
	<canvas id="canvas" width="300" height="300"></canvas>
	<br>
	<button id="attack" disabled>攻撃</button>
	
	<script>
		const canvas = document.getElementById("canvas");
		const ctx = canvas.getContext("2d");
		const attackBtn = document.getElementById("attack");
		
		// ポケモンのパラメーター
		const pokemon1 = {
			name: "ピカチュウ",
			hp: 100,
			attack: 20,
			defence: 10,
			speed: 30
		};
		
		const pokemon2 = {
			name: "ゼニガメ",
			hp: 120,
			attack: 18,
			defence: 12,
			speed: 25
		};
		
		// 5角形レーダーグラフの描画
		function drawRadarChart(pokemon) {
			ctx.beginPath();
			ctx.moveTo(150, 0);
			ctx.lineTo(40, 120);
			ctx.lineTo(120, 250);
			ctx.lineTo(180, 250);
			ctx.lineTo(260, 120);
			ctx.closePath();
			ctx.stroke();
			
			ctx.font = "20px Arial";
			ctx.fillText(pokemon.name, 120, 20);
			
			ctx.beginPath();
			ctx.moveTo(150, 0);
			ctx.lineTo(150 - pokemon.attack, 150 - pokemon.defence);
			ctx.lineTo(150 + pokemon.speed, 150 + pokemon.defence/2);
			ctx.lineTo(150 - pokemon.speed, 150 + pokemon.defence/2);
			ctx.lineTo(150 + pokemon.attack, 150 - pokemon.defence);
			ctx.closePath();
			ctx.fillStyle = "rgba(255, 0, 0, 0.5)";
			ctx.fill();
		}
		
		// 画面更新
		function update() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			drawRadarChart(pokemon1);
			drawRadarChart(pokemon2);
			
			// 体力0以下ならゲームオーバー
			if(pokemon1.hp <= 0) {
				alert(`${pokemon2.name}の勝利！`);
				attackBtn.disabled = true;
			} else if(pokemon2.hp <= 0) {
				alert(`${pokemon1.name}の勝利！`);
				attackBtn.disabled = true;
			}
		}
		
		// 攻撃処理
		function attack() {
			let attacker = Math.random() > 0.5 ? pokemon1 : pokemon2;
			let defender = attacker === pokemon1 ? pokemon2 : pokemon1;
			let damage = Math.round((attacker.attack - defender.defence/2) * Math.random());
			defender.hp -= damage;
			alert(`${attacker.name}の攻撃！${defender.name}に${damage}のダメージ！`);
			update();
		}
		
		// 攻撃ボタンのイベントリスナー
		attackBtn.addEventListener("click", attack);
		
		// ゲームスタート
		update();
		attackBtn.disabled = false;
	</script>
</body>
</html>