threejs实现一个三维户外山上滑雪运动游戏代码
代码语言:html
所属分类:游戏
代码描述:threejs实现一个三维户外山上滑雪运动游戏代码,键盘左右键操作方向避开石头和树木。
下面为部分代码预览,完整代码请点击下载或在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