three+hammer实现三维蜜蜂飞行金币游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three+hammer实现三维蜜蜂飞行金币游戏代码，拖动鼠标来操控蜜蜂飞行获取更多的金币。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
@import url("https://fonts.googleapis.com/css?family=Kanit:800|Mr+Dafoe");
html {
  box-sizing: border-box;
  color: #222;
  font-size: 1.6rem;
  font-family: Helvetica, Arial, sans-serif;
  font-weight: normal;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *:before, *:after {
  box-sizing: inherit;
}

* {
  margin: 0;
  padding: 0;
  overflow: hidden "";
}

#world {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: linear-gradient(to bottom, #94c5f8 0%, #a6e6ff 10%, #b1b5ea 20%, #fa709a 30%, #fee140 40%, #FF1361 50%, #44107A 60%, #231557 70%, #0250c5 80%, #d43f8d 100%);
  background-repeat: repeat-y;
  background-size: 100% 1000%;
  background-position: 0 0;
  transition: background 6000ms ease-in-out;
}
#world.yellow {
  background-position: 0 20%;
}
#world.red {
  background-position: 0 40%;
}
#world.black {
  background-position: 0 60%;
}
#world.blue {
  background-position: 0 80%;
}

.txt {
  position: absolute;
  color: #a96fa0;
  font-family: sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}
.txt .header {
  text-align: center;
}
.txt .header-sub {
  opacity: 0.4;
}
.txt .title, .txt h1 {
  color: #5fd1b4;
  font-family: "Kanit", Helvetica, Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.7;
  text-transform: uppercase;
  position: relative;
  margin: 0.2em;
  font-size: 2.5rem;
  text-shadow: 0.02em 0.02em 0.02em rgba(0, 0, 0, 0.08);
  filter: drop-shadow(0.045em 0.045em 0.04em rgba(0, 0, 0, 0.21));
}
.txt .title-sub {
  color: #fff;
  font: 200 0.45em/1 "Mr Dafoe", serif;
  text-transform: none;
  letter-spacing: 0.02em;
  text-shadow: 0.02em 0.02em 0.02em rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1rem;
  transform: translate(-50%, -50%) rotate(-5deg);
}
.txt .subhead {
  color: inherit;
  font-weight: bold;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.3rem;
}
.txt h1 {
  font-size: 1rem;
}
</style>




</head>


  <body id="js-touch">
    <div id="world"></div>
    <div class="txt">
      <header class="header">
        <h1 class="title">
          Wizbii
          <div class="title-sub"></div>
        </h1>
        <div class="header-sub subhead"></div>
      </header>
      <h1>Score : <span id="js-score"></span></h1>
    </div>


<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/hammer.min.js"></script>
      <script >
const colors = {
  green: 0x2bca2b,
  black: 0x333359,
  white: 0xd8d0d1,
  pink: 0xf5986e,
  blue: 0x68c3c0,
  grey: 0x5f5f5f,
  yellow: 0xe7af11 };


let mousePos = {
  x: 0,
  y: 0 };


let scene, fieldOfView, aspectRatio, renderer, from, to, camera, container;

let bee, sea, earth;

let HEIGHT, WIDTH;

let coins = [];

let bombs = [];

let score = 0;

let level = 0;

let dead = false;

let speedFactor = 0;

const target = new THREE.Vector3();

let ambientLight, hemisphereLight, shadowLight;

window.addEventListener('load', init, false);

function init() {
  createScene();
  createLights();
  createBee();
  createCoin();
  createEarth();
  createSea();
  document.addEventListener('mousemove', handleMouseMove, false);
  loop();
}

// Handle touch/mobile
const myElement = document.getElementById('js-touch');
const mc = new Hammer(myElement);
mc.get('pan').set({ direction: Hammer.DIRECTION_ALL });
mc.on("panleft panright panup pandown tap press", function (ev) {
  const tx = -1 + ev.center.x / WIDTH * 2;
  const ty = 1 - ev.center.y / HEIGHT * 2;

  mousePos = {
    x: tx,
    y: ty };

});

function createScene() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  scene = new THREE.Scene();
  aspectRatio = WIDTH / HEIGHT;
  fieldOfView = 55;
  from = 1;
  to = 10000;

  camera = new THREE.PerspectiveCamera(fieldOfView, aspectRatio, from, to);

  scene.fog = new THREE.Fog(colors.grey, 100, 1000);

  camera.position.x = 0;
  camera.position.z = 220;
  camera.position.y = 150;
  camera.rotation.x = -Math.PI / 6;

  renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true });
  renderer.setSize(WIDTH, HEIGHT);
  renderer.shadowMap.enabled = true;

  container = document.getElementById('world');
  container.appendChild(renderer.domElement);

  renderer.render(scene, camera);
  window.addEventListener('resize', handleWindowResize, false);
}

function createLights() {
  hemisphereLight = new THREE.HemisphereLight(0xaaaaaa, 0x000000, 0.9);

  shadowLight = new THREE.DirectionalLight(0xffffff, 0.6);
  shadowLight.position.set(150, 490, 350);
  shadowLight.castShadow = true;
  shadowLight.shadow.camera.left = -400;
  shadowLight.shadow.camera.right = 400;
  shadowLight.shadow.camera.top = 400;
  shadowLight.shadow.camera.bottom = -400;
  shadowLight.shadow.camera.near = 1;
  shadowLight.shadow.camera.far = 1000;
  shadowLight.shadow.mapSize.width = 2048;
  shadowLight.shadow.mapSize.height = 2048;

  ambientLight = new THREE.AmbientLight(0xff8d8d, 0.9);

  scene.add(ambientLight);
  scene.add(hemisphereLight);
  scene.add(shadowLight);
}

function createCoin(nb = 100, patternFactor = 2) {
  let i = 0;
  for (i; i < nb; i++) {
    coins[i] = new Coin(i, patternFactor);
    scene.add(coins[i].mesh);
  }
}

function createBomb(nb) {
  for (let i = 0; i < nb; i++) {
    bombs[i] = new Bomb();
    scene.add(bombs[i].mesh);
  }
}

function createBee() {
  bee = new Bee();
  bee.mesh.scale.set(0.25, 0.25, 0.25);
  bee.mesh.position.y = 0;
  bee.mesh.position.z = 0;
  scene.add(bee.mesh);
}

function createEarth() {
  earth = new Earth();
  earth.moveHills();
  scene.add(earth.mesh);
}

function createSea() {
  sea = new Sea();
  scene.add(sea.mesh);
}

// =============================
// ========= UTILITIES =========
// =============================
function handleWindowResize() {
  HEIGHT = window.innerHeight;
  WIDTH = window.innerWidth;

  renderer.setSize(WIDTH, HEIGHT);

  camera.aspect = WIDTH / HEIGHT;
  camera.updateProjectionMatrix();
}

function handleMouseMove(event) {
  const tx = -1 + event.clientX / WIDTH * 2;
  const ty = 1 - event.clientY / HEIGHT * 2;

  mousePos = {
    x: tx,
    y: ty };

}

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min;
}

// NORMALIZER
function normalize(v, vmin, vmax, tmin, tmax) {
  const nv = Math.max(Math.min(v, vmax), vmin);
  const dv = vmax - vmin;
  const pc = (nv - vmin) / dv;
  const dt = tmax - tmin;
  const tv = tmin + pc * dt;
  return tv;
}

// =============================
// ============ BEE ============
// =============================
let Bee = function () {
  this.mesh = new THREE.Object3D();

  // HEAD
  const geomHead = new THREE.SphereGeometry(55, 32, 32);
  const matHead = new THREE.MeshPhongMaterial({
    color: colors.black,
    flatShading: THREE.FlatShading });


  this.head = new THREE.Mesh(geomHead, matHead);
  this.head.castShadow = true;
  this.head.receiveShadow = true;
  this.head.position.z -= 130;
  this.head.position.y -= 10;
  this.mesh.add(this.head);

  // BODY1
  const geomBody1 = new THREE.SphereGeometry(65, 32, 32);
  const matBody1 = new THREE.MeshPhongMaterial({
    color: colors.yellow,
    flatShading: THREE.FlatShading });


  this.body1 = new THREE.Mesh(geomBody1, matBody1);
  this.body1.castShadow = true;
  this.body1.receiveShadow = true;
  this.body1.position.z = -100;
  this.mesh.add(this.body1);

  // BODY2
  const geomBody2 = new THREE.SphereGeometry(70, 32, 32);
  const matBody2 = new THREE.MeshPhongMaterial({
    color: colors.black,
    flatShading: THREE.FlatShading });


  this.body2 = new THREE.Mesh(geomBody2, matBody2);
  this.body2.castShadow = true;
  this.body2.receiveShadow = true;
  this.body2.position.z -= 70;
  this.mesh.add(this.body2);

  // BODYWING
  const geomBodyWing = new THREE.SphereGeometry(30, 32, 32);
  const matBodyWing = new THREE.MeshPhongMaterial({
    color: colors.black,
    flatShading: THREE.FlatShading });


  this.bodyWing = new THREE.Mesh(geomBodyWing, matBodyWing);
  this.bodyWing.castShadow = true;
  this.bodyWing.receiveShadow = true;
  this.bodyWing.position.z -= 70;
  this.bodyWing.position.y += 50;
  this.mesh.add(this.bodyWing);

  // BODY3
  const geomBody3 = new THREE.SphereGeometry(65, 32, 32);
  const matBody3 = new THREE.MeshPhongMaterial({
    color: colors.yellow,
    flatShading: THREE.FlatShading });


  this.body3 = new THREE.Mesh(geomBody3, matBody3);
  this.body3.castShadow = true;
  this.body3.receiveShadow = true;
  this.body3.position.z -= 40;
  this.mesh.add(this.body3);

  // TAIL
  const geomTail = new THREE.SphereGeometry(45, 32, 32);
  const matTail = new THREE.MeshPhongMaterial({
    color: colors.black,
    flatShading: THREE.FlatShading });


  this.tail = new THREE.Mesh(geomTail, matTail);
  this.tail.castShadow = true;
  this.tail.receiveShadow = true;
  this.tail.position.z = 0;
  this.head.position.y -= 10;
  this.mesh.add(this.tail);

  // WINGS
  const geomWing = new THREE.Geomet.........完整代码请登录后点击上方下载按钮下载查看