AI game creator

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

No:2196

234

←

Prev Next

→

hack-and-slash
Developer User3514｜Date and time 23/6/20 13:33:46
Build time 50.74 sec｜Game capacity 3.903KB｜

Script

⚔️攻撃:key1

🛡️防御:key2

❤️回復:key3

// このアプリはハックアンドスラッシュゲームです。プレイヤーはキーボードの1,2,3を押して攻撃、防御、回復を行い、敵を倒すことが目的です。プレイヤーと敵の体力バーが画面上に表示されます。また、プレイヤーが回復する際には回復のクールダウンがあり、適度に戦略が必要です。なお、このゲームはスマホでもプレイ可能です。

←

Prev　Next

→ 　

Back　

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

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">
	<style>
		body {
			margin: 0;
			padding: 0;
			font-size: 2em;
			text-align: center;
			background-color: #8B0000;
			color: white;
		}
		canvas {
			display: block;
			margin: 0 auto;
			background-color: black;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div>
		<p>⚔️攻撃:key1<p>
		<p>🛡️防御:key2</p>
		<p>❤️回復:key3</p>
	</div>
	<script>
		// ゲームオブジェクト
		var game = {
			canvas: document.getElementById("canvas"),
			ctx: null,
			width: 0,
			height: 0,
			player: null,
			enemy: null,
			keys: [],
			init: function() {
				this.ctx = this.canvas.getContext("2d");
				this.width = this.canvas.width = window.innerWidth;
				this.height = this.canvas.height = window.innerHeight;
				this.player = new Player(this.width / 2 - 50, this.height - 100);
				this.enemy = new Enemy(this.width / 2 + 50, 60);
			},
			update: function() {
				if (this.keys[49]) this.player.attack(this.enemy);
				if (this.keys[50]) this.player.defend();
				if (this.keys[51]) this.player.heal();
				this.enemy.update();
			},
			draw: function() {
				this.ctx.clearRect(0, 0, this.width, this.height);
				this.player.draw(this.ctx);
				this.enemy.draw(this.ctx);
			},
			loop: function() {
				game.update();
				game.draw();
				requestAnimationFrame(game.loop);
			}
		};
		
		// プレイヤーオブジェクト
		function Player(x, y) {
			this.x = x;
			this.y = y;
			this.health = 100;
			this.damage = 20;
			this.defendRate = 0.5;
			this.healAmount = 30;
			this.healCooldown = 5;
			this.healTimer = 0;
			this.draw = function(ctx) {
				ctx.fillStyle = "white";
				ctx.fillRect(this.x, this.y, 100, 100);
				ctx.fillStyle = "black";
				ctx.fillRect(this.x + 20, this.y + 20, 60, 60);
				ctx.fillStyle = "red";
				ctx.fillRect(this.x, this.y - 20, this.health, 10);
			};
			this.attack = function(enemy) {
				enemy.health -= this.damage;
				if (enemy.health < 0) enemy.health = 0;
			};
			this.defend = function() {
				this.defendRate = 1.0;
			};
			this.heal = function() {
				if (this.healTimer <= 0) {
					this.health += this.healAmount;
					if (this.health > 100) this.health = 100;
					this.healTimer = this.healCooldown;
				}
			};
			this.update = function() {
				if (this.healTimer > 0) this.healTimer -= 0.1;
				this.defendRate = 0.5;
			};
		}
		
		// 敵オブジェクト
		function Enemy(x, y) {
			this.x = x;
			this.y = y;
			this.health = 150;
			this.damage = 30;
			this.draw = function(ctx) {
				ctx.fillStyle = "white";
				ctx.fillRect(this.x, this.y, 100, 100);
				ctx.fillStyle = "black";
				ctx.fillRect(this.x + 20, this.y + 20, 60, 60);
				ctx.fillStyle = "red";
				ctx.fillRect(this.x, this.y - 20, this.health / 1.5, 10);
			};
			this.update = function() {
				if (Math.random() < 0.5) {
					game.player.health -= this.damage * game.player.defendRate;
					if (game.player.health < 0) game.player.health = 0;
				}
			};
		}
		
		// ゲーム開始
		window.onload = function() {
			game.init();
			document.addEventListener("keydown", function(event) {
				game.keys[event.keyCode] = true;
			});
			document.addEventListener("keyup", function(event) {
				game.keys[event.keyCode] = false;
			});
			game.loop();
		};
	</script>
</body>
</html>