AI game creator

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

No:88

351

←

Prev Next

→

Particle Games
Developer ひさひさ｜Date and time 23/5/13 2:21:38
Build time 48.324 sec｜Game capacity 1.853KB｜

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>
		canvas {
			background-color: black;
		}
	</style>
</head>
<body>
	<canvas id="gameCanvas"></canvas>
	<script>
		// ゲームの設定
		var canvas = document.getElementById("gameCanvas");
		var context = canvas.getContext("2d");
		var particleCount = 50;
		var particles = [];

// キャンバスのサイズを設定
		canvas.width = window.innerWidth - 20;
		canvas.height = window.innerHeight - 20;

// パーティクルを生成
		for (var i = 0; i < particleCount; i++){
			particles.push(new Particle());
		}

// パーティクルのクラス設定
		function Particle(){
			this.x = Math.random() * canvas.width;
            this.y = Math.random() * canvas.height;
            this.vx = Math.random() * 10 - 5;
            this.vy = Math.random() * 10 - 5;
			this.size = Math.random() * 10 + 10;
		}

// パーティクルの描画
		function drawParticle(particle){
			context.beginPath();
			context.arc(particle.x, particle.y, particle.size, 0, Math.PI * 2);
			context.fillStyle = "white";
			context.fill();
			context.closePath();
		}

// 更新ループ
		function update(){
			context.clearRect(0, 0, canvas.width, canvas.height);

// パーティクルの移動
			for (var i = 0; i < particleCount; i++){
				var particle = particles[i];
				particle.x += particle.vx;
				particle.y += particle.vy;

// 微妙に壁に当たったときの処理
				if (particle.x > canvas.width) particle.vx *= -1;
				if (particle.x < 0) particle.vx *= -1;
				if (particle.y > canvas.height) particle.vy *= -1;
				if (particle.y < 0) particle.vy *= -1;

drawParticle(particle);
			}

// 30FPSで更新
			setTimeout(update, 1000/30);
		}

// ゲームループの再生
		update();
	</script>
</body>
</html>