Wolan1995

SAM | Klient (09.06.2017)

Jun 9th, 2017
81
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <meta charset="utf-8">
  5.   <title>Multiplayer Game</title>
  6. </head>
  7. <body>
  8.   <!-- Include latest version of PIXI.js from the web -->
  9.   <!-- <script src="https://pixijs.download/release/pixi.min.js"></script> -->
  10.   <!-- Include PIXI localy (v4.5.1) -->
  11.   <script src="pixi.js/pixi.min.js"></script>
  12.     <script>
  13.     //var wsUri = "ws://10.104.111.83:8080/EchoChamber/echo/1";
  14.     var wsUri = "ws://localhost:8080/EchoChamber/echo/1";
  15.       var rAFID;
  16.       var playerArray = new Array()
  17.         var startGRY = 0;
  18.       var webSocket;
  19.         var inter;
  20.         var inter1;
  21.       var degreesPerSecond = 30;
  22.       var previousTime = 0;
  23.         var pozycjeGRACZY;
  24.         var konwersja;
  25.       var whichPlayerAmI = 0;
  26.      
  27.       var playerMoveLeft, playerMoveRight, playerMoveUp, playerMoveDown;
  28.       var c;
  29.       var app
  30.      
  31.       var playerArray = new Array()
  32.       var projectilesArray = new Array();
  33.       var scoreArray = new Array();
  34.       var scoreDisplayMessages = new Array();
  35.  
  36.       var left, right;
  37.  
  38.       function init()
  39.       {
  40.      
  41.         testWebSocket();
  42.      
  43.         app = new PIXI.Application(800, 600, {backgroundColor : 0x1099bb});
  44.         document.body.appendChild(app.view);
  45.        
  46.         setUpScores();
  47.         setUpKeyboard();
  48.         setUpSprites();
  49.  
  50.        
  51.  
  52.  
  53.  
  54.         rAFID = requestAnimationFrame(draw)
  55.  
  56.         // // Listen for animate update
  57.         // app.ticker.add(function(delta) {
  58.         // // just for fun, let's rotate mr rabbit a little
  59.         // // delta is 1 if running at 100% performance
  60.         // // creates frame-independent tranformation
  61.         // bunny.rotation += 0.1 * delta;
  62.         // });
  63.       }
  64.      
  65.         ///////////////////////////NOWE///////////////////
  66.         function testWebSocket()
  67.         {
  68.             websocket = new WebSocket(wsUri);
  69.            
  70.             //Two ways of registering events, addEventListener is prefered - can attach multiple handlers to single event
  71.             // websocket.onopen = function(evt) { onOpen(evt) };
  72.             // websocket.onmessage = function(evt) { onMessage(evt) };
  73.             // websocket.onclose = function(evt) { onClose(evt) };
  74.             // websocket.onerror = function(evt) { onError(evt) };
  75.            
  76.             websocket.addEventListener("open", onOpen, false);
  77.             websocket.addEventListener("close", onClose, false);
  78.             websocket.addEventListener("message", onMessage, false);
  79.             websocket.addEventListener("error", onError, false);
  80.  
  81.         }
  82.        
  83.         function onError(evt)
  84.         {
  85.             writeToConsole(evt.data);
  86.         }
  87.        
  88.         function onMessage(evt)
  89.         {
  90.             c = JSON.parse(evt.data);
  91.  
  92.  
  93.                 if (c.Info == "start" ) {
  94.                     whichPlayerAmI = c.Gracz;
  95.                     writeToConsole(c.Gracz);
  96.                     writeToConsole("przypisano gracza");
  97.                     startGRY=1;;
  98.                 }
  99.  
  100.  
  101.             /*if ((evt.data == 0) || (evt.data == 1) || (evt.data == 2) || (evt.data == 3))
  102.             whichPlayerAmI = evt.data;
  103.             if (evt.data == "start") {
  104.                 startGRY = 1;
  105.  
  106.                
  107.  
  108.             } */
  109.             if (startGRY == 1) {
  110.                 if (c.Info == "ruch" ) {
  111.                     if (c.Gracz == "0") {
  112.                         playerArray[0].x = c.x;
  113.                         playerArray[0].y = c.y;
  114.                     }
  115.                     if (c.Gracz == "1") {
  116.                         playerArray[1].x = c.x;
  117.                         playerArray[1].y = c.y;
  118.                     }
  119.                     if (c.Gracz == "2") {
  120.                         playerArray[2].x = c.x;
  121.                         playerArray[2].y = c.y;
  122.                     }
  123.                     if (c.Gracz == "3") {
  124.                         playerArray[3].x = c.x;
  125.                         playerArray[3].y = c.y;
  126.                     }
  127.                 }
  128.             }
  129.  
  130.                        
  131.             //writeToConsole(evt.data);
  132.         }
  133.        
  134.         function doSend(message) {
  135.  
  136.             //writeToConsole("SENT: " + message);
  137.             websocket.send(message);
  138.         }
  139.        
  140.         function getPosition() {
  141.             pozycjeGRACZY = { "Info" : "ruch", "Gracz" : whichPlayerAmI, "x" : playerArray[whichPlayerAmI].x, "y" : playerArray[whichPlayerAmI].y}
  142.             konwersja = JSON.stringify(pozycjeGRACZY);
  143.         }
  144.        
  145.         function writeToConsole(message)
  146.         {
  147.             console.log(message);
  148.         }
  149.        
  150.         function onOpen(evt)
  151.         {
  152.             var start = { "Info" : "gotowy"}
  153.             var startJSON = JSON.stringify(start);
  154.             writeToConsole("CONNECTED");
  155.             //doSend("halo");
  156.             doSend(startJSON);
  157.         }
  158.        
  159.         function onClose(evt)
  160.         {
  161.             writeToConsole("DISCONNECTED");
  162.         }
  163.         ///////////////////////////NOWE///////////////////
  164.         function draw(timestamp) {
  165.  
  166.         var nowTime = window.performance.now();
  167.         var delta = nowTime - previousTime;
  168.        
  169.         updateCollisions();
  170.        
  171.         var radiansPerSecond = degreesPerSecond * 3.1415/180;
  172.         for(i=0; i<4; i++)
  173.         {
  174.           //playerArray[i].rotation += (radiansPerSecond * (delta/1000) );
  175.  
  176.           playerArray[i].x += playerArray[i].vx;
  177.           playerArray[i].y += playerArray[i].vy;
  178.          
  179.                     scoreArray[i] = Math.round(playerArray[i].rotation);
  180.  
  181.         }
  182.        
  183.         updateScores();
  184.        
  185.  
  186.         requestAnimationFrame(draw);
  187.         previousTime = window.performance.now();
  188.        
  189.          if (startGRY == 1) {
  190.  
  191.          getPosition();
  192.          doSend(konwersja);
  193.                 //inter1 = setInterval (function () { getPosition(); }, 20);
  194.                 //inter = setInterval (function () { doSend(konwersja); }, 30);
  195.         }
  196.       }
  197.      
  198.         function setUpScores()
  199.         {
  200.           for( i=0; i< 4; i++)
  201.             {
  202.                 scoreArray[i] = 0;
  203.                 scoreDisplayMessages[i] = new PIXI.Text("P" + i + ": " + scoreArray[i],
  204.                           {fontFamily: "Arial", fontSize: 32, fill: "white"});
  205.                 scoreDisplayMessages[i].position.set((i* (0.25) * app.renderer.width),0 );
  206.                 app.stage.addChild(scoreDisplayMessages[i]);
  207.  
  208.             }
  209.  
  210.  
  211.         }
  212.        
  213.         function setUpSprites()
  214.         {
  215.           // create a new Sprite from an image path
  216.              playerArray.push (PIXI.Sprite.fromImage('explorer.png' ));
  217.              playerArray.push (PIXI.Sprite.fromImage('Wizard_Base.png'));
  218.              playerArray.push (PIXI.Sprite.fromImage('Rogue_Base.png'));
  219.              playerArray.push (PIXI.Sprite.fromImage('Templar_Base.png'));
  220.  
  221.              projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
  222.              projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
  223.              projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
  224.              projectilesArray.push(PIXI.Sprite.fromImage('projectile.png'));
  225.  
  226.  
  227.             // 4 players and 4 bullets - simplification
  228.              for ( i=0; i<4; i++)
  229.              {
  230.                app.stage.addChild(playerArray[i]);
  231.                playerArray[i].anchor.set(0.5);
  232.                playerArray[i].scale.set(2,2);
  233.                playerArray[i].vx = 0;
  234.                playerArray[i].vy = 0;
  235.  
  236.                projectilesArray[i].anchor.set(0.5);
  237.                projectilesArray[i].scale.set(2,2);
  238.                projectilesArray[i].vx = 0;
  239.                projectilesArray[i].vy = 0;
  240.                projectilesArray[i].x = -100;
  241.                projectilesArray[i].y = -100;
  242.  
  243.  
  244.              }
  245.            
  246.  
  247.              playerArray[0].x = app.renderer.width / 4;
  248.              playerArray[0].y = app.renderer.height / 4;
  249.  
  250.              playerArray[1].x = app.renderer.width * 3/4;
  251.              playerArray[1].y = app.renderer.height / 4;
  252.  
  253.              playerArray[2].x = app.renderer.width / 4;
  254.              playerArray[2].y = app.renderer.height * 3/4;
  255.  
  256.              playerArray[3].x = app.renderer.width * 3/4;
  257.              playerArray[3].y = app.renderer.height * 3/4;
  258.         }
  259.        
  260.         function setUpKeyboard() {
  261.        playerMoveLeft = keyboard(65);
  262.          playerMoveRight = keyboard(68);
  263.          playerMoveUp = keyboard(87);
  264.          playerMoveDown = keyboard(83);
  265.  
  266.  
  267.         //Right
  268.         playerMoveRight.press = function() {
  269.           playerArray[whichPlayerAmI].vx = 5;
  270.            playerArray[whichPlayerAmI].vy = 0;
  271.         };
  272.         playerMoveRight.release = function() {
  273.           if (!playerMoveLeft.isDown &&  playerArray[whichPlayerAmI].vy === 0) {
  274.              playerArray[whichPlayerAmI].vx = 0;
  275.           }
  276.         };
  277.  
  278.       //Left arrow key `press` method
  279.         playerMoveLeft.press = function() {
  280.            playerArray[whichPlayerAmI].vx = -5;
  281.            playerArray[whichPlayerAmI].vy = 0;
  282.         };
  283.  
  284.         //Left arrow key `release` method
  285.         playerMoveLeft.release = function() {
  286.           if (!playerMoveRight.isDown &&  playerArray[whichPlayerAmI].vy === 0) {
  287.              playerArray[whichPlayerAmI].vx = 0;
  288.           }
  289.         };
  290.  
  291.         //Up
  292.         playerMoveUp.press = function() {
  293.           playerArray[whichPlayerAmI].vy = -5;
  294.           playerArray[whichPlayerAmI].vx = 0;
  295.         };
  296.         playerMoveUp.release = function() {
  297.           if (!playerMoveDown.isDown && playerArray[whichPlayerAmI].vx === 0) {
  298.             playerArray[whichPlayerAmI].vy = 0;
  299.           }
  300.         };
  301.  
  302.         //Down
  303.         playerMoveDown.press = function() {
  304.           playerArray[whichPlayerAmI].vy = 5;
  305.           playerArray[whichPlayerAmI].vx = 0;
  306.         };
  307.         playerMoveDown.release = function() {
  308.           if (!playerMoveUp.isDown && playerArray[whichPlayerAmI].vx === 0) {
  309.             playerArray[whichPlayerAmI].vy = 0;
  310.           }
  311.         };
  312.     }
  313.  
  314.  
  315.     //run the function only after the whole page has been loaded
  316.     window.addEventListener("load", init, false);
  317.  
  318.  
  319.     function keyboard(keyCode)
  320.     {
  321.       var key = {};
  322.       key.code = keyCode;
  323.       key.isDown = false;
  324.       key.isUp = true;
  325.       key.press = undefined;
  326.       key.release = undefined;
  327.       //The `downHandler`
  328.       key.downHandler = function(event) {
  329.         if (event.keyCode === key.code) {
  330.           if (key.isUp && key.press) key.press();
  331.           key.isDown = true;
  332.           key.isUp = false;
  333.         }
  334.         event.preventDefault();
  335.       };
  336.  
  337.       //The `upHandler`
  338.       key.upHandler = function(event) {
  339.         if (event.keyCode === key.code) {
  340.           if (key.isDown && key.release) key.release();
  341.           key.isDown = false;
  342.           key.isUp = true;
  343.         }
  344.         event.preventDefault();
  345.        
  346.       };
  347.  
  348.       //Attach event listeners
  349.       window.addEventListener(
  350.         "keydown", key.downHandler.bind(key), false
  351.       );
  352.       window.addEventListener(
  353.         "keyup", key.upHandler.bind(key), false
  354.       );
  355.       return key;
  356.     }
  357.    
  358.     function updateScores()
  359. {
  360.   //TODO: CHANGE IMPLEMENTATION
  361.   for( i=0; i< 4; i++)
  362.         {
  363.             scoreDisplayMessages[i].text = "P" + i + ": " + scoreArray[i];
  364.         }
  365. }
  366.  
  367. function updateCollisions()
  368. {
  369.   //UPDATING COLLISIONS - TODO
  370. }
  371.  
  372.     window.addEventListener("load", init, false);
  373.    
  374.                 //if (startGRY == 1) {
  375.                         //var inter = setInterval (function () { doSend("kupa"); }, 1000);
  376.  
  377.                 //var c = JSON.parse(evt.data);
  378.             //}
  379.  
  380.    
  381.   </script>
  382. </body>
  383. </html>
RAW Paste Data