SHARE
TWEET

Untitled

a guest Apr 21st, 2017 48 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var
  2.     /**
  3.      * Constants
  4.      */
  5.     WIDTH = 700,
  6.     HEIGHT = 600,
  7.     pi = Math.PI,
  8.     UpArrow = 38,
  9.     DownArrow = 40,
  10.     Space = 32,
  11.     games,
  12.     userBallSpeedsArray = [],
  13.     //Array containing speed var values
  14.  
  15.     gameVars = [],
  16.  
  17.     speedValues = [6, 8],//, 10, 12, 15, 17, 6, 8, 10, 12, 15, 17],
  18.     //Array containing player height values
  19.     heightValues = [60, 100, 250],
  20.  
  21.     //Array time elapsed
  22.     c = [],
  23.     //Array for input user
  24.     iu = [],
  25.     //var used for storing at db
  26.     dba,
  27.     dbb,
  28.     // var used to count amount of games
  29.     nmbrGame = 1,
  30. //var used to calculate elapsed time
  31.     startTime,
  32.     endTime,
  33.     timeDiff,
  34.     //var used for older browser versions
  35.     requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame,
  36.  
  37.     //var used to pause game when ball leaves field
  38.     nonMotionBall = true,
  39.     //var used to mark end of a game
  40.     gameOver = false,
  41.     /**
  42.      * Game elements
  43.      */
  44.     canvas,
  45.     ctx,
  46.     keystate,
  47.  
  48.     // The player paddle
  49.     player = {
  50.         x: null,
  51.         y: null,
  52.         width: 20,
  53.         height: 100,
  54.         // Update the position depending on pressed keys
  55.         update: function () {
  56.             if (keystate[UpArrow]) this.y -= 7;
  57.             if (keystate[DownArrow]) this.y += 7;
  58.             // keep the paddle inside of the canvas
  59.             this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
  60.         },
  61.         // Draw the player paddle to the canvas
  62.         draw: function () {
  63.             ctx.fillRect(this.x, this.y, this.width, this.height);
  64.         }
  65.     },
  66.  
  67.     // The ai paddle
  68.     ai = {
  69.         x: null,
  70.         y: null,
  71.         width: 20,
  72.         height: 100,
  73.         /**
  74.          * Update the position depending on the ball position
  75.          */
  76.         update: function () {
  77.             // calculate ideal position
  78.             var desty = ball.y - (this.height - ball.side) * 0.5;
  79.             // ease the movement towards the ideal position
  80.             this.y += (desty - this.y);
  81.             // keep the paddle inside of the canvas
  82.             this.y = Math.max(Math.min(this.y, HEIGHT - this.height), 0);
  83.         },
  84.         /**
  85.          * Draw the ai paddle to the canvas
  86.          */
  87.         draw: function () {
  88.             ctx.fillRect(this.x, this.y, this.width, this.height);
  89.         }
  90.     },
  91.  
  92.     // The ball object
  93.     ball = {
  94.         x: null,
  95.         y: null,
  96.         vel: null,
  97.         side: 20,
  98.         speed: 17,
  99.  
  100.         // Serves the ball towards the specified side
  101.         serve: function (side) {
  102.             // set the x and y position
  103.             this.x = (WIDTH / 2);
  104.             this.y = (HEIGHT / 2);
  105.             // calculate out-angle, higher/lower on the y-axis =>
  106.             // steeper angle
  107.             var phi = 0.1 * pi;
  108.             // set velocity direction and magnitude
  109.             this.vel = {
  110.                 x: side * this.speed * Math.cos(phi),
  111.                 y: this.speed * Math.sin(phi),
  112.             }
  113.  
  114.         },
  115.  
  116.         // Update the ball position and keep it within the canvas
  117.         updateMotion: function () {
  118.             // update position with current velocity
  119.             this.x += this.vel.x;
  120.             this.y += this.vel.y;
  121.             // check if out of the canvas in the y direction
  122.             if (0 > this.y || this.y + this.side > HEIGHT) {
  123.                 // calculate and add the right offset, i.e. how far
  124.                 // inside of the canvas the ball is
  125.                 var offset = this.vel.y < 0 ? 0 - this.y : HEIGHT - (this.y + this.side);
  126.                 this.y += 2 * offset;
  127.                 // mirror the y velocity
  128.                 this.vel.y *= -1;
  129.             }
  130.             // helper function to check intesectiont between two
  131.             // axis aligned bounding boxex (AABB)
  132.             var AABBIntersect = function (ax, ay, aw, ah, bx, by, bw, bh) {
  133.                 return ax < bx + bw && ay < by + bh && bx < ax + aw && by < ay + ah;
  134.             };
  135.             // check against target paddle to check collision in x
  136.             // direction
  137.             var pdle = this.vel.x < 0 ? player : ai;
  138.             if (AABBIntersect(pdle.x, pdle.y, pdle.width, pdle.height,
  139.                     this.x, this.y, this.side, this.side)
  140.             ) {
  141.                 // set the x position and calculate reflection angle
  142.                 this.x = pdle === player ? player.x + player.width : ai.x - this.side;
  143.                 var n = (this.y + this.side - pdle.y) / (pdle.height + this.side);
  144.                 var phi = 0.25 * pi * (2 * n - 1); // pi/4 = 45
  145.                 // calculate smash value and update velocity
  146.                 var smash = Math.abs(phi) > 0.2 * pi ? 1.5 : 1;
  147.                 this.vel.x = smash * (pdle === player ? 1 : -1) * this.speed * Math.cos(phi);
  148.                 this.vel.y = smash * this.speed * Math.sin(phi);
  149.             }
  150.             // Actions taken when ball leaves canvas
  151.             if (0 > this.x + this.side || this.x > WIDTH) {
  152.                 keystate[UpArrow] = false;
  153.                 keystate[DownArrow] = false;
  154.  
  155.                 logNumber();
  156.  
  157.                 nonMotionBall = true;
  158.                 endTime = new Date().getTime();
  159.                 timeDiff = endTime - startTime;
  160.                 c.push(timeDiff);
  161.                 if (gameVars.length == 0 && nmbrGame == 6) {
  162.                     writeGameData();
  163.                     window.location = "bedanking.html";
  164.  
  165.                 } else if (gameVars.length == 0 && nmbrGame != 6) {
  166.                     makeGameVars();
  167.                     nmbrGame++;
  168.                     gameOver = true;
  169.                 }
  170.             }
  171.         },
  172.  
  173.         //pauses the balls movement en resets it
  174.         updateNonMotion: function () {
  175.  
  176.             this.x = (WIDTH / 2);
  177.             this.y = (HEIGHT / 2);
  178.             if (keystate[Space] && gameVars.length != 0) {
  179.                 gameOver = false;
  180.                 start();
  181.             }
  182.             if (keystate[Space] && gameOver) {
  183.                 alert(gameVars.length);
  184.             }
  185.         },
  186.  
  187.         // Draw the ball to the canvas
  188.         draw: function () {
  189.             ctx.fillRect(this.x, this.y, this.side, this.side);
  190.         }
  191.     };
  192.  
  193. //Shuffle arrays with speed and height values;
  194. shuffle(gameVars);
  195.  
  196. function logNumber() {
  197.     goedCijfer = false;
  198.     cijfer = -1;
  199.     while (!goedCijfer) {
  200.         cijfer = window.prompt("Gelieve de geschatte snelheid van de bal in te voeren. \nWaarden tussen 1 en 6 (grenzen inbegrepen) worden aanvaard.");
  201.         if (cijfer >= 1 && cijfer <= 6) {
  202.             goedCijfer = true;
  203.         }
  204.     }
  205.     cijfer.trim();
  206.     userBallSpeedsArray.push(cijfer);
  207.     cijfer = -1;
  208. }
  209.  
  210. /**
  211.  * Starts the game
  212.  */
  213. function main() {
  214.     // create, initiate and append game canvas
  215.     canvas = document.createElement("canvas");
  216.     canvas.width = WIDTH;
  217.     canvas.height = HEIGHT;
  218.     ctx = canvas.getContext("2d");
  219.     document.body.appendChild(canvas);
  220.     keystate = {};
  221.     // keep track of keyboard presses
  222.     document.addEventListener("keydown", function (evt) {
  223.         keystate[evt.keyCode] = true;
  224.     });
  225.     document.addEventListener("keyup", function (evt) {
  226.         delete keystate[evt.keyCode];
  227.     });
  228.  
  229.     makeGameVars();
  230.  
  231.     // game loop function
  232.     loop();
  233.  
  234.     requestAnimationFrame(loop);
  235.  
  236. }
  237. /**
  238.  * Loop animations */
  239. function loop() {
  240.     update();
  241.     draw();
  242.     requestAnimationFrame(loop);
  243. };
  244.  
  245. // Fill gameVars with speed & height values & shuffle
  246. function makeGameVars() {
  247.     //speeds = [6]; // debug vars
  248.     //heights = [60, 100];
  249.     speeds = [6, 8, 10, 12, 15, 17];
  250.     heights = [60, 100, 250];
  251.     for (i = 0; i < speeds.length; i++) {
  252.         for (j = 0; j < heights.length; j++) {
  253.             gameVars.push({"speed": speeds[i], "height": heights[j]});
  254.             gameVars.push({"speed": speeds[i], "height": heights[j]});
  255.         }
  256.     }
  257.     shuffle(gameVars);
  258. }
  259.  
  260. /**
  261.  * Initatite game objects and set start positions
  262.  */
  263. function init() {
  264.     //Change ballspeed to random value
  265.     ball.speed = gameVars[gameVars.length - 1].speed;
  266.  
  267.     if (gameVars.length == 0) {
  268.         gameOver = true;
  269.     } else {
  270.         player.height = gameVars[gameVars.length - 1].height;
  271.         gameVars.pop();
  272.     }
  273.  
  274.     player.x = player.width;
  275.     player.y = (HEIGHT - player.height) / 2;
  276.     ai.x = WIDTH - (player.width + ai.width);
  277.     ai.y = (HEIGHT - ai.height) / 2;
  278.     ball.serve(1);
  279.     startTime = new Date().getTime();
  280.  
  281. }
  282. /**
  283.  * Update all game objects
  284.  */
  285. function update() {
  286.     if (nonMotionBall) {
  287.         ball.updateNonMotion();
  288.     } else {
  289.         ball.updateMotion();
  290.     }
  291.     player.update();
  292.     ai.update();
  293. }
  294. /**
  295.  * shuffles the arrays
  296.  */
  297. function shuffle(a) {
  298.     var j, x, i;
  299.     for (i = a.length; i > 0; i--) {
  300.         j = Math.floor(Math.random() * i);
  301.         x = a[i - 1];
  302.         a[i - 1] = a[j];
  303.         a[j] = x;
  304.  
  305.     }
  306.  
  307. }
  308. /**
  309.  * Clear canvas and draw all game objects and net
  310.  */
  311. function draw() {
  312.     ctx.fillRect(0, 0, WIDTH, HEIGHT);
  313.     ctx.save();
  314.     ctx.fillStyle = "#fff";
  315.     if (!nonMotionBall) {
  316.         ball.draw();
  317.         player.draw();
  318.         ai.draw();
  319.         // draw the net
  320.         var w = 4;
  321.         var x = (WIDTH - w) * 0.5;
  322.         var y = 0;
  323.         var step = HEIGHT / 20;
  324.         while (y < HEIGHT) {
  325.             ctx.fillRect(x, y + step * 0.25, w, step * 0.5);
  326.             y += step;
  327.         }
  328.     }
  329.     if (nonMotionBall && gameVars.length != 0 && !gameOver) {
  330.         ctx.font = "30px Verdana";
  331.         ctx.fillText("Druk op spatie om te starten !", 120, 280);
  332.         ctx.fillText("Gebruik pijltjes toetsen om balk te besturen!", 20, 320);
  333.  
  334.     }
  335.     if (nonMotionBall && gameOver) {
  336.         ctx.font = "30px Verdana";
  337.         ctx.fillText("Game Over!", 250, 280);
  338.         ctx.fillText("Druk spatie om te herbeginnen", 120, 320);
  339.     }
  340.     ctx.restore();
  341. }
  342.  
  343. //starts game
  344. function start() {
  345.     nonMotionBall = false;
  346.     init();
  347. }
  348.  
  349. // start and run the game
  350. main();
RAW Paste Data
Pastebin PRO Summer Special!
Get 40% OFF on Pastebin PRO accounts!
Top