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

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

article 2025/9/12 21:53:02

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.lryc.cn/news/2397530.html

相关文章：

  • 华为OD机试真题——书籍叠放（2025B卷：200分）Java/python/JavaScript/C/C++/GO最佳实现
  • PyTorch-Transforms的使用(二)
  • Pytorch知识点2
  • Java详解LeetCode 热题 100(23):LeetCode 206. 反转链表（Reverse Linked List）详解
  • StarRocks部署方案详解：从单机到分布式集群
  • AWS API Gateway 配置WAF（中国区）
  • 【前端面经】百度一面
  • 嵌入式学习笔记 - freeRTOS 动态创建任务跟静态创建任务的区别，以及内存回收问题
  • [免费]微信小程序网上花店系统(SpringBoot后端+Vue管理端)【论文+源码+SQL脚本】
  • 如何给老旧 iOS App 添加安全保护？用 Ipa Guard 对 IPA 文件混淆加固实录
  • C#语音录制：使用NAudio库实现语音录制功能详解
  • [蓝桥杯]缩位求和
  • MySQ-8.42 MGR 组复制部署及详解
  • css使用scoped之后样式失效问题
  • 【NLP】将 LangChain 与模型上下文协议 (MCP) 结合使用
  • 使用NMEA Tools生成GPS轨迹图
  • 1. pytorch手写数字预测
  • vs中添加三方库的流程
  • JAVASE面相对象进阶之static
  • 深入解析 Redis Cluster 架构与实现（一）
  • （12）java+ selenium-＞元素定位大法之By_link_text
  • 数据库MySQL集群MGR
  • Ubuntu22.04 安装 ROS2 Humble
  • Spring Boot，注解，@RestController
  • C++中新式类型转换static_cast、const_cast、dynamic_cast、reinterpret_cast
  • AXI 协议补充（二）
  • Linux 基础指令入门指南：解锁命令行的实用密码
  • 标准精读：2025 《可信数据空间 技术架构》【附全文阅读】
  • 山东大学软件学院项目实训-基于大模型的模拟面试系统-面试官和面试记录的分享功能（2）
  • Webug4.0靶场通关笔记05- 第5关SQL注入之过滤关键字