API tools faq
paste
Advertisement
Guest User

game code

a guest
Dec 15th, 2013
453
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 15.23 KB | None | 0 0
raw download clone embed print report
  1. <!doctype html>
  2. <html>
  3.   <body bgcolor="#FFFFFF">
  4.   <head>
  5.     <title>s-haha-n game</title>
  6.     <meta charset="utf-8">
  7.     <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  8.     <Link rel=stylesheet href="css/base.css"/>
  9.   </head>
  10.   <body>
  11.     <div id="message"></div>
  12.  
  13.     <script src="js/three.min.js"></script>
  14.     <script src="js/Detector.js"></script>
  15.     <script src="js/Stats.js"></script>
  16.     <script src="js/OrbitControls.js"></script>
  17.     <script src="js/THREEx.KeyboardState.js"></script>
  18.     <script src="js/THREEx.FullScreen.js"></script>
  19.     <script src="js/THREEx.WindowResize.js"></script>
  20.     <!-- jQuery code to display an information button and box when clicked. -->
  21.     <script src="js/jquery-1.9.1.js"></script>
  22.     <script src="js/jquery-ui.js"></script>
  23.     <link rel=stylesheet href="css/jquery-ui.css" />
  24.     <link rel=stylesheet href="css/info.css"/>
  25.     <script src="js/info.js"></script>
  26.     <div style="position: absolute; bottom: 20px;">Bottom Text<br>By Shahan Akhter</br></div>
  27.     <div id="infoButton"></div>
  28.     <div id="infoBox" title="Help/Info">
  29.       <img src="http://i.imgur.com/HWIvMOo.png?1" alt="Controls" width="570" height="300">
  30.       <br><h1>'1' or '2' to switch Cameras<br></br>
  31.         'I' to get big (Shift+I) to get small<br></br>
  32.         'zero-0' to spin platforms<br></br>
  33.         Shift to slow down --- RED IS BAD<br></br>
  34.         'm' to Fullscreen</h1></br>
  35.  
  36.     </div>
  37.     <div id="ThreeJS" style="z=index: 2;"></div>
  38.     <script>
  39.       var container, scene, renderer, controls, stats;
  40.       var keyboard = new THREEx.KeyboardState();
  41.       var clock = new THREE.Clock();
  42.       var cube;
  43.       var camera;
  44.       var matx = new THREE.MeshBasicMaterial({color: 0xffffff, wireframe:true});
  45.  
  46.       // custom global variables
  47.       var MovingCube;
  48.       var chaseCamera, topCamera;
  49.       var chaseCameraActive = true;
  50.       var particleGroup, particleAttributes;
  51.       var collidableMeshList = [];
  52.       var arrowList = [];
  53.       var directionList = [];
  54.       var health = 100000;
  55.  
  56.       init();
  57.       animate();
  58.  
  59.       // FUNCTIONS     
  60.       function init()
  61.       {
  62.         // SCENE
  63.         scene = new THREE.Scene();
  64.         // CAMERA
  65.         var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;
  66.         var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000;
  67.  
  68.         // camera 1
  69.         topCamera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  70.         scene.add(topCamera);
  71.         topCamera.position.set(0,400,1100);
  72.         topCamera.lookAt(scene.position);
  73.         // camera 2
  74.         chaseCamera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR);
  75.         scene.add(chaseCamera);
  76.  
  77.         // RENDERER
  78.         if ( Detector.webgl )
  79.         renderer = new THREE.WebGLRenderer( {antialias:true} );
  80.         else
  81.         renderer = new THREE.CanvasRenderer();
  82.         renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  83.         container = document.getElementById( 'ThreeJS' );
  84.         container.appendChild( renderer.domElement );
  85.         // EVENTS
  86.         THREEx.WindowResize(renderer, topCamera);
  87.         THREEx.FullScreen.bindKey({ charCode : 'm'.charCodeAt(0) });
  88.  
  89.         // CONTROLS
  90.         // MUST REMOVE THIS LINE FOR THIS DEMO.
  91.         // controls = ...
  92.  
  93.         // LIGHT
  94.         var light = new THREE.PointLight(0xFFFFFF , 1.5);
  95.         light.position.set(0,400,-500);
  96.         scene.add(light);
  97.         var lightbulb = new THREE.Mesh(
  98.         new THREE.SphereGeometry( 10, 16, 8 ),
  99.         new THREE.MeshBasicMaterial( { color: 0x00FFFF} )
  100.         );
  101.         lightbulb.position = light.position;
  102.         scene.add(lightbulb);
  103.  
  104.         var light2 = new THREE.PointLight(0xFFFFFF , 1.5);
  105.         light2.position.set(0,400,500);
  106.         scene.add(light2);
  107.         var lightbulb2 = new THREE.Mesh(
  108.         new THREE.SphereGeometry( 10, 16, 8 ),
  109.         new THREE.MeshBasicMaterial( { color: 0x00FFFF} )
  110.         );
  111.         lightbulb2.position = light2.position;
  112.         scene.add(lightbulb2);
  113.  
  114.  
  115.  
  116.  
  117.         var ambientlight = new THREE.AmbientLight(0x111111);
  118.         scene.add( ambientlight );
  119.  
  120.         // SKYBOX/FOG
  121.         var skyBoxGeometry = new THREE.CubeGeometry( 10000, 10000, 10000 );
  122.         var skyBoxMaterial = new THREE.MeshBasicMaterial( { color: 0x9999ff, side: THREE.BackSide } );
  123.         var skyBox = new THREE.Mesh( skyBoxGeometry, skyBoxMaterial );
  124.         // scene.add(skyBox);
  125.         scene.fog = new THREE.FogExp2( 0x9999ff, 0.00025 );
  126.         renderer.setClearColorHex(0xB24700, 1);
  127.  
  128.  
  129.         ////////////
  130.         // CUSTOM //
  131.         ////////////
  132.         var loader = new THREE.JSONLoader();
  133.  
  134.         loader.load( "models/ref.js", function(geometry){
  135.           var material = new THREE.MeshPhongMaterial({color: 0x66768C});
  136.           mesh = new THREE.Mesh(geometry, material);
  137.           mesh.position.set(-50,280,0);
  138.           //        mesh.rotation.y = 4;
  139.           mesh.scale.set(4,4,4);
  140.           scene.add(mesh);
  141.         });
  142.         loader.load( "models/tallplat.js", function(geometry){
  143.           var material = new THREE.MeshPhongMaterial({color: 0x218A70});
  144.           tallplat= new THREE.Mesh(geometry, material);
  145.           tallplat.position.set(0,100,0);
  146.           //tallplat.scale.set(0.7,0.7,0.7);
  147.           scene.add(tallplat);
  148.         });
  149.         loader.load( "models/rot1.js", function(geometry){
  150.           var material = new THREE.MeshLambertMaterial({color: 0x0F0005});
  151.           rot1= new THREE.Mesh(geometry, material);
  152.           rot1.position.set(0,50,0);
  153.           rot1.scale.set(5,5,5);
  154.           scene.add(rot1);
  155.         });
  156.         loader.load( "models/rot2.js", function(geometry){
  157.           var material = new THREE.MeshPhongMaterial({color: 0x000005});
  158.           rot2= new THREE.Mesh(geometry, material);
  159.           rot2.position.set(0,0,0);
  160.           rot2.scale.set(85,85,85);
  161.           scene.add(rot2);
  162.         });
  163.  
  164.         //particles
  165.         var particleTexture = THREE.ImageUtils.loadTexture( 'images/spikey.png' );
  166.         particleGroup = new THREE.Object3D();
  167.         particleAttributes = { startSize: [], startPosition: [], randomness: [] };
  168.         var totalParticles = 200;
  169.         var radiusRange = 14;
  170.         for( var i = 0; i < totalParticles; i++ )
  171.        {
  172.          var spriteMaterial = new THREE.SpriteMaterial( { map: particleTexture, useScreenCoordinates: false, color: 0xffffff } );
  173.          var sprite = new THREE.Sprite( spriteMaterial );
  174.          sprite.scale.set( 7, 7, 1.0 ); // imageWidth, imageHeight
  175.          sprite.position.set( Math.random() - 0.5, Math.random() - 0.5, Math.random() - 0.5 );
  176.          // for a cube:
  177.          // sprite.position.multiplyScalar( radiusRange );
  178.          // for a solid sphere:
  179.          // sprite.position.setLength( radiusRange * Math.random() );
  180.          // for a spherical shell:
  181.          sprite.position.setLength( radiusRange * (Math.random() * 0.1 + 0.9) );
  182.  
  183.          // sprite.color.setRGB( Math.random(),  Math.random(),  Math.random() );
  184.          sprite.material.color.setHSL( Math.random(), 0.9, 0.7 );
  185.  
  186.          // sprite.opacity = 0.80; // translucent particles
  187.          sprite.material.blending = THREE.AdditiveBlending; // "glowing" particles
  188.  
  189.          particleGroup.add( sprite );
  190.          // add variable qualities to arrays, if they need to be accessed later
  191.          particleAttributes.startPosition.push( sprite.position.clone() );
  192.          particleAttributes.randomness.push( Math.random() );
  193.        }
  194.        particleGroup.position.y = 230;
  195.        particleGroup.position.x = -30;
  196.        scene.add( particleGroup );
  197.  
  198.        //collision
  199.        var wallGeometry = new THREE.CubeGeometry( 7, 7, 7, 1, 1, 1 );
  200.        var wallMaterial = new THREE.MeshBasicMaterial( {color: 0xFF0000} );
  201.        //var wireMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe:true } );
  202.  
  203.        var wall = new THREE.Mesh(wallGeometry, wallMaterial);
  204.        wall.position.set(-30, 230, 0);
  205.        scene.add(wall);
  206.        collidableMeshList.push(wall);
  207.        //var wall = new THREE.Mesh(wallGeometry, wireMaterial);
  208.        //wall.position.set(300, 200, 0);
  209.        //scene.add(wall);
  210.  
  211.        var wall2 = new THREE.Mesh(wallGeometry, wallMaterial);
  212.        wall2.position.set(200, 0, 0);
  213.        wall2.scale.set(1,50,1);
  214.        //wall2.rotation.y += 3.14159 / 2;
  215.        scene.add(wall2);
  216.        collidableMeshList.push(wall2);
  217.        //var wall2 = new THREE.Mesh(wallGeometry, wireMaterial);
  218.        //wall2.position.set(-200, 200, 0);
  219.        //wall2.rotation.y = 3.14159 / 2;
  220.        //scene.add(wall2);
  221.  
  222.        //collidableMeshList.push(light);//whyyy not???
  223.        //what can and can't be pushed here?!
  225.      }//end init
  227.      function clearText()
  228.      {   document.getElementById('message').innerHTML = '--------- If you touch Red, his will display your health, which seems to be constantly going down I will fix that.';}
  230.      function appendText(txt)
  231.      {   document.getElementById('message').innerHTML = '--------- This is your health: ' + health;}
  233.      function animate()
  234.      {
  235.        requestAnimationFrame( animate );
  236.        render();  
  237.        update();
  238.      }
  241.      function animate()
  242.      {
  243.        requestAnimationFrame( animate );
  244.         render();      
  245.        update();
  246.      }
  248.      function update()
  249.      {
  252.        var delta = clock.getDelta(); // seconds.
  253.        var moveDistance = 500 * delta; // 200 pixels per second
  254.        var rotateAngle = Math.PI / 1.5 * delta;   // pi/2
  257.        if ( keyboard.pressed("shift") ){
  258.          moveDistance = 200 * delta; // 200 pixels per second
  259.          var rotateAngle = Math.PI / 2 * delta;   // pi/2
  260.        }
  262.        // set the geometry to dynamic
  263.        // so that it allow updates
  264.        mesh.geometry.dynamic = true;
  266.        // changes to the vertices
  267.        mesh.geometry.verticesNeedUpdate = true;
  269.        // changes to the normals
  270.        mesh.geometry.normalsNeedUpdate = true;
  272.        //super mode
  273.        if ( keyboard.pressed("I") ) {
  274.          mesh.scale.set(6,6,6);
  275.        }
  276.        if ( keyboard.pressed("shift+I") ) {
  277.          mesh.scale.set(4,4,4);
  278.        }
  280.        if ( keyboard.pressed("0") ) {
  281.          tallplat.rotation.y += .09;
  282.          rot1.rotation.y += 0.1;
  283.          rot2.rotation.y += -.01;
  284.        }
  287.        tallplat.rotation.y += 0.0009;
  288.        rot1.rotation.y += 0.001;
  289.        rot2.rotation.y += -0.001;
  290.        //lightbulb.rotation.y += 0.05;
  293.        // move forwards/backwards/left/right
  294.        if ( keyboard.pressed("A") )
  295.        mesh.translateZ( -moveDistance );
  296.        if ( keyboard.pressed("D") )
  297.        mesh.translateZ(  moveDistance );
  298.        if ( keyboard.pressed("S") )
  299.        mesh.translateX( -moveDistance );
  300.        if ( keyboard.pressed("W") )
  301.        mesh.translateX(  moveDistance );
  303.        if ( keyboard.pressed("E") ) mesh.position.y = mesh.position.y-6;
  304.        if ( keyboard.pressed("Q") ) mesh.position.y = mesh.position.y+6;
  306.        var rotation_matrix = new THREE.Matrix4().identity();
  307.        if ( keyboard.pressed("left") )
  308.        mesh.rotateOnAxis( new THREE.Vector3(0,1,0), rotateAngle);
  309.        if ( keyboard.pressed("right") )
  310.        mesh.rotateOnAxis( new THREE.Vector3(0,1,0), -rotateAngle);
  311.        if ( keyboard.pressed("o") )
  312.        mesh.rotateOnAxis( new THREE.Vector3(1,0,0), rotateAngle);
  313.        if ( keyboard.pressed("p") )
  314.        mesh.rotateOnAxis( new THREE.Vector3(1,0,0), -rotateAngle);
  315.        if ( keyboard.pressed("up") )
  316.        mesh.rotateOnAxis( new THREE.Vector3(0,0,1), rotateAngle);
  317.        if ( keyboard.pressed("down") )
  318.        mesh.rotateOnAxis( new THREE.Vector3(0,0,1), -rotateAngle);
  320.        if ( keyboard.pressed("Z") )
  321.        {
  322.          mesh.position.set(0,0,0);
  323.          mesh.rotation.set(0,0,0);
  324.        }
  326.        var relativeCameraOffset = new THREE.Vector3(-70,15,0);
  327.        var cameraOffset = relativeCameraOffset.applyMatrix4( mesh.matrixWorld );
  329.        chaseCamera.position.x = cameraOffset.x;
  330.        chaseCamera.position.y = cameraOffset.y;
  331.        chaseCamera.position.z = cameraOffset.z;
  332.        chaseCamera.lookAt( mesh.position );
  334.        //camera.updateMatrix();
  335.        //camera.updateProjectionMatrix();
  337.        if ( keyboard.pressed("1") )
  338.        {  chaseCameraActive = true;  }
  339.        if ( keyboard.pressed("2") )
  340.        {  chaseCameraActive = false;  }
  343.        if ( keyboard.pressed("9") ){
  344. //          mesh = THREE.Mesh(geometry, matx);
  345. //change ref mesh?!
  346.        }
  348.        var time = 4 * clock.getElapsedTime();
  349.        for ( var c = 0; c < particleGroup.children.length; c ++ )
  350.        {
  351.          var sprite = particleGroup.children[ c ];
  353.          // particle wiggle
  354.          //var wiggleScale = 2;
  355.          //sprite.position.x += wiggleScale * (Math.random() - 0.5);
  356.          //sprite.position.y += wiggleScale * (Math.random() - 0.5);
  357.          //sprite.position.z += wiggleScale * (Math.random() - 0.5);
  359.          // pulse away/towards center
  360.          // individual rates of movement
  361.          var a = particleAttributes.randomness[c] + 1;
  362.          var pulseFactor = Math.sin(a * time) * 0.1 + 0.9;
  363.          sprite.position.x = particleAttributes.startPosition[c].x * pulseFactor;
  364.          sprite.position.y = particleAttributes.startPosition[c].y * pulseFactor;
  365.          sprite.position.z = particleAttributes.startPosition[c].z * pulseFactor;  
  366.        }
  367.        //rotate the entire group
  368.        //particleGroup.rotation.x = time * 0.5;
  369.        //particleGroup.rotation.y = time * 0.09;
  370.        particleGroup.rotation.z = time * 0.09;
  373.        // collision detection:
  374.        //   determines if any of the rays from the cube's origin to each vertex
  375.        //    intersects any face of a mesh in the array of target meshes
  376.        //   for increased collision accuracy, add more vertices to the cube;
  377.        //    for example, new THREE.CubeGeometry( 64, 64, 64, 8, 8, 8, wireMaterial )
  378.        //   HOWEVER: when the origin of the ray is within the target mesh, collisions do not occur
  379.        var originPoint = mesh.position.clone();
  380.  
  381.        clearText();
  382.  
  383.        for (var vertexIndex = 0; vertexIndex < mesh.geometry.vertices.length; vertexIndex++)
  384.        {  
  385.          var localVertex = mesh.geometry.vertices[vertexIndex].clone();
  386.          var globalVertex = localVertex.applyMatrix4( mesh.matrix );
  387.          var directionVector = globalVertex.sub( mesh.position );
  388.  
  389.          var ray = new THREE.Raycaster( originPoint, directionVector.clone().normalize() );
  390.          var collisionResults = ray.intersectObjects( collidableMeshList );
  391.          if ( collisionResults.length > 0 && collisionResults[0].distance < directionVector.length() )
  392.  
  393.          appendText(" health");
  394.           health--;
  395. //          if(health <= 0) echo "OH NOES";
  396.  
  397.        }
  398.  
  399.        controls.update();
  400.        stats.update();
  401.  
  402.      }//end animate
  403.  
  404.      function render()
  405.      {
  406.        if (chaseCameraActive)
  407.        {  renderer.render( scene, chaseCamera );  }
  408.        else
  409.        {  renderer.render( scene, topCamera );  }
  410.      }
  411.  
  412.    </script>
  413.  
  414.   </body>
  415.   </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!