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

No:1468

101

←

Prev Next

→

A game in which you throw stones at ninjas climbin..ALL
Developer User3343｜Date and time 23/6/18 17:02:13
Build time 42.639 sec｜Game capacity 3.524KB｜

Script

Ninja攻撃

崖を登ってくる忍者に石を投げて倒そう！

←

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>Ninja攻撃</title>
	<style>
		body{
			background: #81d4fa;
			margin: 0;
			padding: 0;
			font-size: 24px;
			font-family: Arial, sans-serif;
			color: white;
			text-align: center;
		}
		canvas{
			display: block;
			margin: 0 auto;
			background: #e0f7fa;
			border-radius: 10px;
			box-shadow: 0px 0px 10px rgba(0,0,0,0.5);	
		}
	</style>
</head>
<body>
	<h1>Ninja攻撃</h1>
	<p>崖を登ってくる忍者に石を投げて倒そう！</p>
	
	<canvas id="canvas" width="480" height="320"></canvas>

let gameover = false;
	let score = 0;

//忍者の配列
	let ninjas = [];

//playerの実装
	const player = {
		x: canvas.width / 2,
		y: canvas.height - 50,
		radius: 30,
		color: "white",
		draw(){
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
			ctx.fillStyle = this.color;
			ctx.fill();
		}
	}
	//playerの移動制御
	canvas.addEventListener("mousemove", function(event){
		player.x = event.clientX - canvas.offsetLeft;
	});
	//石の実装
	class Stone {
		constructor(x, y){
			this.x = x;
			this.y = y;
			this.radius = 5;
			this.color = "white";
			this.velocity = {
				x: 0,
				y: -5
			};
		}
		draw(){
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
			ctx.fillStyle = this.color;
			ctx.fill();
		}
		update(){
			this.x += this.velocity.x;
			this.y += this.velocity.y;
		}
	}

canvas.addEventListener("click", function(){
		const stone = new Stone(player.x, player.y);
		stones.push(stone);
	});

let stones = [];

function init(){
		ninjas = [];
		gameover = false;
		score = 0;
	}

//忍者の実装
	class Ninja {
		constructor(x, y, speed){
			this.x = x;
			this.y = y;
			this.radius = 30;
			this.color = "black";
			this.speed = speed;
			this.health = 100;
		}
		draw(){
			ctx.beginPath();
			ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2);
			ctx.fillStyle = this.color;
			ctx.fill();
		}
		update(){
			this.y += this.speed;
			//崖の上にたどり着いたらgameover
			if(this.y + this.radius > canvas.height){
				gameover = true;
			}
			//衝突判定
			stones.forEach((stone, index) => {
				const distance = Math.hypot(this.x - stone.x, this.y - stone.y);
				if(distance - this.radius - stone.radius < 1){
					stones.splice(index, 1);
					this.health -= 10;
					if(this.health <= 0){
						score += 10;
						ninjas.splice(ninjas.indexOf(this), 1);
					}
				}
			});
		}
	}

//忍者の生成
	function spawnNinjas(){
		setInterval(() => {
			let x = Math.random() * (canvas.width - 2*player.radius) + player.radius;
			let y = -player.radius;
			let speed = Math.random() * 5 + 1;
			let ninja = new Ninja(x, y, speed);
			ninjas.push(ninja);
		}, 1000);
	}

//スコアの表示
	function showScore(){
		ctx.fillText("Score:" + score, 50, 50);
	}

spawnNinjas();
	animate();
	</script>
</body>
</html>