課題_クラスを作ってみる2

JavaScript

ダウンロード

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="Arcer.js" type="text/javascript"></script>
	<script src="Rect.js" type="text/javascript"></script>
	<title>課題_クラスを作ってみる2</title>
	<script type="text/javascript">
		// クラスを格納するオブジェクト配列
		var objects = [];
		
		// キャンバス
		var canvas = null;
		var g = null;
		
		// スクリーンサイズ設定
		const SCREEN_WIDTH = 500;
		const SCREEN_HEIGHT = 500;
		
		// ゲームループ
		function gameLoop(){
			// 描画をクリア
			g.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
			// オブジェクトを更新
			for(let i in objects){
				objects[i].update();
			}
			// ディスプレイの更新間隔に合わせて一定間隔で描画の更新を行う
			requestAnimationFrame(gameLoop);
		}
		
		// 起動時の処理
		window.addEventListener("load", function(){
			// キャンバス取得
			canvas = document.getElementById("canvas");
			g = canvas.getContext("2d");
			// クラスArcerを生成し、オブジェクト配列に格納
			for(let i=0; i<25; i++){
				let arcer = new Arcer();
				objects.push(arcer);
			}
			// クラスRectを生成し、オブジェクト配列に格納
			for(let i=0; i<25; i++){
				let rect = new Rect();
				objects.push(rect);
			}
			console.log("オブジェクト数: " + objects.length);
			// ゲームループスタート
			gameLoop();
		});
	</script>
</head>
<body>
	<h1>課題_クラスを作ってみる2</h1>
	<canvas id="canvas" width="500" height="500"></canvas>
</body>
</html>

Rect.js

/* Rect.js : 円を描画し移動処理をするクラス*/

class Rect{
	// コンストラクタ
	constructor(){
		this.x = Math.floor(Math.random() * SCREEN_WIDTH);		// x座標
		this.y = Math.floor(Math.random() * SCREEN_HEIGHT);		// y座標
		this.width = Math.floor(Math.random() * 50) + 1;				// 幅
		this.height = Math.floor(Math.random() * 50) + 1;				// 高さ 
		this.vx = Math.floor(Math.random() * 10);
		this.vy = Math.floor(Math.random() * 10);
	}
	// 描画メソッド
	draw(){
		g.fillStyle = "green";
		g.fillRect(this.x, this.y, this.width, this.height);
	}
	// 移動メソッド
	move(){
		this.x += this.vx;
		this.y += this.vy;
		// はね返る
		if(this.x < 0 + this.width){
			this.x = 0 + this.width;
			this.vx = -this.vx;
		}
		else if(this.x > SCREEN_WIDTH - this.width){
			this.x = SCREEN_WIDTH - this.width;
			this.vx = -this.vx;
		}
		if(this.y < 0 + this.height){
			this.y = 0 + this.height;
			this.vy = -this.vy;
		}
		else if(this.y > SCREEN_HEIGHT - this.height){
			this.y = SCREEN_WIDTH - this.height;
			this.vy = -this.vy;
		}
	}
	// 更新処理
	update(){
		this.move();
		this.draw();
	}
}

Arcer.js

/* Arcer.js : 円を描画し移動処理をするクラス*/

class Arcer{
	// コンストラクタ
	constructor(){
		this.x = Math.floor(Math.random() * SCREEN_WIDTH);		// x座標
		this.y = Math.floor(Math.random() * SCREEN_HEIGHT);		// y座標
		this.r = Math.floor(Math.random() * 50) + 1;				// 半径
		this.vx = Math.floor(Math.random() * 3) + 1;				// x方向のスピード
		this.vy = Math.floor(Math.random() * 3) + 1;				// y方向のスピード
	}
	// 描画メソッド
	draw(){
		g.beginPath();
		g.arc(this.x, this.y, this.r, 0, Math.PI*2, false);
		g.stroke();
	}
	// 移動メソッド
	move(){
		this.x += this.vx;
		this.y += this.vy;
		// はね返る
		if(this.x < 0 + this.r){
			this.x = 0 + this.r;
			this.vx = -this.vx;
		}
		else if(this.x > SCREEN_WIDTH - this.r){
			this.x = SCREEN_WIDTH - this.r;
			this.vx = -this.vx;
		}
		if(this.y < 0 + this.r){
			this.y = 0 + this.r;
			this.vy = -this.vy;
		}
		else if(this.y > SCREEN_HEIGHT - this.r){
			this.y = SCREEN_WIDTH - this.r;
			this.vy = -this.vy;
		}
	}
	// 更新処理
	update(){
		this.move();
		this.draw();
	}
}

コメント