three实现三维路上过马路避让汽车游戏代码-html代码-BFW代码库

three实现三维路上过马路避让汽车游戏代码

代码语言：html

所属分类：游戏

代码描述：three实现三维路上过马路避让汽车游戏代码

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

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

<head>
    <meta charset="UTF-8">

    <style>
        @import url('css.css');
    
    body {
      margin: 0;
      font-family: 'Press Start 2P', cursive;
      font-size: 2em;
      color: white;
    }
    button {
      outline: none;
      cursor: pointer;
    }
    #counter {
      position: absolute;
      top: 20px;
      right: 20px;
    }
    #end {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      visibility: hidden;
    }
    #end button {
      background-color: red;
      padding: 20px 50px 20px 50px;
      font-family: inherit;
      font-size: inherit;
    }
    #controlls {
      position: absolute;
      min-width: 100%;
      min-height: 100%;
      display: flex;
      align-items: flex-end;
      justify-content: center;
    }
    #controlls div {
      margin-bottom: 20px;
      font-size: 0;
      max-width: 180px;
    }
    #controlls button {
      width: 50px;
      font-family: inherit;
      font-size: 30px;
      border: 3px solid white;
      color: white;
      background-color: transparent;
      margin: 5px;
    }
    #controlls button:first-of-type {
      width: 170px;
    }
    </style>
</head>

<body>
    <div id="counter">0</div>
    <div id="controlls">
        <div>
            <button id="forward">↑</button>
            <button id="left">←</button>
            <button id="backward">↓</button>
            <button id="right">→</button>
        </div>
    </div>
    <div id="end">
        <button id="retry">Retry</button>
    </div>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.92.js"></script>
    <script>
        const counterDOM = document.getElementById('counter');  
const endDOM = document.getElementById('end');  

const scene = new THREE.Scene();

const distance = 500;
const camera = new THREE.OrthographicCamera( window.innerWidth/-2, window.innerWidth/2, window.innerHeight / 2, window.innerHeight / -2, 0.1, 10000 );

camera.rotation.x = 50*Math.PI/180;
camera.rotation.y = 20*Math.PI/180;
camera.rotation.z = 10*Math.PI/180;

const initialCameraPositionY = -Math.tan(camera.rotation.x)*distance;
const initialCameraPositionX = Math.tan(camera.rotation.y)*Math.sqrt(distance**2 + initialCameraPositionY**2);
camera.position.y = initialCameraPositionY;
camera.position.x = initialCameraPositionX;
camera.position.z = distance;

const zoom = 2;

const chickenSize = 15;

const positionWidth = 42;
const columns = 17;
const boardWidth = positionWidth*columns;

const stepTime = 200; // Miliseconds it takes for the chicken to take a step forward, backward, left or right

let lanes;
let currentLane;
let currentColumn;

let previousTimestamp;
let startMoving;
let moves;
let stepStartTimestamp;

const carFrontTexture = new Texture(40,80,[{x: 0, y: 10, w: 30, h: 60 }]);
const carBackTexture = new Texture(40,80,[{x: 10, y: 10, w: 30, h: 60 }]);
const carRightSideTexture = new Texture(110,40,[{x: 10, y: 0, w: 50, h: 30 }, {x: 70, y: 0, w: 30, h: 30 }]);
const carLeftSideTexture = new Texture(110,40,[{x: 10, y: 10, w: 50, h: 30 }, {x: 70, y: 10, w: 30, h: 30 }]);

const truckFrontTexture = new Texture(30,30,[{x: 15, y: 0, w: 10, h: 30 }]);
const truckRightSideTexture = new Texture(25,30,[{x: 0, y: 15, w: 10, h: 10 }]);
const truckLeftSideTexture = new Texture(25,30,[{x: 0, y: 5, w: 10, h: 10 }]);

const generateLanes = () => [-9,-8,-7,-6,-5,-4,-3,-2,-1,0,1,2,3,4,5,6,7,8,9].map((index) => {
 .........完整代码请登录后点击上方下载按钮下载查看