06.面向对象

06.面向对象/06.面向对象.html

@@ -29,13 +29,16 @@
 		constructor(id, speed) {
 			super(id);
 			this.speed = speed; // 保存speed
-			this.setPosition(150, 150); // 给个默认位置
+
+            // 给个默认位置
+            this.top = 150;
+            this.left = 150;
 		}
 
 		update() {
 			super.update();
 
-			const { top, left } = this.getPosition();
+			const { top, left } = this;
 			const speed = this.speed;
 
 			// 计算新的top
@@ -45,9 +48,9 @@
 
 				// 如果速度过快，本次移动直接过头了(即差值<速度)，就直接移动到指定top
 				if (Math.abs(dis) < speed) {
-					this.transform.position.top = clickPos.top;
+					this.top = clickPos.top;
 				} else {
-					this.transform.position.top = top + dir * speed;    // 计算新的top，新的位置 = 之前的位置 + 方向 * 速度
+					this.top = top + dir * speed;    // 计算新的top，新的位置 = 之前的位置 + 方向 * 速度
 				}
 			}
 
@@ -57,9 +60,9 @@
 				const dir = dis > 0 ? 1 : -1;
 
 				if (Math.abs(dis) < speed) {
-					this.transform.position.left = clickPos.left;
+					this.left = clickPos.left;
 				} else {
-					this.transform.position.left = left + dir * speed;
+					this.left = left + dir * speed;
 				}
 			}
 		}

06.面向对象/06.面向对象.md

@@ -18,81 +18,36 @@
  * 抽象了一个简单的GameObject
  */
 class GameObject {
+
 	id;     // 绑定的dom元素的id
 	dom;    // 绑定的dom元素
 
-	/**
-	 * transform 表示显示对象的变换
-	 * @type {{rotate: number, scale: {x: number, y: number}, position: {top: number, left: number}}}
-	 */
-	transform = {
-		position: { top: 0, left: 0 },  // 位置
-		scale: { x: 1, y: 1 },          // 缩放
-		rotate: 0,                      // 旋转
-	}
-
-	constructor(id) {
-		this.id = id;
-		this.dom = document.getElementById(id); // 在构造函数中绑定dom元素
-		this.dom.style.position = "absolute";
-	}
+	// 位置
+	top = 0;
+	left = 0;
 
-	/**
-	 * 设置Position
-	 * @param top
-	 * @param left
-	 */
-	setPosition(top = this.transform.position.top, left = this.transform.position.left) {
-		this.transform.position.top = top;
-		this.transform.position.left = left;
-	}
+	// 缩放
+	scaleX = 1;
+	scaleY = 1;
 
-	/**
-	 * 设置Scale
-	 * @param x
-	 * @param y
-	 */
-	setScale(x = this.transform.scale.x, y = this.transform.scale.y) {
-		this.transform.scale.x = x;
-		this.transform.scale.y = y;
-	}
+	// 旋转
+	rotate = 0;
 
 	/**
-	 * 设置Rotate
-	 * @param rotate
+	 * 获得宽高
+	 * @returns {{width: number, height: number}}
 	 */
-	setRotate(rotate = this.transform.rotate) {
-		this.transform.rotate = rotate;
-	}
-
-	/**
-	 * 获得Position
-	 * @returns {{top: number, left: number}}
-	 */
-	getPosition() {
+	get size() {
 		return {
-			top: this.transform.position.top,
-			left: this.transform.position.left,
+			width: this.dom.clientWidth,
+			height: this.dom.clientHeight,
 		}
 	}
 
-	/**
-	 * 获得Scale
-	 * @returns {{x: number, y: number}}
-	 */
-	getScale() {
-		return {
-			x: this.transform.scale.x,
-			y: this.transform.scale.y,
-		}
-	}
-
-	/**
-	 * 获得Rotate
-	 * @returns {number}
-	 */
-	getRotate() {
-		return this.transform.rotate;
+	constructor(id) {
+		this.id = id;
+		this.dom = document.getElementById(id); // 在构造函数中绑定dom元素
+		this.dom.style.position = "absolute";
 	}
 
 	/**
@@ -106,13 +61,11 @@ class GameObject {
 	 * 抽离渲染部分
 	 */
 	render() {
-		const { top, left } = this.getPosition();
-		const { x: scaleX, y: scaleY } = this.getScale();
-		const rotate = this.getRotate();
+		const { top, left, scaleX, scaleY, rotate } = this;
 
 		this.dom.style.top = top + "px";
 		this.dom.style.left = left + "px";
-		this.dom.style.transform = `translate(-50%, -50%) scale(${scaleX}, ${scaleY}) rotate(${rotate}deg)`;
+		this.dom.style.transform = `scale(${scaleX}, ${scaleY}) rotate(${rotate}deg)`;
 	}
 
 	/**
@@ -121,26 +74,30 @@ class GameObject {
 	destroy() {
 
 	}
+
 }
 ```
 
 - 2.用面向对象的方式创建鸟的class
 
 ```javascript
-class Bird extends GameObject {
+    class Bird extends GameObject {
 
 	speed;  // bird的速度 每次移动多少距离
 
-	constructor(id, speed = 15) {
+	constructor(id, speed) {
 		super(id);
 		this.speed = speed; // 保存speed
-		this.setPosition(150, 150); // 给个默认位置
+
+		// 给个默认位置
+		this.top = 150;
+		this.left = 150;
 	}
 
 	update() {
 		super.update();
 
-		const { top, left } = this.getPosition();
+		const { top, left } = this;
 		const speed = this.speed;
 
 		// 计算新的top
@@ -150,9 +107,9 @@ class Bird extends GameObject {
 
 			// 如果速度过快，本次移动直接过头了(即差值<速度)，就直接移动到指定top
 			if (Math.abs(dis) < speed) {
-				this.transform.position.top = clickPos.top;
+				this.top = clickPos.top;
 			} else {
-				this.transform.position.top = top + dir * speed;    // 计算新的top，新的位置 = 之前的位置 + 方向 * 速度
+				this.top = top + dir * speed;    // 计算新的top，新的位置 = 之前的位置 + 方向 * 速度
 			}
 		}
 
@@ -162,13 +119,14 @@ class Bird extends GameObject {
 			const dir = dis > 0 ? 1 : -1;
 
 			if (Math.abs(dis) < speed) {
-				this.transform.position.left = clickPos.left;
+				this.left = clickPos.left;
 			} else {
-				this.transform.position.left = left + dir * speed;
+				this.left = left + dir * speed;
 			}
 		}
 	}
 }
+
 ```
 
 - 3.创建鸟的实例