PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码-html代码-BFW代码库

PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码

代码语言：html

所属分类：动画

代码描述：PIXI实现游轮轮船在夜色当空大雾中的海上行驶冒烟动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #04091c;
}
</style>




</head>

<body  >
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/pixi.5.1.5.js"></script>   <script >
const loader = new PIXI.Loader();

loader.add(
  "backgroundTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca9014f070d.png"
);
loader.add(
  "waveTexture1",
  "//repo.bfw.wiki/bfwrepo/image/60ca902f983aa.png"
);
loader.add(
  "waveTexture2",
  "//repo.bfw.wiki/bfwrepo/image/60ca903f449c5.png"
);
loader.add(
  "waveTexture3",
  "//repo.bfw.wiki/bfwrepo/image/60ca9049e392c.png"
);
loader.add(
  "shipTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca90605cbe3.png"
);
loader.add(
  "smokeParticleTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca9072369c5.png"
);
loader.add(
  "mistTexture",
  "//repo.bfw.wiki/bfwrepo/image/60ca908ea75f7.png"
);

const { innerWidth, innerHeight } = window;

const resolution = window.devicePixelRatio || 1;
const m = 1 / resolution;

const w = innerWidth * m;
const h = innerHeight * m;

const app = new PIXI.Application({
  width: w,
  height: h,
  antialias: true,
  backgroundColor: 0x04091c,
  resolution
});
document.body.appendChild(app.view);

const { sin, cos, atan2, PI } = Math;
const tau = 2 * PI;
const waveStart = -100;
const waveEnd = 2100;
const waveHeight = 10;
const waveWidth = 2.5 * tau;
const rad = (deg) => (deg / 180) * Math.PI;
const range = (n, m = 0) =>
  Array(n)
    .fill(m)
    .map((i, j) => i + j);
const map = (value, sMin, sMax, dMin, dMax) => {
  return dMin + ((value - sMin) / (sMax - sMin)) * (dMax - dMin);
};
const rand = (max, min = 0) => min + Math.random() * (max - min);
const polar = (ang, r = 1, [x = 0, .........完整代码请登录后点击上方下载按钮下载查看