当前位置：首页 > news >正文

js 动画库、2048核心逻辑、面试题add[1][2][3]+4

news 来源：原创 2025/6/1 11:58:41

1、js 动画库 web animation api

（1）初始化代码

hmtl、css 部分
- 初始化全局背景黑色
- 初始化黄色小球
js 部分
- 监听全局点击事件
- 创建并添加元素 class="pointer" 的 div 标签
  - 设置 left、top 位置
  - 监听动画结束事件，移除该元素
- 定位小球到画面中心

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/js动画库.css">
</head>
<body><div class="ball"></div><script src="./js/js动画库.js"></script>
</body>
</html>

const ball = document.querySelector('.ball');function init() {const x = window.innerWidth / 2;const y = window.innerHeight / 2;ball.style.transform = `translate(${x}px, ${y}px)`
}
init()

body {padding: 0;margin: 0;width: 100%;height: 100vh;background-color: #000;
}
.ball {width: 100px;height: 100px;background-color: yellow;border-radius: 50%;
}

（2）实现步骤

①点击小球移动

animate()：不改变 dom 树，因此不需要浏览器主线程管理，就不会阻塞主线程

window.addEventListener("click", (e) => {const x = e.clientX;const y = e.clientY;move(x, y);
});function move(x, y) {ball.animate([{transform: `translate(0px, 0px)`,},{transform: `translate(${x}px, ${y}px)`,}],2000)
}

②小球不回到中心位置

ball.animate([{transform: `translate(0px, 0px)`,},{transform: `translate(${x}px, ${y}px)`,}],{duration: 1000,fill: 'forwards',}
)

③获取小球当前位置

function move(x, y) {// 获取小球位置const rect = ball.getBoundingClientRect();const ballX = rect.left;const ballY = rect.top;ball.animate([{transform: `translate(${ballX}px, ${ballY}px)`,},{transform: `translate(${x}px, ${y}px)`,}],{duration: 1000,fill: 'forwards',})
}

④清除上一个动画

// 注意：只能在获取小球位置后清除
ball.getAnimations().forEach(animation=>{animation.cancel();
})

⑤小球先原地拉伸，后移动

ball.animate([{transform: `translate(${ballX}px, ${ballY}px)`,},{transform: `translate(${ballX}px, ${ballY}px) scaleX(1.5)`,offset: 0.6, // 该部分动画所占时长},{transform: `translate(${x}px, ${y}px) scaleX(1.5)`,offset: 0.8,},{transform: `translate(${x}px, ${y}px)`,}],{duration: 1000,fill: 'forwards',}
)

⑤拉伸角度跟随鼠标位置

const rad = Math.atan2(y - ballY, x - ballX);
const deg = (rad * 180) / Math.PI;
ball.animate([{transform: `translate(${ballX}px, ${ballY}px) rotate(${deg}deg)`,},{transform: `translate(${ballX}px, ${ballY}px) rotate(${deg}deg) scaleX(1.5)`,offset: 0.6, // 该部分动画所占时长},{transform: `translate(${x}px, ${y}px) rotate(${deg}deg) scaleX(1.5)`,offset: 0.8,},{transform: `translate(${x}px, ${y}px) rotate(${deg}deg)`,}],{duration: 1000,fill: 'forwards',}
)

（3）完整代码

const ball = document.querySelector(".ball");function init() {const x = window.innerWidth / 2;const y = window.innerHeight / 2;ball.style.transform = `translate(${x}px, ${y}px)`;
}
init();window.addEventListener("click", (e) => {const x = e.clientX;const y = e.clientY;move(x, y);
});function move(x, y) {// 获取小球位置const rect = ball.getBoundingClientRect();const ballX = rect.left;const ballY = rect.top;// 注意：只能在获取小球位置后清除ball.getAnimations().forEach((animation)=>{animation.cancel();})const rad = Math.atan2(y - ballY, x - ballX);const deg = (rad * 180) / Math.PI;ball.animate([{transform: `translate(${ballX}px, ${ballY}px) rotate(${deg}deg)`,},{transform: `translate(${ballX}px, ${ballY}px) rotate(${deg}deg) scaleX(1.5)`,offset: 0.6, // 该部分动画所占时长},{transform: `translate(${x}px, ${y}px) rotate(${deg}deg) scaleX(1.5)`,offset: 0.8,},{transform: `translate(${x}px, ${y}px) rotate(${deg}deg)`,}],{duration: 1000,fill: 'forwards',})
}

2、实现 2048 的核心逻辑——合并

Array.prototype.print = function () {console.log(this.join("\n"));
};// 棋盘
const matrix = [[0, 2, 2, 0],[0, 0, 2, 2],[2, 4, 4, 2],[2, 4, 4, 4],
];/*** 移动* @param {*} matrix 棋盘* @param {*} direction 方向*/
function move(matrix, direction) {const rows = matrix.length;const cols = matrix[0].length;/*** 是否越界* @param {*} i* @param {*} j* @returns*/function _inRange(i, j) {return i >= 0 && i < rows && j >= 0 && j < cols;}// 配置方向const nexts = {up: (i, j) => [i + 1, j],down: (i, j) => [i - 1, j],left: (i, j) => [i, j + 1],right: (i, j) => [i, j - 1],};/*** 下一个位置* @param {*} i* @param {*} j* @returns*/function _nextPos(i, j) {const [ni, nj] = nexts[direction](i, j);if (!_inRange(ni, nj)) {return null;}return [ni, nj];}/*** 得到下一个非0的位置* @param {*} i* @param {*} j* @returns*/function _nextNonZeroPos(i, j) {const pos = _nextPos(i, j);if (!pos) {return null;}const [ni, nj] = pos;if (matrix[ni][nj] !== 0) {return pos;}return _nextNonZeroPos(ni, nj); // 递归}/*** 计算某个位置最新的值，同时计算该行或该列所有的最新值* @param {*} i* @param {*} j*/function _calc(i, j) {const pos = _nextNonZeroPos(i, j);if (!pos) {return;}const [ni, nj] = pos;const v = matrix[i][j]; // 当前位置值const nv = matrix[ni][nj]; // 下一个位置值if (v === 0) {matrix[i][j] = nv;matrix[ni][nj] = 0;_calc(i, j); // 递归} else if (v === nv) {matrix[i][j] *= 2;matrix[ni][nj] = 0;}const nextPos = _nextPos(i, j);_calc(...nextPos);}if(direction === 'up') {for (let i = 0; i < cols; i++) {_calc(0, i);}}if(direction === 'down') {for (let i = 0; i < cols; i++) {_calc(rows - 1, i);}}if(direction === 'left') {for (let i = 0; i < cols; i++) {_calc(i, 0);}}if(direction === 'right') {for (let i = 0; i < cols; i++) {_calc(i, cols - 1);}}
}matrix.print();
move(matrix, "down");
console.log("======================");
matrix.print();

3、实现 add

让下面代码成立

const r1 = add[1][2][3] + 4; // 期望结果 10
const r2 = add[10][20] + 30; // 期望结果 60
const r3 = add[100][200][300] + 400; // 期望结果 1000

（1）实现思路

从 add 的调用得出，add 是对象且属性是未知的
如何读取未知属性对象呢？——完成一个代理辅助函数

（2）实现步骤

①读值

function createProxy() {return new Proxy({},{get(target, prop) {console.log(prop);},});
}const add = createProxy();
add[100]; // 100

②返回值

步骤思路1：由 add[1][2][3] 可以看出返回值也必须是一个代理，这样在执行完 add[1] 后能继续执行后面的
const a1 = add[1];
const a2 = a1[2];
const a3 = a2[3];
步骤思路2：累计计算

以下代码报错的原因是 add[1] 是对象，而 2 是原始类型，二者无法相加
function createProxy(value = 0) {return new Proxy({},{get(target, prop) {console.log(prop);return createProxy(value + Number(prop));},});
}const add = createProxy();
const a = add[1] + 2;
console.log(a); // 报错 TypeError: Cannot convert a Symbol value to a number
步骤思路3：对象转为原始类型
function createProxy(value = 0) {const handler = () => value;return new Proxy({},{get(target, prop) {if(prop === Symbol.toPrimitive) {return handler;}return createProxy(value + Number(prop));},});
}const add = createProxy();
const a = add[1] + 2;
console.log(a); // 3

③完整代码-结果验证

function createProxy(value = 0) {const handler = () => value;return new Proxy({},{get(target, prop) {if(prop === Symbol.toPrimitive) {return handler;}return createProxy(value + Number(prop));},});
}// 实现add
const add = createProxy();
// 让下面代码成立
const r1 = add[1][2][3] + 4; // 期望结果 10
const r2 = add[10][20] + 30; // 期望结果 60
const r3 = add[100][200][300] + 400; // 期望结果 1000
console.log(r1); // 10
console.log(r2); // 60
console.log(r3); // 1000

4、Sass 星空

（1）初始化代码

注意：html 引入的是 css 文件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./css/Sass星空.css">
</head>
<body><div class="layer1"></div><div class="layer2"></div><div class="layer3"></div><div class="layer4"></div><div class="layer5"></div><div class="title">Sass 星空</div>
</body>
</html>

编写的 css 是在 scss 文件中，后续再通过编译生成对应的 css 文件即可

body {padding: 0;margin: 0;background-color: #10141A;
}.title {font-size: 40px;background: linear-gradient(to top, #000 0%, #fff 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}

（2）实现步骤

①用函数+阴影实现 n 个随机星星

@function star($n) {$result: '#{random(100)}vw #{random(100)}vh 0 #fff';@for $i from 2 through $n {$result: '#{$result},#{random(100)}vw #{random(100)}vh 0 #fff'}@return unquote($result);
}.layer1 {position: fixed;width: 20px;height: 20px;border-radius: 50%;box-shadow: star(100);
}

②scss 编译成 css

在 scss 文件目录中下载 sass
```
npm install sass
```
执行编译命令
```
sass Sass星空.scss Sass星空.css
```

③让星星动起来

.layer1 {position: fixed;width: 20px;height: 20px;border-radius: 50%;box-shadow: star(100);animation: moveUp 10s linear infinite;
}
@keyframes moveUp {to {transform: translateY((-100vh));}
}

④断层无感处理

.layer1 {position: fixed;width: 20px;height: 20px;left: 0;top: 0;border-radius: 50%;box-shadow: star(100);animation: moveUp 10s linear infinite;
}
.layer1::after {content: '';position: inherit;width: inherit;height: inherit;border-radius: inherit;box-shadow: inherit;left: 0;top: 100vh;
}

⑤循环多层

$n: 5;
$duration: 400s;
$count: 1000;
@for $i from 1 through $n {$duration: floor($duration / 2);$count: floor($count / 2);.layer#{$i} {position: fixed;width: #{$i}px;height: #{$i}px;left: 0;top: 0;border-radius: 50%;box-shadow: star($count);animation: moveUp $duration linear infinite;}.layer#{$i}::after {content: '';position: inherit;width: inherit;height: inherit;border-radius: inherit;box-shadow: inherit;left: 0;top: 100vh;}
}

（3）完整代码

body {padding: 0;margin: 0;width: 100%;height: 100vh;background-color: #10141A;
}.title {font-size: 40px;background: linear-gradient(to top, #000 0%, #fff 100%);-webkit-background-clip: text;background-clip: text;-webkit-text-fill-color: transparent;color: transparent;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
}@function star($n) {$result: '#{random(100)}vw #{random(100)}vh 0 #fff';@for $i from 2 through $n {$result: '#{$result},#{random(100)}vw #{random(100)}vh 0 #fff'}@return unquote($result);
}$n: 5;
$duration: 400s;
$count: 1000;
@for $i from 1 through $n {$duration: floor($duration / 2);$count: floor($count / 2);.layer#{$i} {position: fixed;width: #{$i}px;height: #{$i}px;left: 0;top: 0;border-radius: 50%;box-shadow: star($count);animation: moveUp $duration linear infinite;}.layer#{$i}::after {content: '';position: inherit;width: inherit;height: inherit;border-radius: inherit;box-shadow: inherit;left: 0;top: 100vh;}
}@keyframes moveUp {to {transform: translateY((-100vh));}
}