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) => { const lane = new Lane(index); lane.mesh.position.y = index*positionWidth*zoom; scene.add( lane.mesh ); return lane; }).filter((lane) => lane.index >= 0); const addLane = () => { const index = lanes.length; const lane = new Lane(index); lane.mesh.position.y = index*positionWidth*zoom; scene.add(lane.mesh); lanes.push(lane); } const chicken = new Chicken(); scene.add( chicken ); const laneTypes = ['car', 'truck', 'forest']; const laneSpeeds = [2, 2.5, 3]; const vechicleColors = [0xa52523, 0xbdb638, 0x78b14b]; const threeHeights = [20,45,60]; const initaliseValues = () => { lanes = generateLanes() currentLane = 0; currentColumn = Math.floor(columns/2); previousTimestamp = null; startMoving = false; moves = []; stepStartTimestamp; chicken.position.x = 0; chicken.position.y = 0; camera.position.y = initialCameraPositionY; camera.position.x = initialCameraPositionX; } initaliseValues(); const renderer = new THREE.WebGLRenderer({ alpha: true, antialias: true }); renderer.shadowMap.enabled = true; renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); hemiLight = new THREE.HemisphereLight(0xffffff, 0xffffff, 0.6); scene.add(hemiLight) dirLight = new THREE.DirectionalLight(0xffffff, 0.6); dirLight.position.set(-100, -100, 200); dirLight.castShadow = true; scene.add(dirLight); dirLight.shadow.mapSize.width = 2048; dirLight.shadow.mapSize.height = 2048; var d = 500; dirLight.shadow.camera.left = - d; dirLight.shadow.camera.right = d; dirLight.shadow.camera.top = d; dirLight.shadow.camera.bottom = - d; // var helper = new THREE.CameraHelper( dirLight.shadow.camera ); // var helper = new THREE.CameraHelper( camera ); // scene.add(helper) backLight = new THREE.DirectionalLight(0x000000, .4); backLight.position.set(200, 200, 50); backLight.castShadow = true; scene.add(backLight) function Texture(width, height, rects) { const canvas = document.createElement( "canvas" ); canvas.width = width; canvas.height = height; const context = canvas.getContext( "2d" ); context.fillStyle = "#ffffff"; context.fillRect( 0, 0, width, height ); context.fillStyle = "rgba(0,0,0,0.6)"; rects.forEach(rect => { context.fillRect(rect.x, rect.y, rect.w, rect.h); }); return new THREE.CanvasTexture(canvas); } function Wheel() { const wheel = new THREE.Mesh( new THREE.BoxBufferGeometry( 12*zoom, 33*zoom, 12*zoom ), new THREE.MeshLambertMaterial( { color: 0x333333, flatShading: true } ) ); wheel.position.z = 6*zoom; return wheel; } function Car() { const car = new THREE.Group(); const color = vechicleColors[Math.floor(Math.random() * vechicleColors.length)]; const main = new THREE.Mesh( new THREE.BoxBufferGeometry( 60*zoom, 30*zoom, 15*zoom ), new THREE.MeshPhongMaterial( { color, flatShading: true } ) ); main.position.z = 12*zoom; main.castShadow = true; main.receiveShadow = true; car.add(main) const cabin = new THREE.Mesh( new THREE.BoxBufferGeometry( 33*zoom, 24*zoom, 12*zoom ), [ new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carBackTexture } ), new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carFrontTexture } ), new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carRightSideTexture } ), new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true, map: carLeftSideTexture } ), new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ), // top new THREE.MeshPhongMaterial( { color: 0xcccccc, flatShading: true } ) // bottom ] .........完整代码请登录后点击上方下载按钮下载查看
网友评论0