three实现滑冰躲避障碍物游戏代码-html代码-BFW代码库

代码语言：html
所属分类：游戏
代码描述：three实现滑冰躲避障碍物游戏代码，键盘左右键控制方向。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">

<style>
    @import url("https://fonts.googleapis.com/css?family=VT323");
*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  font-family: "VT323", monospace;
}

.footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 10px 10px;
  text-align: right;
  font-family: "Roboto", sans-serif;
  font-size: 12px;
}
.footer.v-dark {
  background-color: #343436;
  color: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.footer.v-light {
  background-color: #fff;
  color: #343436;
}

.footer-anchor {
  display: inline-block;
  margin-left: 5px;
  padding: 2px 4px;
  color: #343436;
  text-decoration: none;
  background-color: #fcd000;
  border-radius: 4px;
  opacity: 1;
  transition: opacity 0.2s;
}
.footer-anchor:hover {
  opacity: 0.6;
}

#three-container {
  position: absolute;
  left: 0;
  top: 0;
}

#ui-container {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.flex-container {
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.button {
  position: relative;
  font-size: 80px;
  padding: 12px;
  background: black;
  color: #e9f259;
  cursor: pointer;
}

.button:hover {
  box-shadow: #d46ce7 10px 10px 0 0;
}

.title {
  font-size: 80px;
  line-height: 1;
  margin-bottom: 40px;
}

.score {
  font-size: 40px;
  line-height: 1;
  margin-bottom: 56px;
}

.score-display {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  /*color: #89aee1;*/
  color: black;
  font-size: 120px;
  text-align: center;
}

.life-display {
  position: absolute;
  left: 12px;
  top: 12px;
}

.live-item {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin-right: 12px;
  background-image: url("//repo.bfw.wiki/bfwrepo/images/huaban/heart.png");
  background-size: contain;
}

.live-item.depleted {
  opacity: 0.25;
}
</style>
</head>
<body>


<div id="three-container"></div>
<div id="ui-container"></div>
<!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.87.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bas.2.0.2.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.min.js"></script>
<script >
    function THREERoot(params) {
  // defaults
  params = Object.assign({
    container: '#three-container',
    fov: 60,
    zNear: 1,
    zFar: 10000,
    createCameraControls: true,
    autoStart: true,
    pixelRatio: window.devicePixelRatio,
    antialias: window.devicePixelRatio === 1,
    alpha: false },
  params);

  // maps and arrays
  this.updateCallbacks = [];
  this.resizeCallbacks = [];
  this.objects = {};

  // renderer
  this.renderer = new THREE.WebGLRenderer({
    antialias: params.antialias,
    alpha: params.alpha });

  this.renderer.setPixelRatio(params.pixelRatio);

  // container
  this.container = typeof params.container === 'string' ? document.querySelector(params.container) : params.container;
  this.container.appendChild(this.renderer.domElement);

  // camera
  this.camera = new THREE.PerspectiveCamera(
  params.fov,
  window.innerWidth / window.innerHeight,
  params.zNear,
  params.zFar);


  // scene
  this.scene = new THREE.Scene();

  // resize handling
  this.resize = this.resize.bind(this);
  this.resize();
  window.addEventListener('resize', this.resize, false);

  // tick / update / render
  this.tick = this.tick.bind(this);
  params.autoStart && this.tick();

  // optional camera controls
  params.createCameraControls && this.createOrbitControls();
}
THREERoot.prototype = {
  createOrbitControls: function () {
    this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
    this.addUpdateCallback(this.controls.update.bind(this.controls));
  },
  start: function () {
    this.tick();
  },
  addUpdateCallback: function (callback) {
    this.updateCallbacks.push(callback);
  },
  addResizeCallback: function (callback) {
    this.resizeCallbacks.push(callback);
  },
  add: function (object, key) {
    key && (this.objects[key] = object);
    this.scene.add(object);
  },
  addTo: function (object, parentKey, key) {
    key && (this.objects[key] = object);
    this.get(parentKey).add(object);
  },
  get: function (key) {
    return this.objects[key];
  },
  remove: function (o) {
    var object;

    if (typeof o === 'string') {
      object = this.objects[o];
    } else
    {
      object = o;
    }

    if (object) {
      object.parent.remove(object);
      delete this.objects[o];
    }
  },
  tick: function () {
    this.update();
    this.render();
    requestAnimationFrame(this.tick);
  },
  update: function () {
    this.updateCallbacks.forEach(function (callback) {callback();});
  },
  render: function () {
    this.renderer.render(this.scene, this.camera);
  },
  resize: function () {
    var width = window.innerWidth;
    var height = window.innerHeight;

    this.camera.aspect = width / height;
    this.camera.updateProjectionMatrix();

    this.renderer.setSize(width, height);
    this.resizeCallbacks.forEach(function (callback) {callback();});
  },
  initPostProcessing: function (passes) {
    var size = this.renderer.getSize();
    var pixelRatio = this.renderer.getPixelRatio();
    size.width *= pixelRatio;
    size.height *= pixelRatio;

    var composer = this.composer = new THREE.EffectComposer(this.renderer, new THREE.WebGLRenderTarget(size.width, size.height, {
      minFilter: THREE.LinearFilter,
      magFilter: THREE.LinearFilter,
      format: THREE.RGBAFormat,
      stencilBuffer: false }));


    var renderPass = new THREE.RenderPass(this.scene, this.camera);
    this.composer.addPass(renderPass);

    for (var i = 0; i < passes.length; i++) {
      var pass = passes[i];
      pass.renderToScreen = i === passes.length - 1;
      this.composer.addPass(pass);
    }

    this.renderer.autoClear = false;
    this.render = function () {
      this.renderer.clear();
      this.composer.render();
    }.bind(this);

    this.addResizeCallback(function () {
      var width = window.innerWidth;
      var height = window.innerHeight;

      composer.setSize(width * pixelRatio, height * pixelRatio);
    }.bind(this));
  } };

7;
</script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/TweenMax.min.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/howler.2.2.3.js"></script><script  >
    
    function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}const GLOBAL = {
  rootURL: '//repo.bfw.wiki/bfwrepo/images/huaban/',

  colors: {
    yellow: '#e9f259',
    pink: '#d46ce7' },


  sounds: {
    bgm: 'szenia_codepen_tune2.mp3',
    score: 'smw_coin.wav',
    hit: 'smw_thud.wav' },


  textures: {
    surfer: 'internet_boy.png',

    good: [
    'apple.png',
    'clippy.png',
    'mtv.png',
    'netscape.png',
    'pokeball.png',
    'wordart.png'],


    bad: [
    'blinky.png',
    'goomba.png'] },


  anisotropy: 1,

  gameSpeed: 1.0 };


// utils

const utils = {
  getRandom(array) {
    return array[Math.random() * array.length | 0];
  } };


// Wave

class Wave extends THREE.Mesh {
  constructor(params) {
    const textureSize = 64;

    const textureCanvas = document.createElement('canvas');
    textureCanvas.width = textureCanvas.height = textureSize;

    const textureCtx = textureCanvas.getContext('2d');
    textureCtx.fillStyle = GLOBAL.colors.yellow;
    textureCtx.fillRect(0, 0, textureSize, textureSize);
    textureCtx.lineWidth = 8;
    textureCtx.strokeStyle = GLOBAL.colors.pink;
    textureCtx.strokeRect(0, 0, textureSize, textureSize);

    const texture = new THR.........完整代码请登录后点击上方下载按钮下载查看