05.精灵Sprite

965964dc · 邱旭 · 2faf2811 · 965964dc · 965964dc
Commit 965964dc authored Mar 10, 2021 by 邱旭
Hide whitespace changes
Inline Side-by-side

Showing with 135 additions and 0 deletions

05.精灵Sprite.html 05.精灵Sprite/05.精灵Sprite.html +101 -0

05.精灵Sprite.md 05.精灵Sprite/05.精灵Sprite.md +34 -0

No files found.
--- a/05.精灵Sprite/05.精灵Sprite.html
+++ b/05.精灵Sprite/05.精灵Sprite.html
+<!DOCTYPE html>
+<html lang="zh">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
+
+    <title>05.精灵Sprite</title>
+    <style>
+        html, body {
+            margin: 0;
+            padding: 0;
+            width: 100%;
+            height: 100%;
+            overflow: hidden;
+        }
+
+        #bird {
+            /* 位置 */
+            position: absolute;
+
+            /* 旋转、缩放等属性 */
+            transform: scale(1, 1) rotate(0deg);
+            transform-origin: center; /* 锚点 */
+        }
+
+    </style>
+</head>
+<body>
+<img id="bird" src="../images/bird/bird_01.png"/>
+</body>
+
+<script>
+	const bird = document.getElementById("bird");
+
+	const speed = 15;   // bird的速度 每次移动多少距离
+	const pos = {   // bird的位置  bird当前的位置
+		top: 150,
+		left: 150,
+	}
+
+	const clickPos = { // 鼠标点击的位置 bird将要的到达的位置
+		top: 150,
+		left: 150,
+	}
+
+	// 使用mousedown监听鼠标按下，并获得鼠标点击的位置
+	const mouseDown = (e) => {
+		// 记录bird将要到达的位置，使用动画慢慢到达
+		clickPos.top = e.clientY;
+		clickPos.left = e.clientX;
+	}
+	document.addEventListener('mousedown', mouseDown);
+
+	/**
+	 * 计算Bird的位置(数据更新)
+	 */
+	function update() {
+		// 计算新的top
+		if (pos.top !== clickPos.top) {
+			const dis = clickPos.top - pos.top; // 计算差值
+			const dir = dis > 0 ? 1 : -1;  // 计算在top上移动的方向 1 正向移动 或 -1 反向移动;
+
+			// 如果速度过快，本次移动直接过头了(即差值<速度)，就直接移动到指定top
+			if (Math.abs(dis) < speed) {
+				pos.top = clickPos.top;
+			} else {
+				pos.top = pos.top + dir * speed;    // 计算新的top，新的位置 = 之前的位置 + 方向 * 速度
+			}
+		}
+
+		// 用相同的方式计算left
+		if (pos.left !== clickPos.left) {
+			const dis = clickPos.left - pos.left;
+			const dir = dis > 0 ? 1 : -1;
+
+			if (Math.abs(dis) < speed) {
+				pos.left = clickPos.left;
+			} else {
+				pos.left = pos.left + dir * speed;
+			}
+		}
+	}
+
+	/**
+	 * 更新显示对象位置(渲染)
+	 */
+	function render() {
+		bird.style.top = pos.top + "px";
+		bird.style.left = pos.left + "px";
+	}
+
+	function loop() {
+		requestAnimationFrame(loop);    // 循环调用requestAnimationFrame
+		update();   // 先数据更新
+		render();   // 后渲染更新
+	}
+
+	loop();
+
+</script>
+</html>
--- a/05.精灵Sprite/05.精灵Sprite.md
+++ b/05.精灵Sprite/05.精灵Sprite.md
+# 精灵 Sprite
+
+引入概念：`精灵` `Sprite`
+
+经过上一节的操作，我们已经得到了一只性能很高的Bird
+
+如果一款游戏只有大红大绿的方块，那一定也是没人玩的
+
+所以本节我们将要介绍游戏中的一个重要的概念`精灵`，即`Sprite`
+
+各位可将它理解为图片即`<img/>`
+
+- 1.创建一个`<img/>`模拟精灵的创建。这样将会更容易理解    
+  你也可以使用一个`<div><img/></div>`， 因为在游戏开发中，`组合`优于`继承`，组件化游戏开发多采用此方案
+
+```html
+<img id="bird" src="../images/bird/bird_01.png"/>
+```
+
+- 2.给精灵一个样式
+
+```css
+#bird {
+    /* 位置 */
+    position: absolute;
+
+    /* 旋转、缩放等属性 */
+    transform: scale(1, 1) rotate(0deg);
+    transform-origin: center; /* 锚点 */
+}
+```
+
+到此结束，我们已经有了第一个有头有脸的显示对象
+![05_1.png](../images/05_1.png)