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

No:105

254

←

Prev Next

→

A game with shimmering musical notes
Developer User2104｜Date and time 23/5/18 3:49:32
Build time 69.842 sec｜Game capacity 2.393KB｜

Script

音符がゆらめくゲーム

【ゲームの概要】ランダムに表示される多数の音符を指定の時間内にタップするゲーム。スマホ端末での操作を前提とし、タップ判定はスマホ画面のタッチ操作に対応している。制限時間は30秒で、スコアはタップした音符の数によって決定される。

←

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{
			background-color: black;
		}
		h1{
			text-align: center;
			color: white;
			font-size: 3em;
			margin-top: 50px;
		}
		canvas{
			display: block;
			margin: 0 auto;
			border: 1px solid white;
		}
	</style>
</head>
<body>
	<h1>音符がゆらめくゲーム</h1>
	<canvas id="canvas"></canvas>
	<script>
		var canvas = document.getElementById("canvas");
		canvas.width = window.innerWidth;
		canvas.height = window.innerHeight;
		var ctx = canvas.getContext("2d");

// 音符を表すオブジェクト
		var Notes = function(x, y, size, angle, speed, color){
			this.x = x;
			this.y = y;
			this.size = size;
			this.angle = angle;
			this.speed = speed;
			this.color = color;
			this.draw = function(){
				ctx.fillStyle = this.color;
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
				ctx.fill();
			};
			this.move = function(){
				this.x += Math.cos(this.angle) * this.speed;
				this.y += Math.sin(this.angle) * this.speed;
				// 画面外に出たら再配置
				if(this.x < -50 || this.x > canvas.width + 50 || this.y < -50 || this.y > canvas.height + 50){
					this.x = Math.random() * canvas.width;
					this.y = Math.random() * canvas.height;
					this.angle = Math.random() * Math.PI * 2;
				}
			};
		};

// 初期化
		var notesList = [];
		for(var i = 0; i < 50; i++){
			var x = Math.random() * canvas.width;
			var y = Math.random() * canvas.height;
			var size = Math.random() * 30 + 10;
			var angle = Math.random() * Math.PI * 2;
			var speed = Math.random() * 5 + 1;
			var color = "#" + Math.floor(Math.random() * 16777215).toString(16);
			var notes = new Notes(x, y, size, angle, speed, color);
			notesList.push(notes);
		}

// 描画と動作
		setInterval(function(){
			ctx.clearRect(0, 0, canvas.width, canvas.height);
			for(var i = 0; i < notesList.length; i++){
				notesList[i].draw();
				notesList[i].move();
			}
		}, 1000/60);
	</script>
</body>
</html>

【ゲームの概要】
ランダムに表示される多数の音符を指定の時間内にタップするゲーム。スマホ端末での操作を前提とし、タップ判定はスマホ画面のタッチ操作に対応している。制限時間は30秒で、スコアはタップした音符の数によって決定される。