three+physicsjs实现一款三维小球避障小游戏代码
代码语言:html
所属分类:游戏
代码描述:three+physicsjs实现一款三维小球避障小游戏代码
代码标签: three physicsjs 三维 小球 避障 小游戏
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body {width: 100%; hight: 100%;} canvas {width: 100%; hight: 100%;} </style> </head> <body > <div id="TutContainer"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.96.js"></script> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/physicsjs.min.js"></script> <script> var sceneWidth; var sceneHeight; var camera; var scene; var renderer; var dom; var sun; var ground; //var orbitControl; var rollingGroundSphere; var heroSphere; var rollingSpeed = 0.008; var heroRollingSpeed; var worldRadius = 26; var heroRadius = 0.2; var sphericalHelper; var pathAngleValues; var heroBaseY = 1.8; var bounceValue = 0.1; var gravity = 0.005; var leftLane = -1; var rightLane = 1; var middleLane = 0; var currentLane; var clock; var jumping; var treeReleaseInterval = 0.5; var lastTreeReleaseTime = 0; var treesInPath; var treesPool; var particleGeometry; var particleCount = 20; var explosionPower = 1.06; var particles; //var stats; var scoreText; var score; var hasCollided; init(); function init() { // set up the scene createScene(); //call game loop update(); } function createScene() { hasCollided = false; score = 0; treesInPath = []; treesPool = []; clock = new THREE.Clock(); clock.start(); heroRollingSpeed = rollingSpeed * worldRadius / heroRadius / 5; sphericalHelper = new THREE.Spherical(); pathAngleValues = [1.52, 1.57, 1.62]; sceneWidth = window.innerWidth; sceneHeight = window.innerHeight; scene = new THREE.Scene(); //the 3d scene scene.fog = new THREE.FogExp2(0xf0fff0, 0.14); camera = new THREE.PerspectiveCamera(60, sceneWidth / sceneHeight, 0.1, 1000); //perspective camera renderer = new THREE.WebGLRenderer({ alpha: true }); //renderer with transparent backdrop renderer.setClearColor(0xfffafa, 1); renderer.shadowMap.enabled = true; //enable shadow renderer.shadowMap.type = THREE.PCFSoftShadowMap; renderer.setSize(sceneWidth, sceneHeight); dom = document.getElementById("TutContainer"); dom.appendChild(renderer.domElement); //stats = new Stats(); //dom.appendChild(stats.dom); createTreesPool(); addWorld(); addHero(); addLight(); addExplosion(); camera.position.z = 6.5; camera.position.y = 2.5; /*orbitControl = new THREE.OrbitControls( camera, renderer.domElement );//helper to rotate around in scene orbitControl.addEventListener( 'change', render ); orbitControl.noKeys = true; orbitControl.noPan = true; orbitControl.enableZoom = false; orbitControl.minPolarAngle = 1.1; orbitControl.maxPolarAngle = 1.1; orbitControl.minAzimuthAngle = -0.2; orbitControl.maxAzimuthAngle = 0.2; */ window.addEventListener("resize", onWindowResize, false); //resize callback document.onkeydown = handleKeyDown; scoreText = document.createElement("div"); scoreText.style.position = "absolute"; //text2.style.zIndex = 1; // if you still don't see the label, try uncommenting this scoreText.style.width = 100; scoreText.style.height = 100; //scoreText.style.backgroundColor = "blue"; scoreText.innerHTML = "0"; scoreText.style.top = 50 + "px"; scoreText.style.left = 10 + "px"; document.body.appendChild(scoreText); var infoText = document.createElement("div"); infoText.style.position = "absolute"; infoText.style.width = 100; infoText.style.height = 100; infoText.style.backgroundColor = "yellow"; infoText.innerHTML = "UP - Jump, Left/Right - Move"; infoText.style.top = 10 + "px"; infoText.style.left = 10 + "px"; document.body.appendChild(infoText); } function addExplosion() { particleGeometry = new THREE.Geometry(); for (var i = 0; i < particleCount; i++) { var vertex = new THREE.Vector3(); particleGeometry.vertices.push(vertex); } var pMaterial = new THREE.ParticleBasicMaterial({ color: 0xfffafa, size: 0.2 }); particles = new THREE.Points(particleGeometry, pMaterial); scene.add(particles); particles.visible = false; } function createTreesPool() { var maxTreesInPool = 10; var newTree; for (var i = 0; i < maxTreesInPool; i++) { newTree = createTree(); treesPool.push(newTree); } } function handleKeyDown(keyEvent) { if (jumping) return; var validMove = true; if (keyEvent.keyCode === 37) { //left if (currentLane == middleLane) { currentLane = leftLane; } else if (currentLane == rightLane) { currentLane = middleLane; } else { validMove = false; } } else if (keyEvent.keyCode === 39) { //right if (currentLane == middleLane) { currentLane = rightLane; } else if (currentLane == leftLane) { currentLane = middleLane; } else { validMove = false; } } else { if (keyEvent.keyCode === 38) { //up, jump .........完整代码请登录后点击上方下载按钮下载查看
网友评论0