Facebook
From Ronalds Mazītis, 3 Years ago, written in JavaScript.
Embed
Download Paste or View Raw
Hits: 182
  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.  
  89.       init() {
  90.           this.accessThirdDimension({
  91.               maxSubSteps: 10,
  92.               fixedTimeStep: 1 / 120
  93.           })
  94.           this.third.renderer.outputEncoding = THREE.LinearEncoding
  95.           this.canJump = true
  96.           this.move = false
  97.  
  98.           this.moveTop = 0
  99.           this.moveRight = 0
  100.          
  101.  
  102.       }
  103.  
  104.  
  105.  
  106.  
  107.  
  108.  
  109.       async create() {
  110.           const {
  111.               lights
  112.           } = await this.third.warpSpeed('-ground', '-orbitControls')
  113.  
  114.           const {
  115.               hemisphereLight,
  116.               ambientLight,
  117.               directionalLight
  118.           } = lights
  119.           const intensity = 0.65
  120.           hemisphereLight.intensity = intensity
  121.           ambientLight.intensity = intensity
  122.           directionalLight.intensity = intensity
  123.  
  124.  
  125.  
  126.  
  127.           //this.third.physics.add.box({ y: 10, x: 35 }, { lambert: { color: 'red' } })
  128.  
  129.           // this.third.physics.debug.enable()
  130.  
  131.           /**
  132.            * Medieval Fantasy Book by Pixel (https://sketchfab.com/stefan.lengyel1)
  133.            * https://sketchfab.com/3d-models/medieval-fantasy-book-06d5a80a04fc4c5ab552759e9a97d91a
  134.            * Attribution 4.0 International (CC BY 4.0)
  135.            
  136.            E4E717
  137.            */
  138.           this.third.load.gltf('/assets/glb/book6.glb').then(object => {
  139.               const scene = object.scenes[0]
  140.  
  141.               const book = new ExtendedObject3D()
  142.               book.name = 'scene'
  143.               book.add(scene)
  144.               this.third.add.existing(book)
  145.  
  146.               // add animations
  147.               // sadly only the flags animations works
  148.               object.animations.forEach((anim, i) => {
  149.                   book.mixer = this.third.animationMixers.create(book)
  150.                   // overwrite the action to be an array of actions
  151.                   book.action = []
  152.                   book.action[i] = book.mixer.clipAction(anim)
  153.                   book.action[i].play()
  154.               })
  155.  
  156.               book.traverse(child => {
  157.                   if (child.isMesh) {
  158.                       child.castShadow = child.receiveShadow = false
  159.                       child.material.metalness = 0
  160.                       child.material.roughness = 1
  161.  
  162.                       if (/mesh/i.test(child.name)) {
  163.                           this.third.physics.add.existing(child, {
  164.                               shape: 'concave',
  165.                               mass: 0,
  166.                               collisionFlags: 1,
  167.                               autoCenter: false
  168.                           })
  169.                           child.body.setAngularFactor(0, 0, 0)
  170.                           child.body.setLinearFactor(0, 0, 0)
  171.                       }
  172.                   }
  173.               })
  174.           })
  175.  
  176.  
  177.           //$.post( "postlocation.php", function( data ) {
  178.  
  179.           //});
  180.  
  181.  
  182.           //this.man.position.set(35, -3.5, 0)
  183.  
  184.  
  185.  
  186.           //function getData(ajaxurl) {
  187.           //return   $.ajax({
  188.           //type: "GET",
  189.           //url: 'getlocation.php',
  190.           //data:{},
  191.           //success:function(html) {
  192.           //var obj = JSON.parse(html);
  193.  
  194.           //}
  195.  
  196.           //});
  197.           //};
  198.  
  199.           //async function test() {
  200.           //try {
  201.           //const res = await getData()
  202.           //console.log(res)
  203.           //this.man.position.set(obj.x, obj.y, obj.z)
  204.  
  205.           //} catch(err) {
  206.           //console.log(err);
  207.           //}
  208.           //}
  209.  
  210.           //test();
  211.  
  212.  
  213.  
  214.           var fruits = [];
  215.           $.ajax({
  216.               type: "GET",
  217.               async: false,
  218.               url: 'loaduserdata.php',
  219.               data: {},
  220.               success: function (data) {
  221.                   fruits = data.split(",").map(String);
  222.                   //const fruits = Array.from([data])
  223.                   //console.log(fruits);
  224.  
  225.                   //console.log(typeof(fruits));
  226.               }
  227.  
  228.           });
  229. console.log("lenght", fruits.length - 1);
  230.  
  231.  
  232.           var skins = [];
  233.           $.ajax({
  234.               type: "GET",
  235.               async: false,
  236.               url: 'loadskins.php',
  237.               data: {},
  238.               success: function (data) {
  239.                   skins = data.split(",").map(String);
  240.               }
  241.           });
  242.           console.log("zajebaļi", skins);
  243.  
  244.  
  245.  
  246.  
  247. console.log("myMans", this.myMans);
  248.  
  249.           for (var i = 0; i < skins.length - 1; i++) {
  250.               let skin = skins[i];
  251.  
  252.  
  253.               /**
  254.                * box_man.glb by Jan Bláha
  255.                * https://github.com/swift502/Sketchbook
  256.                * CC-0 license 2018
  257.                */
  258.                     /// this array holds every value for characters
  259.  
  260.               /// ievietos skin
  261.               this.third.load.gltf(skin).then(object => {
  262.                        
  263.  
  264.                   //console.log(fruits.length);
  265.  
  266.  
  267.  
  268.                       const man = object.scene.children[0]
  269.                       console.log("man h", man);
  270.  
  271.                       this.myMans.push(man);
  272.                  
  273.  
  274.  
  275.                       //console.log(myMans);
  276.  
  277.                       this.myMans[i] = new ExtendedObject3D()
  278.                       //this.man = new ExtendedObject3D()
  279.  
  280.                       //console.log("fruits", fruits);
  281.  
  282.                       this.myMans[i].rotateY(Math.PI + 0.1) // a hack
  283.                       this.myMans[i].name = fruits[i]
  284.  
  285.  
  286.  
  287.                       //this.man.rotateY(Math.PI + 0.1) // a hack
  288.                       //this.man.name = fruits[i]
  289.  
  290.  
  291.                       var obj; /// koordinātes
  292.                       $.ajax({
  293.                           type: "GET",
  294.                           async: false,
  295.                           url: 'getlocation.php',
  296.                           data: {},
  297.                           success: function (html) {
  298.                               obj = JSON.parse(html);
  299.                               //console.log("noliek", obj);
  300.                           }
  301.  
  302.                       });
  303.                       //console.log(obj.x);
  304.                       //console.log(obj.y);
  305.                       //console.log(obj.z);
  306.  
  307.  
  308.  
  309.                       //{"x":-0.9553362921119645,"y":0,"z":0.2955208435521314}
  310.                       ///alert(obj.x, obj.y, obj.z);
  311.  
  312.                       if (i == 0) {
  313.                           this.myMans[i].position.set(724.2014, 800, -205.63472)
  314.                       } else {
  315.                           this.myMans[i].position.set(754.2014, 1000, -205.63472)
  316.                       }
  317.  
  318.  
  319.  
  320.  
  321.                       console.log("pievieno", this.myMans[i].name);
  322.                       //this.man.add(myMans[i])
  323.                       //this.man.rotation.set(0, Math.PI * 1.5, 0)
  324.                       //myMans[i].add(myMans[i])
  325.                       this.myMans[i].rotation.set(0, Math.PI * 1.5, 0)
  326.  
  327.  
  328.  
  329.  
  330.  
  331.  
  332.  
  333.  
  334.                       // add shadow
  335.                       this.myMans[i].traverse(child => {
  336.                           if (child.isMesh) {
  337.                               child.castShadow = child.receiveShadow = true
  338.                               // https://discourse.threejs.org/t/cant-export-material-from-blender-gltf/12258
  339.                               child.material.roughness = 1
  340.                               child.material.metalness = 0
  341.                           }
  342.                       })
  343.  
  344.                       /**
  345.                        * Animations
  346.                        */
  347.                       this.third.animationMixers.add(this.myMans[i].animation.mixer)
  348.                       object.animations.forEach(animation => {
  349.                           if (animation.name) {
  350.                               this.myMans[i].animation.add(animation.name, animation)
  351.                           }
  352.                       })
  353.                       this.myMans[i].animation.play('idle')
  354.  
  355.                                        
  356.                                        
  357.                                        
  358.                                        
  359.                       /**
  360.                        * Add the player to the scene with a body
  361.                        */
  362.  
  363.                           //console.log("pievieno charakter",myMans[i]);
  364.                           this.third.add.existing(this.myMans[i])
  365.                      
  366.  
  367.                                        
  368.                       this.third.physics.add.existing(this.myMans[i], {
  369.                           shape: 'sphere',
  370.                           radius: 0.25,
  371.                           width: 0.5,
  372.                           offset: {
  373.                               y: -0.25
  374.                           }
  375.                       })
  376.                       this.myMans[i].body.setFriction(0.8)
  377.                       this.myMans[i].body.setAngularFactor(0, 0, 0)
  378.  
  379.                       // https://docs.panda3d.org/1.10/python/programming/physics/bullet/ccd
  380.                       this.myMans[i].body.setCcdMotionThreshold(1e-7)
  381.                       this.myMans[i].body.setCcdSweptSphereRadius(0.25)
  382.  
  383.                       /**
  384.                        * Add 3rd Person Controls
  385.                        */
  386.                       this.controls = new ThirdPersonControls(this.third.camera, this.myMans[i], {
  387.                           offset: new THREE.Vector3(0, 1, 0),
  388.                           targetRadius: 3
  389.                       })
  390.                       // set initial view to 90 deg theta
  391.                       this.controls.theta = 90
  392.  
  393.                       /**
  394.                        * Add Pointer Lock and Pointer Drag
  395.                        */
  396.                       if (!isTouchDevice) {
  397.                           let pl = new PointerLock(this.game.canvas)
  398.                           let pd = new PointerDrag(this.game.canvas)
  399.                           pd.onMove(delta => {
  400.                               if (pl.isLocked()) {
  401.                                   this.moveTop = -delta.y
  402.                                   this.moveRight = delta.x
  403.                               }
  404.                           })
  405.                       }
  406.                    // beidzas myMans[i]
  407.  
  408.  
  409.  
  410.  
  411.                   console.log("vai ir vai nav", object);
  412.  
  413.  
  414.               })
  415.  
  416.  
  417.           }
  418.  
  419.  
  420.  
  421.  
  422.  
  423.           /**
  424.            * Add Keys
  425.            */
  426.           this.keys = {
  427.               a: this.input.keyboard.addKey('a'),
  428.               w: this.input.keyboard.addKey('w'),
  429.               d: this.input.keyboard.addKey('d'),
  430.               s: this.input.keyboard.addKey('s'),
  431.               space: this.input.keyboard.addKey(32)
  432.           }
  433.  
  434.           /**
  435.            * Add joystick
  436.            */
  437.           if (isTouchDevice) {
  438.               const joystick = new JoyStick()
  439.               const axis = joystick.add.axis({
  440.                   styles: {
  441.                       left: 35,
  442.                       bottom: 35,
  443.                       size: 100
  444.                   }
  445.               })
  446.               axis.onMove(event => {
  447.                   /**
  448.                    * Update Camera
  449.                    */
  450.                   const {
  451.                       top,
  452.                       right
  453.                   } = event
  454.                   this.moveTop = top * 3
  455.                   this.moveRight = right * 3
  456.               })
  457.               const buttonA = joystick.add.button({
  458.                   letter: 'A',
  459.                   styles: {
  460.                       right: 35,
  461.                       bottom: 110,
  462.                       size: 80
  463.                   }
  464.               })
  465.               buttonA.onClick(() => this.jump())
  466.               const buttonB = joystick.add.button({
  467.                   letter: 'B',
  468.                   styles: {
  469.                       right: 110,
  470.                       bottom: 35,
  471.                       size: 80
  472.                   }
  473.               })
  474.               buttonB.onClick(() => (this.move = true))
  475.               buttonB.onRelease(() => (this.move = false))
  476.           }
  477.  
  478.           console.log("city");
  479.       }
  480.  
  481.  
  482.       /// iegūst no datubāzes vai leciens ir animācija
  483.       jump() {
  484.                  
  485.                  
  486.                   var skins = [];
  487.           $.ajax({
  488.               type: "GET",
  489.               async: false,
  490.               url: 'loadskins.php',
  491.               data: {},
  492.               success: function (data) {
  493.                   skins = data.split(",").map(String);
  494.               }
  495.           });
  496.           console.log("skini", skins);
  497.  
  498.  
  499.                   var myMans = new Array();
  500.  
  501.  
  502.  
  503.           for (var i = 0; i < skins.length - 1; i++) {
  504.                 var skin = skins[i];
  505.  
  506.               this.third.load.gltf(skin).then(object => {
  507.  
  508.  
  509.  
  510.           var myMans = new Array();
  511.           for (var i = 0; i < fruits.length - 1; i++) {
  512.               const man = object.scene.children[0]
  513.               console.log("man", man);
  514.               myMans.push(man);
  515.           }
  516.  
  517.           console.log("womeni", myMans[i]);
  518.  
  519.  
  520.  
  521.           if (!myMans[i] || !this.canJump) return
  522.           this.canJump = false
  523.           myMans[i].animation.play('jump_running', 500, false)
  524.           this.time.addEvent({
  525.               delay: 650,
  526.               callback: () => {
  527.                   this.canJump = true
  528.                   myMans[i].animation.play('idle')
  529.               }
  530.           })
  531.           myMans[i].body.applyForceY(6)
  532.          
  533.           })
  534.           }
  535.       }
  536.       //ja tas notiek updeito datubāzi ar to ka palecās
  537.  
  538. //wtf
  539.  
  540.  
  541.       update(time, delta) { // 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
  542.  
  543.           var fruits2 = [];
  544.           $.ajax({
  545.               type: "GET",
  546.               async: false,
  547.               url: 'loaduserdata.php',
  548.               data: {},
  549.               success: function (data) {
  550.                   fruits2 = data.split(",").map(String);
  551.                   //const fruits = Array.from([data])
  552.                   //console.log(fruits);
  553.  
  554.                   //console.log(typeof(fruits));
  555.               }
  556.  
  557.           });
  558.  
  559.                         //console.log("charakteru masīvs", this.myMans);
  560.  
  561.           for (var i = 0; i < fruits2.length - 1; i++) {
  562.           //console.log("womeni2", myMans2[i]);
  563.  
  564.  
  565.               if (this.myMans[i] && this.myMans[i].body) {
  566.                   /**
  567.                    * Update Controls
  568.                    */
  569.                   this.controls.update(this.moveRight * 2, -this.moveTop * 2)
  570.                   if (!isTouchDevice) this.moveRight = this.moveTop = 0
  571.                   /**
  572.                    * Player Turn
  573.                    */
  574.                   const speed = 4
  575.                   const v3 = new THREE.Vector3()
  576.  
  577.  
  578.  
  579.                   /////console.log(time);
  580.                   //if(time % 55 == 0){
  581.                   //console.log(5000);
  582.  
  583.                   ///{"x":0.9991227572113053,"y":0,"z":0.04187739273736313}
  584.                   //{
  585.                   //"x": -0.9994445004172535,
  586.                   //"y": 0,
  587.                   //"z": -0.03332702485530725
  588.                   //}
  589.  
  590.  
  591.                   setTimeout(function () {
  592.  
  593.                       var locatedata = JSON.stringify(v3);
  594.  
  595.  
  596.  
  597.                       $.post(
  598.                           "postlocation.php", {
  599.                               locatedata: locatedata
  600.                           },
  601.                           function (data) {
  602.  
  603.                               //console.log("izsaukta", v3);
  604.                           }
  605.                       );
  606.  
  607.  
  608.                   }, 10000);
  609.  
  610.                   //}
  611.  
  612.  
  613.                   // iegūtos rotācijas datus ievieto šeit ja nav jau iegūti manuāli
  614.  
  615.                   const rotation = this.third.camera.getWorldDirection(v3)
  616.  
  617.                   //gadijumā ja ir jau izveidoti updeito datubāzi
  618.  
  619.  
  620.                   const theta = Math.atan2(rotation.x, rotation.z)
  621.                   const rotationMan = this.myMans[i].getWorldDirection(v3)
  622.                  
  623.                  
  624.                   const thetaMan = Math.atan2(rotationMan.x, rotationMan.z)
  625.                  
  626.                  
  627.                   this.myMans[i].body.setAngularVelocityY(0)
  628.  
  629.                   const l = Math.abs(theta - thetaMan)
  630.                   let rotationSpeed = isTouchDevice ? 2 : 4
  631.                   let d = Math.PI / 24
  632.  
  633.                   if (l > d) {
  634.                   if (l > Math.PI - d) rotationSpeed *= -1
  635.                   if (theta < thetaMan) rotationSpeed *= -1
  636.                   this.myMans[i].body.setAngularVelocityY(rotationSpeed)
  637.                   }
  638.  
  639.                   /**
  640.                   * Player Move
  641.                   */
  642.                   if (this.keys.w.isDown || this.move) {
  643.                   if (this.myMans[i].animation.current === 'idle' && this.canJump) this.myMans[i].animation.play('run')
  644.  
  645.                   const x = Math.sin(theta) * speed,
  646.                   y = this.myMans[i].body.velocity.y,
  647.                   z = Math.cos(theta) * speed
  648.  
  649.                   //iegūtos ātruma datus iegūst no datubāzes
  650.                   this.myMans[i].body.setVelocity(x, y, z)
  651.                   //gadijumā ja ir izveidoti updeito datubāzi ar tiem
  652.  
  653.  
  654.                   } else {
  655.                                           //console.log("aniam", this.myMans[i].animation);
  656.                   if (this.myMans[i].animation.current === 'run' && this.canJump) this.myMans[i].animation.play('idle')
  657.                   }
  658.  
  659.                   /**
  660.                   * Player Jump
  661.                   */
  662.                   if (this.keys.space.isDown && this.canJump) {
  663.                   this.jump()
  664.                   }
  665.                   }
  666.                   }
  667.  
  668.  
  669.         //console.log("globals masivs ar cilvekiem", this.myMans.length);
  670.  
  671.               }
  672.  
  673.           }
  674.  
  675.  
  676.       const config = {
  677.         type: Phaser.WEBGL,
  678.         transparent: true,
  679.         scale: {
  680.           mode: Phaser.Scale.FIT,
  681.           autoCenter: Phaser.Scale.CENTER_BOTH,
  682.           width: window.innerWidth * Math.max(1, window.devicePixelRatio / 2),
  683.           height: window.innerHeight * Math.max(1, window.devicePixelRatio / 2)
  684.         },
  685.         scene: [MainScene],
  686.         ...Canvas({ antialias: false })
  687.       }
  688.  
  689.       window.addEventListener('load', () => {
  690.         enable3d(() => new Phaser.Game(config)).withPhysics('/lib/ammo/kripken')
  691.       })
  692.      
  693.      
  694.       //////////wqtttwrf
  695.     </script>
  696.   </body>
  697. </html>
  698.  
  699.