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

three实现滑冰躲避障碍物游戏代码

代码语言：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=&quo.........完整代码请登录后点击上方下载按钮下载查看