年会游戏：猜数字（前端特效）
发布于: 2021 年 01 月 25 日
录制了一个 gif(录制的时候没调好帧数，所以 gif 看上去会有点卡)
这个小游戏都是用原生写的，没有引入什么框架和库。因为需要直接双击即可在浏览器打开，不需要配置过多的环境就能使用。
思路：
通过点击整个窗口(
<html>)，生成随机数。遇到素数就生成一个
span标签，并随机从设定好的一组颜色中获取其中一个颜色赋予给span的字体色。给
span设置translate，让span缓缓飞走。动画结束后，删除对应的
span标签。再次点击窗口(
<html>)后，停止随机数。
实现方法如下代码所示（请认真看代码的注释）。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, body { width: 100%; height: 100%; padding: 0; margin: 0; } body { background-image: linear-gradient(to top, #09203f 0%, #537895 100%); color: #d7dbdd; cursor: pointer; overflow: hidden; } .random-x { position: fixed; left: 50%; top: 40%; font-size: 300px; transform: translate(-50%, -50%); transition: 1s ease-in, opacity 0.7s ease-in 0.3s; } </style></head><body> <div class="random-x special" id="numberBox">0</div>
<script>
var timer = null // 定时器 var colors = [ // 一系列颜色 '#4a89dc', '#37bc9b', '#f6bb42', '#da4453', '#967adc', '#fc6e51', '#d770ad', '#f9a620', '#e9573f', '#8cc152', '#3bafda', '#ed6a5a', '#48cfad', '#ed5565', '#2b6aa6', '#beeee2' ]
// 生成随机数 function getRandom(min, max) { return Math.floor(Math.random() * (max - min)) + min; }
// 判断素数 function isPrime(number) { //素数：只能被1和自身整数 //小于2的数字，一定不是素数 if (number < 2) { return false; } //说明：从 2 到 number-1 之间，如果找到有一个数能整数number，则number 不是素数 for (var i = 2; i <= number - 1; i++) { if (number % i === 0) { //发现2到number-1之间，有一个数字能整除number，number不是素数 return false; } } //循环结束了，此时还没有返回，说明，没有找到能整除number的数字 return true; }
// 生成数字 function createNumber() { // 设置随机数范围 var number = getRandom(1, 100) numberBox.innerHTML = number
if (isPrime(number)) {
// 生成随机色（转换成十六进制）。要么使用这行生成随机颜色，要么使用下一行获取已经设置好的颜色列表的其中一个颜色。 // var color = `#${getRandom(0, 255).toString(16)}${getRandom(0, 255).toString(16)}${getRandom(0, 255).toString(16)}`
// 在颜色表里随机选一个颜色 var index = getRandom(0, colors.length) var color = colors[index]
// 在中间新建一个div，然后让它飘动 var center = document.createElement("div"); center.className = "random-x"; center.innerText = number; center.style.color = color; document.body.appendChild(center); // 用定时器，等待元素加入到页面，让浏览器把元素渲染出来，然后再更改样式，这样才能触发动画 setTimeout(function () { // 设置transform: translate(n, n) center.style.transform = `translate(${getRandom(-600, 600)}px, ${getRandom(-600, 600)}px)` center.style.fontSize = '30px' // 设置opacity：0 center.style.opacity = 0; }, 80);
// 动画结束后，移除新增的div center.addEventListener("transitionend", function () { // 动画结束后运行的事件 center.remove(); // 移除 }) } }
// 运行 function handleRun() { clearInterval(timer) timer = setInterval(createNumber, 80) }
// 停止 function handleStop() { clearInterval(timer) timer = null } window.onclick = function() { if (timer) { handleStop() } else { handleRun() } } </script></body></html>复制代码
划线
评论
复制
发布于: 2021 年 01 月 25 日阅读数: 24
学习委员
关注
反派 2019.03.19 加入
哈哈哈哈哈哈哈哈哈哈哈哈哈哈
评论