The Game of Relativity's game

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

No:3360

1189

←

Prev Next

→

The Game of Relativity
Developer User3662｜Date and time 23/6/24 16:42:19
Build time 32.561 sec｜Game capacity 2.958KB｜

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>相対性理論のゲーム</title>
	<style>
		body {
			margin: 0;
			padding: 0;
			background-color: #111;
		}
		canvas {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#score {
			position: absolute;
			top: 20px;
			right: 20px;
			color: #fff;
			font-size: 36px;
			font-family: sans-serif;
		}
	</style>
</head>
<body>
	<canvas id="canvas"></canvas>
	<div id="score">0</div>
	
	<script>
		// ゲームの設定
		var setting = {
			speed: 5, // 動く速度
			ballSize: 50, // ボールのサイズ
			scoreUnit: 10 // スコアの単位
		};
		
		// ゲームの変数
		var canvas = document.getElementById('canvas');
		var ctx = canvas.getContext('2d');
		var score = 0;
		var balls = [];
		var size = {
			width: document.body.clientWidth,
			height: document.body.clientHeight
		};
		
		// ボールのクラス
		class Ball {
			constructor() {
				this.color = '#' + (Math.random() * 0xFFFFFF << 0).toString(16); // ランダムな色
				this.x = Math.random() * size.width;
				this.y = Math.random() * size.height;
				this.vx = (Math.random() - 0.5) * setting.speed;
				this.vy = (Math.random() - 0.5) * setting.speed;
				this.size = setting.ballSize;
			}
			
			move() {
				this.x += this.vx;
				this.y += this.vy;
				
				// 画面外に出たら反対側へループ
				if (this.x < -this.size) this.x = size.width + this.size;
				if (this.y < -this.size) this.y = size.height + this.size;
				if (this.x > size.width + this.size) this.x = -this.size;
				if (this.y > size.height + this.size) this.y = -this.size;
			}
			
			draw() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size/2, 0, Math.PI*2, false);
				ctx.fillStyle = this.color;
				ctx.fill();
			}
		}
		
		// ボールの生成
		for (var i=0; i<10; i++) {
			balls.push(new Ball());
		}
		
		// 操作
		canvas.addEventListener('touchstart', function(e) {
			for (var i=0; i<balls.length; i++) {
				if (balls[i].x < e.changedTouches[0].clientX + setting.ballSize &&
				    balls[i].x > e.changedTouches[0].clientX - setting.ballSize &&
				    balls[i].y < e.changedTouches[0].clientY + setting.ballSize &&
				    balls[i].y > e.changedTouches[0].clientY - setting.ballSize) {
					
					score += setting.scoreUnit;
					balls.splice(i, 1); // ボールを消す
					balls.push(new Ball()); // 新しいボールを生成
					
					break;
				}
			}
		});
		
		// ゲームループ
		function loop() {
			ctx.clearRect(0, 0, size.width, size.height); // 画面をクリア
			
			// ボールを動かして描画
			for (var i=0; i<balls.length; i++) {
				balls[i].move();
				balls[i].draw();
			}
			
			// スコアを表示
			document.getElementById('score').textContent = score;
			
			requestAnimationFrame(loop); // 次のループを予約
		}
		
		loop(); // ゲームループを開始
	</script>
</body>
</html>