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: .........完整代码请登录后点击上方下载按钮下载查看