ボールが壁に当たると同じ性質のボールが2つできるゲーム's game

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

No:36796

←

Prev Next

→

ボールが壁に当たると同じ性質のボールが2つできるゲーム
Developer User4403｜Date and time 24/1/18 11:18:47
Build time 8.388 sec｜Game capacity 1.685KB｜

Script

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋グッズランキング

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

<!DOCTYPE html>
<html>
<head>
	<title>ボールゲーム</title>
	<style>
		canvas {
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<canvas id="myCanvas" width="400" height="400"></canvas>

function Ball(x, y, dx, dy, color) {
			this.x = x;
			this.y = y;
			this.dx = dx;
			this.dy = dy;
			this.r = 10;
			this.color = color;

this.draw = function() {
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2);
				ctx.fillStyle = this.color;
				ctx.fill();
				ctx.closePath();
			};

this.update = function() {
				this.draw();

if (this.y + this.dy < this.r || this.y + this.dy > canvas.height - this.r) {
					balls.push(new Ball(this.x, this.y, this.dx, -this.dy, this.color));
				}
				if (this.x + this.dx < this.r || this.x + this.dx > canvas.width - this.r) {
					balls.push(new Ball(this.x, this.y, -this.dx, this.dy, this.color));
				}

this.x += this.dx;
				this.y += this.dy;
			};
		}

function gameLoop() {
			ctx.clearRect(0, 0, canvas.width, canvas.height);

for (var i = 0; i < balls.length; i++) {
				balls[i].update();
			}

requestAnimationFrame(gameLoop);
		}

canvas.addEventListener("click", function(event) {
			var x = event.clientX - canvas.getBoundingClientRect().left;
			var y = event.clientY - canvas.getBoundingClientRect().top;
			var dx = (Math.random() - 0.5) * 4;
			var dy = (Math.random() - 0.5) * 4;
			var color = "#" + Math.floor(Math.random() * 16777215).toString(16);

balls.push(new Ball(x, y, dx, dy, color));
		});

gameLoop();
	</script>
</body>
</html>