Kusakar ISM

【豆知識】自分のスマホに表示されたQRコードを、そのまま読み込む方法。

JavaScriptの「クラス」について解説する動画

JavaScript

JavaScriptのクラスを解説した動画のコード

JavaScriptの入門講座もそろそろ終盤です。
次回からいよいよ「テトリス」のプログラミングに入ります。

クラスはオブジェクト指向でプログラミングをしていく際の中心となる考え方。

今回の動画では、そのクラスについて解説しています。

その動画本編はコチラ

JavaScriptシリーズの再生リストはコチラ

解説は動画本編を見ていただくとして、ここには学習用のコードを掲載しておきます。

完成時の挙動はコチラから確認していただけます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
</head>
<body>
	<canvas id="canId" width=600 height=500></canvas><br>
	<button onclick="stop()">STOP</button>

	<script>
		let getE = document.getElementById("canId");
		getE.style.backgroundColor = "black";
		let can = getE.getContext("2d");

		let interval = setInterval(loop, 10);	// 繰り返し処理
		
		function stop(){
			 clearInterval(interval);
			 Smiley.clearField();
		}

		//******************** スマイリークラス ********************
		class Smiley{
			constructor(x, y, moveX, moveY){	// コンストラクター
				this.x = x;
				this.y = y;
				this.moveX = moveX;
				this.moveY = moveY;
				this.color = "yellow";
			}
			static clearField(){			// クリア関数
				can.fillStyle = "#000";
				can.fillRect(0,0,600,500);
			}
			draw(){							// ドロー関数
				can.beginPath();						// ニコちゃん輪郭
				can.arc(50+this.x, 50+this.y, 50, 0, Math.PI*2);
				can.fillStyle = this.color;
				can.fill();
				can.beginPath();						// ニコちゃんの口
				can.arc(50+this.x, 50+this.y, 35, 0, Math.PI);
				can.strokeStyle = "black";
				can.lineWidth = 4;
				can.stroke();
				can.beginPath();						// ニコちゃんの目
				can.ellipse(35+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);
				can.ellipse(65+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);
				can.fillStyle = "black";
				can.fill();
			}
			move(){							// ムーブ関数
				if (this.x<0 || this.x>500){ this.moveX *= -1;}		// 左右壁との衝突判定
				if (this.y<0 || this.y>400){ this.moveY *= -1;}		// 天井と床との衝突判定

				this.x += this.moveX;								// 次回描画位置を設定
				this.y += this.moveY;
			}
		}

		//******************** スマイリー２クラス ********************
		class Smiley2 extends Smiley{	//スマイリークラスを継承
			move(){						//move()メソッドだけ変更→天井と床で反射と同時に色が変化
				let arrayColor = ["white","red","blue","green"];
				if (this.x<0 || this.x>500){ this.moveX *= -1;}	
				if (this.y<0 || this.y>400){
					this.moveY *= -1;
					this.color = arrayColor[Math.floor(Math.random()*4)];
				}	
				this.x += this.moveX;	
				this.y += this.moveY;
			}
		}

		//******************** スマイリー３ ********************
		class Smiley3 extends Smiley2{	//スマイリー２クラスを継承
			draw(){						//draw()メソッドだけ変更→四角いニコちゃん
				can.beginPath();						
				can.rect(this.x, this.y, 100, 100);
				can.fillStyle = this.color;
				can.fill();
				can.beginPath();						
				can.arc(50+this.x, 50+this.y, 35, 0, Math.PI);
				can.strokeStyle = "black";
				can.lineWidth = 4;
				can.stroke();
				can.beginPath();						
				can.ellipse(35+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);
				can.ellipse(65+this.x, 40+this.y, 5, 8, 0, 0, Math.PI*2);
				can.fillStyle = "black";
				can.fill();
			}
		}


		// インスタンス化など
		let smileys = [];
		let nico_1 = new Smiley3(0,0,3,5);
		let nico_2 = new Smiley2(0,0,1,5);
		smileys.push(nico_1);
		smileys.push(nico_2);
		for (let i=0; i<10; i++){
			let moveX = Math.floor(Math.random()*5)+1;
			let moveY = Math.floor(Math.random()*5)+1;
			let smile = new Smiley(0,0,moveX,moveY);
			smileys.push(smile);			
		}

		function loop(){
			Smiley.clearField();
			for (let i=0; i<smileys.length; i++){
				smileys[i].draw();
				smileys[i].move();
			}
		}



	</script>
</body>
</html>

JavaScriptの最新記事