Facebook
From Ronalds Mazītis, 3 Years ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 162
  1.  
  2.  
  3.  
  4. <!DOCTYPE html>
  5. <html lang="en">
  6.   <head>
  7.     <meta charset="UTF-8" />
  8.     <meta
  9.       name="viewport"
  10.       content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
  11.     />
  12.     <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  13.     <title>3D ONLINE GAME 2</title>
  14.     <link rel="stylesheet" href="/css/examples.css?ver=1.0.0" />
  15.     <script src="/js/examples.js?ver=1.1.1"></script>
  16.     <script src="/lib/phaser.min.js?ver=3.52.0"></script>
  17.     <script src="/lib/enable3d/enable3d.phaserExtension.0.25.0.min.js"></script>
  18.           <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  19.  
  20.    
  21.  
  22.   </head>
  23.  
  24.   <body>
  25.    <!--- <div id="info-text">Use WASD, SPACE and your Mouse.<br />Try to play it on your mobile device :)</div> -->
  26.    
  27.  <center>
  28.    <h1>
  29.           <?php  
  30.    include_once 'db.php';
  31.  
  32. $sessionid = $_SESSION['user_id'];
  33.  
  34. echo $user_data['username'];
  35.  
  36. if(empty($sessionid)){
  37.             header('Location: index.php');
  38.  
  39. //echo $sessionid;
  40.  
  41. }
  42.  
  43.  
  44. //skripts kurš pie katras čaraktera kustību apstājas updeito tabulas sadaļu *location*
  45. //skripts kurš katru lietotāju kura datetime sakrīt ar intervālu pēdējās 15 min, zīmē ekrānā
  46.  
  47.  
  48.  
  49.  
  50.  
  51.    ?>
  52.  
  53.    </h1>  <a href="logout.php">Logout.</a>
  54.    </center>
  55.     <script>
  56.                
  57.                
  58.                
  59.  
  60.  
  61.  
  62.   const {
  63.       enable3d,
  64.       Scene3D,
  65.       Canvas,
  66.       ThirdDimension,
  67.       THREE,
  68.       JoyStick,
  69.       ExtendedObject3D,
  70.       ThirdPersonControls,
  71.       PointerLock,
  72.       PointerDrag
  73.   } = ENABLE3D
  74.  
  75.   /**
  76.    * Is touch device?
  77.    */
  78.   const isTouchDevice = 'ontouchstart' in window
  79.  
  80.   class MainScene extends Scene3D {
  81.  
  82.       constructor() {
  83.           super({
  84.               key: 'MainScene'
  85.           })
  86.          // this.myMans = []
  87.       }
  88.        myMans = []
  89.  
  90.       init() {
  91.           this.accessThirdDimension({
  92.               maxSubSteps: 10,
  93.               fixedTimeStep: 1 / 120
  94.           })
  95.           this.third.renderer.outputEncoding = THREE.LinearEncoding
  96.           this.canJump = true
  97.           this.move = false
  98.  
  99.           this.moveTop = 0
  100.           this.moveRight = 0
  101.          
  102.  
  103.  
  104.  
  105.  //this.myMans.push("TUKSUMS");
  106.  
  107.       }
  108.  
  109.  
  110.  
  111.       async create() {
  112.           const {
  113.               lights
  114.           } = await this.third.warpSpeed('-ground', '-orbitControls')
  115.  
  116.           const {
  117.               hemisphereLight,
  118.               ambientLight,
  119.               directionalLight
  120.           } = lights
  121.           const intensity = 0.65
  122.           hemisphereLight.intensity = intensity
  123.           ambientLight.intensity = intensity
  124.           directionalLight.intensity = intensity
  125.  
  126.  
  127.  
  128.           //this.third.physics.add.box({ y: 10, x: 35 }, { lambert: { color: 'red' } })
  129.  
  130.           // this.third.physics.debug.enable()
  131.  
  132.           /**
  133.            * Medieval Fantasy Book by Pixel (https://sketchfab.com/stefan.lengyel1)
  134.            * https://sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91a
  135.            * Attribution 4.0 International (CC BY 4.0)
  136.            
  137.            E4E717
  138.            */
  139.           this.third.load.gltf('/assets/glb/book6.glb').then(object => {
  140.               const scene = object.scenes[0]
  141.  
  142.               const book = new ExtendedObject3D()
  143.               book.name = 'scene'
  144.               book.add(scene)
  145.               this.third.add.existing(book)
  146.  
  147.               // add animations
  148.               // sadly only the flags animations works
  149.               object.animations.forEach((anim, i) => {
  150.                   book.mixer = this.third.animationMixers.create(book)
  151.                   // overwrite the action to be an array of actions
  152.                   book.action = []
  153.                   book.action[i] = book.mixer.clipAction(anim)
  154.                   book.action[i].play()
  155.               })
  156.  
  157.               book.traverse(child => {
  158.                   if (child.isMesh) {
  159.                       child.castShadow = child.receiveShadow = false
  160.                       child.material.metalness = 0
  161.                       child.material.roughness = 1
  162.  
  163.                       if (/mesh/i.test(child.name)) {
  164.                           this.third.physics.add.existing(child, {
  165.                               shape: 'concave',
  166.                               mass: 0,
  167.                               collisionFlags: 1,
  168.                               autoCenter: false
  169.                           })
  170.                           child.body.setAngularFactor(0, 0, 0)
  171.                           child.body.setLinearFactor(0, 0, 0)
  172.                       }
  173.                   }
  174.               })
  175.           })
  176.  
  177.  
  178.           //$.post( "postlocation.php", function( data ) {
  179.           //});
  180.           //this.man.position.set(35, -3.5, 0)
  181.           //function getData(ajaxurl) {
  182.           //return   $.ajax({
  183.           //type: "GET",
  184.           //url: 'getlocation.php',
  185.           //data:{},
  186.           //success:function(html) {
  187.           //var obj = JSON.parse(html);
  188.           //}
  189.           //});
  190.           //};
  191.           //async function test() {
  192.           //try {
  193.           //const res = await getData()
  194.           //console.log(res)
  195.           //this.man.position.set(obj.x, obj.y, obj.z)
  196.           //} catch(err) {
  197.           //console.log(err);
  198.           //}
  199.           //}
  200.           //test();
  201.  
  202.           var fruits = [];
  203.           $.ajax({
  204.               type: "GET",
  205.               async: false,
  206.               url: 'loaduserdata.php',
  207.               data: {},
  208.               success: function (data) {
  209.                   fruits = data.split(",").map(String);
  210.               }
  211.           });
  212.          
  213.          
  214.          
  215.                 //console.log("lenght", fruits.length - 1);
  216.  
  217.  
  218.           var skins = [];
  219.           $.ajax({
  220.               type: "GET",
  221.               async: false,
  222.               url: 'loadskins.php',
  223.               data: {},
  224.               success: function (data) {
  225.                   skins = data.split(",").map(String);
  226.               }
  227.           });
  228.           //console.log("zajebaļi", skins);
  229.  
  230.                   //console.log("myMans", this.myMans);
  231.        
  232.  
  233.           for (var i = 0; i < skins.length - 1; i++) {
  234.               let skin = skins[i];  
  235.              
  236.               ///let MAN = this.myMans[i];
  237.               /**
  238.                * box_man.glb by Jan Bláha
  239.                * https://github.com/swift502/Sketchbook
  240.                * CC-0 license 2018
  241.                */
  242.  
  243.  
  244.               /// this array holds every value for characters
  245.               /// ievietos skin
  246.              
  247.                 const object = await this.third.load.gltf(skin)
  248.  
  249.                         //console.log("nu", MAN);
  250.  
  251.               //this.third.load.gltf(skin).then(object => {
  252.                   //console.log(fruits.length);
  253.                       const man = object.scene.children[0]
  254.                      
  255.                       console.log("man i", i);
  256.                       //console.log("teorija", man);
  257.                      
  258.                       this.myMans.push(man);
  259.                       //console.log(myMans);
  260.                       this.myMans[i] = new ExtendedObject3D()
  261.                       //this.man = new ExtendedObject3D()
  262.          
  263.                                                 //console.log("objekt3d", this.myMans[i]);
  264.        
  265.        
  266.                                        
  267.                       this.myMans[i].rotateY(Math.PI + 0.1) // a hack
  268.                    
  269.                       this.myMans[i].name = fruits[i];
  270.                    
  271.                       //this.man.rotateY(Math.PI + 0.1) // a hack
  272.                       //this.man.name = fruits[i]
  273.                       var obj; /// koordinātes
  274.                       $.ajax({
  275.                           type: "GET",
  276.                           async: false,
  277.                           url: 'getlocation.php',
  278.                           data: {},
  279.                           success: function (html) {
  280.                               obj = JSON.parse(html);
  281.                               //console.log("noliek", obj);
  282.                           }
  283.  
  284.                       });
  285.                       //console.log(obj.x);
  286.                       //console.log(obj.y);
  287.                       //console.log(obj.z);
  288.                       //{"x":-0.9553362921119645,"y":0,"z":0.2955208435521314}
  289.                       ///alert(obj.x, obj.y, obj.z);
  290.                       if (i == 0) {
  291.                           this.myMans[i].position.set(724.2014, 800, -205.63472)
  292.                       } else {
  293.                           this.myMans[i].position.set(754.2014, 1000, -205.63472)
  294.                       }
  295.                      // console.log("pievieno", this.myMans[i]);
  296.                       this.myMans[i].add(this.myMans);
  297.                      
  298.                        
  299.                       //this.man.rotation.set(0, Math.PI * 1.5, 0)
  300.                       //myMans[i].add(myMans[i])
  301.                       this.myMans[i].rotation.set(0, Math.PI * 1.5, 0)
  302.                       // add shadow
  303.                       this.myMans[i].traverse(child => {
  304.                           if (child.isMesh) {
  305.                               child.castShadow = child.receiveShadow = true
  306.                               // https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
  307.                               child.material.roughness = 1
  308.                               child.material.metalness = 0
  309.                           }
  310.                       })
  311.                       /**
  312.                        * Animations
  313.                        */
  314.                       this.third.animationMixers.add(this.myMans[i].animation.mixer)
  315.                       object.animations.forEach(animation => {
  316.                           if (animation.name) {
  317.                               this.myMans[i].animation.add(animation.name, animation)
  318.                           }
  319.                       })
  320.                       this.myMans[i].animation.play('idle')
  321.  
  322.                       /**
  323.                        * Add the player to the scene with a body
  324.                        */
  325.                           //console.log("pievieno charakter",myMans[i]);
  326.                       this.third.add.existing(this.myMans[i])
  327.                       this.third.physics.add.existing(this.myMans[i], {
  328.                           shape: 'sphere',
  329.                           radius: 0.25,
  330.                           width: 0.5,
  331.                           offset: {
  332.                               y: -0.25
  333.                           }
  334.                       })
  335.                       this.myMans[i].body.setFriction(0.8)
  336.                       this.myMans[i].body.setAngularFactor(0, 0, 0)
  337.                       // https://docs.panda3d.org/1.10/python/programming/physics/bullet/ccd
  338.                       this.myMans[i].body.setCcdMotionThreshold(1e-7)
  339.                       this.myMans[i].body.setCcdSweptSphereRadius(0.25)
  340.  
  341.                       /**
  342.                        * Add 3rd Person Controls
  343.                        */
  344.                       this.controls = new ThirdPersonControls(this.third.camera, this.myMans[i], {
  345.                           offset: new THREE.Vector3(0, 1, 0),
  346.                           targetRadius: 3
  347.                       })
  348.                       // set initial view to 90 deg theta
  349.                       this.controls.theta = 90
  350.  
  351.                       /**
  352.                        * Add Pointer Lock and Pointer Drag
  353.                        */
  354.                       if (!isTouchDevice) {
  355.                           let pl = new PointerLock(this.game.canvas)
  356.                           let pd = new PointerDrag(this.game.canvas)
  357.                           pd.onMove(delta => {
  358.                               if (pl.isLocked()) {
  359.                                   this.moveTop = -delta.y
  360.                                   this.moveRight = delta.x
  361.                               }
  362.                           })
  363.                       }
  364.                    // beidzas myMans[i]
  365.                   //console.log("vai ir vai nav", object);
  366.               //})
  367.           }
  368.  
  369.  
  370.  
  371.  
  372.           //console.log("city");
  373.       }
  374.  
  375.       /// iegūst no datubāzes vai leciens ir animācija
  376.       jump(myMans) {
  377.                   //////this.third.load.gltf(skin).then(object => {
  378.           ////var myMans = new Array();
  379.               //var man = object.scene.children[0]
  380.               //console.log("man", man);
  381.               //myMans.push(man);
  382.           //}          //
  383.           console.log("jumps");
  384.          
  385.           var fruits = [];
  386.           $.ajax({
  387.               type: "GET",
  388.               async: false,
  389.               url: 'loaduserdata.php',
  390.               data: {},
  391.               success: function (data) {
  392.                   fruits = data.split(",").map(String);
  393.                   //const fruits = Array.from([data])
  394.                   //console.log(fruits);
  395.                   //console.log(typeof(fruits));
  396.                   // uu
  397.                   //
  398.               }
  399.           });
  400.          
  401.           for (var i = 0; i < fruits.length - 1; i++) {
  402.  
  403.           //console.log("womeni", this.myMans[i]);
  404.  
  405.           if (!this.myMans[i] || !this.canJump) return
  406.           this.canJump = false
  407.           this.myMans[i].animation.play('jump_running', 500, false)
  408.           this.time.addEvent({
  409.               delay: 650,
  410.               callback: () => {
  411.                   this.canJump = true
  412.                   this.myMans[i].animation.play('idle')
  413.               }
  414.           })
  415.           this.myMans[i].body.applyForceY(6)
  416.           }
  417.          // })
  418.  
  419.        
  420. }
  421.  
  422.     async update(time, delta, myMans) { // lai Viņš strādātu object subklasēm būtu jābūt pieejamām, object rodās pašā sākumā pie skin izvēles
  423.  
  424.  
  425. //console.log("myMans is array", Array.isArray(this.myMans));
  426. //console.log("myMans inside" , this.myMans)
  427. //console.log("myMans inside 0 element" , this.myMans[0])
  428. //console.log("myMans animation" , this.myMans[0].animation.current)
  429.           /**
  430.            * Add Keys
  431.            */
  432.           this.keys = {
  433.               a: this.input.keyboard.addKey('a'),
  434.               w: this.input.keyboard.addKey('w'),
  435.               d: this.input.keyboard.addKey('d'),
  436.               s: this.input.keyboard.addKey('s'),
  437.               space: this.input.keyboard.addKey(32)
  438.           }
  439.           /**
  440.            * Add joystick
  441.            */
  442.           if (isTouchDevice) {
  443.               const joystick = new JoyStick()
  444.               const axis = joystick.add.axis({
  445.                   styles: {
  446.                       left: 35,
  447.                       bottom: 35,
  448.                       size: 100
  449.                   }
  450.               })
  451.               axis.onMove(event => {
  452.                   /**
  453.                    * Update Camera
  454.                    */
  455.                   const {
  456.                       top,
  457.                       right
  458.                   } = event
  459.                   this.moveTop = top * 3
  460.                   this.moveRight = right * 3
  461.               })
  462.               const buttonA = joystick.add.button({
  463.                   letter: 'A',
  464.                   styles: {
  465.                       right: 35,
  466.                       bottom: 110,
  467.                       size: 80
  468.                   }
  469.               })
  470.               buttonA.onClick(() => this.jump())
  471.               const buttonB = joystick.add.button({
  472.                   letter: 'B',
  473.                   styles: {
  474.                       right: 110,
  475.                       bottom: 35,
  476.                       size: 80
  477.                   }
  478.               })
  479.               buttonB.onClick(() => (this.move = true))
  480.               buttonB.onRelease(() => (this.move = false))
  481.           }
  482.          
  483.          
  484.  
  485.           var fruits2 = [];
  486.           $.ajax({
  487.               type: "GET",
  488.               async: false,
  489.               url: 'loaduserdata.php',
  490.               data: {},
  491.               success: function (data) {
  492.                   fruits2 = data.split(",").map(String);
  493.                   //const fruits = Array.from([data])
  494.                   //console.log(fruits);
  495.                   //console.log(typeof(fruits));
  496.                   // uu
  497.                   //
  498.               }
  499.           });
  500.          
  501.          
  502.          
  503.           //for (var i = 0; i < this.myMans.length; i++) {
  504.                           //console.log("dauni",  this.myMans[i].name);
  505. //}
  506.  
  507.  
  508.           for (var i = 0; i < fruits2.length - 1; i++) {
  509.           //console.log("womeni2", this.myMans[i]);
  510.  
  511.  
  512.               if (this.myMans[i] && this.myMans[i].body) {
  513.                   /**
  514.                    * Update Controls
  515.                    */
  516.                   this.controls.update(this.moveRight * 2, -this.moveTop * 2)
  517.                   if (!isTouchDevice) this.moveRight = this.moveTop = 0
  518.                   /**
  519.                    * Player Turn
  520.                    */
  521.                   const speed = 4
  522.                   const v3 = new THREE.Vector3()
  523.  
  524.  
  525.  
  526.                   /////console.log(time);
  527.                   //if(time % 55 == 0){
  528.                   //console.log(5000);
  529.  
  530.                   ///{"x":0.9991227572113053,"y":0,"z":0.04187739273736313}
  531.                   //{
  532.                   //"x": -0.9994445004172535,
  533.                   //"y": 0,
  534.                   //"z": -0.03332702485530725
  535.                   //}
  536.  
  537.  
  538.                   setTimeout(function () {
  539.  
  540.                       var locatedata = JSON.stringify(v3);
  541.  
  542.  
  543.  
  544.                       $.post(
  545.                           "postlocation.php", {
  546.                               locatedata: locatedata
  547.                           },
  548.                           function (data) {
  549.  
  550.                               //console.log("izsaukta", v3);
  551.                           }
  552.                       );
  553.  
  554.  
  555.                   }, 10000);
  556.  
  557.                   //}
  558.  
  559.  
  560.  
  561.  
  562.                   // iegūtos rotācijas datus ievieto šeit ja nav jau iegūti manuāli
  563.  
  564.                   const rotation = this.third.camera.getWorldDirection(v3)
  565.                   //gadijumā ja ir jau izveidoti updeito datubāzi
  566.  
  567.  
  568.                   const theta = Math.atan2(rotation.x, rotation.z)
  569.                   const rotationMan = this.myMans[i].getWorldDirection(v3)  
  570.                                   const thetaMan = Math.atan2(rotationMan.x, rotationMan.z)
  571.                                                    this.myMans[i].body.setAngularVelocityY(0)
  572. const l = Math.abs(theta - thetaMan)
  573.  
  574.  let rotationSpeed = isTouchDevice ? 2 : 4
  575.                   let d = Math.PI / 24
  576.  
  577.                   if (l > d) {
  578.                   if (l > Math.PI - d) rotationSpeed *= -1
  579.                   if (theta < thetaMan) rotationSpeed *= -1
  580.                   this.myMans[i].body.setAngularVelocityY(rotationSpeed)
  581.                   }
  582.  
  583.  
  584.  
  585.  
  586.  
  587.  
  588.                  
  589.                  
  590.                  
  591.                  
  592.  
  593.                  
  594.                  
  595.                   /**
  596.                   * Player Move
  597.                   */
  598.                   if (this.keys.w.isDown || this.move) {
  599.                   if (this.myMans[i].animation.current === 'idle' && this.canJump) this.myMans[i].animation.play('run')
  600.  
  601.                   const x = Math.sin(theta) * speed,
  602.                   y = this.myMans[i].body.velocity.y,
  603.                   z = Math.cos(theta) * speed
  604.  
  605.                   //iegūtos ātruma datus iegūst no datubāzes
  606.                   this.myMans[i].body.setVelocity(x, y, z)
  607.                   //gadijumā ja ir izveidoti updeito datubāzi ar tiem
  608.  
  609.  
  610.                   } else {
  611.                                          
  612.                   if (this.myMans[i].animation.current === 'run' && this.canJump) this.myMans[i].animation.play('idle')
  613.                   }
  614.  
  615.                   /**
  616.                   * Player Jump
  617.                   */
  618.                   if (this.keys.space.isDown && this.canJump) {
  619.                   this.jump()
  620.                
  621.  
  622.                  
  623.                  
  624.                  
  625.                  
  626.                  
  627.                  
  628.                   }
  629.                   }
  630.                           }
  631.  
  632.  
  633.         //console.log("globals masivs ar cilvekiem", this.myMans.length);
  634.  
  635.               }
  636.  
  637.           }
  638.  
  639.  
  640.       const config = {
  641.         type: Phaser.WEBGL,
  642.         transparent: true,
  643.         scale: {
  644.           mode: Phaser.Scale.FIT,
  645.           autoCenter: Phaser.Scale.CENTER_BOTH,
  646.           width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
  647.           height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
  648.         },
  649.         scene: [MainScene],
  650.         ...Canvas({ antialias: false })
  651.       }
  652.  
  653.       window.addEventListener('load', () => {
  654.         enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
  655.       })
  656.      
  657.      
  658.       //////////wqtttwrf
  659.     </script>
  660.   </body>
  661. </html>
  662.  
  663.