海底世界鱼群效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body {
width: 100vw;
height: 100vh;
background-color: black;
overflow: hidden;
margin: 0;
padding: 0;
background:url(http://repo.bfw.wiki/bfwrepo/image/5e4c71cd307e7.png);/*https://www.wuwm.com/post/poem-underwater-unsettlement#stream/0 */
background-size:cover;
background-repeat:no-repeat;
}
#tank {
width:100%;
height:100%;
}
.school {
position:absolute;
top:50%;
left:50%;
}
.fish {
will-change:left,top;
position:absolute;
}
</style>
</head>
<body translate="no">
<p id="controls"></p>
<div id="tank"></div>
<script type="text/javascript" src="http://repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
<script >
var myoptions, gui;
var fishes = ["🐟", "🐠", "🐡"]
var tank = document.getElementById("tank")
var WINDOW_MIN;
var MIN_THRESHOLD = 640
window.onload = ()=>{
generateControls()
initializeTank()
}
window.addEventListener("resize", () => {
initializeTank()
})
/*Fish functions*/
function initializeTank() {
WINDOW_MIN = Math.min(tank.clientHeight, tank.clientWidth)
generateFishTank()
if(WINDOW_MIN<=MIN_THRESHOLD) {
gui.close()
} else {
gui.open()
}
}
function generateFishTank() {
tank.innerHTML = ""
for (let i = 0; i < myoptions.NumFishGroups; i++) {
let numFish = 1
if (!myoptions.SingleFishOnly && (Math.random() * 100) > (100 - myoptions.PercentSchools)) {
numFish = getRandomInt(1, myoptions.MaxPerSchool)
}
let hueShift = myoptions.ColorChanging ? getRandomInt(0, 360) : 0
let school = generateSchool(numFish, pick(fishes), hueShift)
tank.appendChild(school)
loop(school)
}
}
function generateSchool(numFish, icon, hueShift) {
let maxFishSize = WINDOW_MIN < MIN_THRESHOLD ? 50 : 100
let root = document.createElement("div");
root.setAttribute("class", "school")
root.style.width = `${getRandomFloat(100,1000)}px`
root.style.height = `${getRandomFloat(100,700)}px`
root.style.left = `${getRandomFloat(0,100)}%`
root.style.top = `${getRandomFloat(0,100)}%`
for (let i = 0; i < numFish; i++) {
let fishPos = [getRandomFloat(0, 100), getRandomFloat(0, 100)]
let size = getRandomInt(10, maxFishSize)
let fish = generateFish(fishPos, hueShift, size, icon)
root.appendChild(fish);
}
return root
}
function loop(school) {
var timeout = school.getAttribute('data-timeout')
clearTimeout(timeout)
let minInterval = myoptions.SwimSpeed == "Slow" ? 10000 : myoptions.SwimSpeed == "Mo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0