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

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

backend 2025/7/18 20:52:58

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));}
}
http://www.xdnf.cn/news/10177.html

相关文章：

  • Datatable和实体集合互转
  • 华锐视点助力，虚拟旅游绽放更璀璨光彩​
  • 图书管理系统的设计与实现
  • 北京大学肖臻老师《区块链技术与应用》公开课：06-BTC-网络
  • canoe 排查配置相关【graphics，capl】
  • Python基本运算符
  • python装饰器
  • DSP处理数字信号做什么用的？
  • Unsafe.putOrderedInt与Volatile
  • 驱动灯珠芯片LT3743手册理解
  • phpmyadmin
  • RTOS：启动调度器的作用（含源码逐行解读）
  • 微信小店推客系统达人用户管理的数据支持和便利
  • 【仿生机器人】Alice计划——仿生机器人需求
  • ABB HIEE300690R0001 AR C093 AE01 励磁调节器 PCB板特价
  • 第六十一节：深度学习-使用 OpenCV DNN 模块
  • 江科大SPI串行外设接口hal库实现
  • Linux 1.0.4
  • [硬件选型篇] 一文解决常用5V转3.3V电路选型困难（包括各选型的优缺点、纹波、效率等）
  • DAY 15 复习日
  • SpringBoot整合Flowable【08】- 前后端如何交互
  • jq处理日志数据
  • 局域网/内网IP地址配置HTTPS证书全流程指南
  • TypeScript 中高级类型 keyof 与 typeof的场景剖析。
  • [STM32问题解决（2）]STM32通过串口与PC通信，打开串口助手后无法在打开状态下下载程序和复位STM32
  • 抢占先机！品牌如何利用软文营销领跑内容营销赛道？
  • 【笔记】Windows 系统安装 Supabase CLI 完整指南（基于 Scoop）
  • 未来技术展望
  • jmeter：登录接口的token用于下一个接口
  • Co-IP—验证蛋白互作的不二之选