threejs实现一个三维户外山上滑雪运动游戏代码

代码语言:html

所属分类:游戏

代码描述:threejs实现一个三维户外山上滑雪运动游戏代码,键盘左右键操作方向避开石头和树木。

代码标签: three 三维 户外 滑雪 游戏

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css?family=Ranchers');

html, body {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
    overflow: hidden;
    font-family: 'Ranchers', sans-serif;
}

body {
    background-image: url('//repo.bfw.wiki/bfwrepo/images/ski/snowmountain.jpg');
    background-size: cover;
    background-position: center;
}

canvas {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

div {
    user-select: none;
}

.label-death {
    display: none;
    z-index: 10;
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 10rem;
    color: white;

    &.active {
        display: block;
    }
}

.label-death-bg {
    content: " ";
    z-index: 9;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 20rem;
    transform: translate(-50%, -50%);
    transition: all 2s ease;
    background-color: black;
    opacity: 0.7;

    &.active {
        top: 50%;
        width: 100%;
        height: 100%;
    }
}

.label-score {
    z-index: 10;
    position: absolute;
    left: 5vw;
    bottom: 5vh;
    font-size: 10rem;
    transition: all 500ms ease;
    color: black;

    &.stopped {
        top: 50%;
        left: 50%;
        bottom: auto;
        font-size: 15rem;
        transform: translate(-50%, -50%);
        color: white;
    }
}

.label-restart {
    display: none;
    z-index: 100;
    position: absolute;
    padding: 1rem 2rem;
    top: 75%;
    left: 50%;
    width: 100%;
    text-align: center;
    font-size: 5rem;
    color: white;
    transform: translate(-50%, -50%);

    &.active {
        display: block;
    }
}
</style>


</head>

<body >
  <div class="label-death">REKT</div>
<div class="label-death-bg"></div>
<div class="label-score"></div>
<div class="label-restart">PRESS ENTER TO PLAY AGAIN</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/mountain.plugins.js"></script>
      <script >
class World {
  constructor(wnd) {
    this.window = wnd;
    this.clock = new THR.........完整代码请登录后点击上方下载按钮下载查看

网友评论0