Skip to content

G
game-stydy
Commit 965964dc authored by 邱旭's avatar 邱旭
Browse files
Options

05.精灵Sprite

parent 2faf2811
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 0 deletions
05.精灵Sprite/05.精灵Sprite.html 0 → 100644
View file @ 965964dc
<!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>
05.精灵Sprite/05.精灵Sprite.md 0 → 100644
View file @ 965964dc
# 精灵 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)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment