pong.js Example File | Qt Script

Qt 5.6 | Qt Script | Context2D Example | pong.js Example File

Qt 5.6.2 Reference Documentation

# pong.js Example File

script/context2d/scripts/pong.js

      // globals
      playarea_canvas = document.getElementById('tutorial');
      playarea_canvas.resize(320,200);
      playarea = playarea_canvas.getContext('2d');
      //p1_scr = document.getElementById('p1_scr');
      //p2_scr = document.getElementById('p2_scr');
      //status_msg = document.getElementById('status');
      //debug = document.getElementById('debug');
      ball_direction = 0;
      up = -1;
      down = 1;

      //key codes
      key_up = 38;
      key_down = 40;
      key_W = 87;
      key_S = 83;
      key_pause = 32;

      speed = 2;                      //controls the speed of the ball
      paddle_inc = 10;        //how many pixels paddle can move in either direction
      pause = false;

      player_1 = 0;           //player IDs
      player_2 = 1;
      player_1_scr = 0;       //player scores
      player_2_scr = 0;
      player_1_direction = null;      //null = no movement whatsoever
      player_2_direction = null;

      pa = new Array();
      divider = new Array();
      paddle_1 = new Array();
      paddle_2 = new Array();
      ball = new Array();

      function sleep(numberMillis)
      {
          var now = new Date();
          var exitTime = now.getTime() + numberMillis;
          while (true) {
              now = new Date();
              if (now.getTime() > exitTime)
                  return;
          }
      }

      function init()
      {
          pa['width'] = 150;
          pa['height'] = 140;
          pa['player_margin'] = 10;           //area behind player paddles
          pa['foreground'] = "#FFFFFF";
          pa['background'] = "#000000";

          divider['pos'] = pa['width']/2;
          divider['width'] = 4;

          paddle_1['width'] = 8;
          paddle_1['height'] = 64;
          paddle_1['x'] = pa['player_margin'];
          paddle_1['y'] = (pa['height'] /2 ) - (paddle_1['height'] / 2);

          paddle_2['width'] = 8;
          paddle_2['height'] = 64;
          paddle_2['x'] = (pa['width'] - pa['player_margin'] - paddle_2['width']);
          paddle_2['y'] = (pa['height'] /2 ) - (paddle_2['height'] / 2);

          ball['width'] = 10;
          ball['height'] = 10;
          ball['x'] = (pa['width']/2) - (ball['width'] / 2);
          ball['y'] = (pa['height']/2) - (ball['height'] / 2);

          ball_direction = Math.random() * 360;       //initialize ball direction, which is determined by angle, at random
          speed = 2;
      }

      function renderPlayarea()
      {
          playarea.beginPath();

          playarea.clearRect(0,0,pa['width'],pa['height']);
          playarea.fillStyle = pa['background'];
          playarea.strokeStyle = pa['foreground'];
          playarea.fillRect(0,0, pa['width'], pa['height']);

          //move paddles
          if(player_1_direction != null)
              {
                  if(player_1_direction == up)
                      paddle_1['y'] = paddle_1['y'] - paddle_inc;
                  else
                      paddle_1['y'] = paddle_1['y'] + paddle_inc;
              }
          if(player_2_direction != null)
              {
                  if(player_2_direction == up)
                      paddle_2['y'] = paddle_2['y'] - paddle_inc;
                  else
                      paddle_2['y'] = paddle_2['y'] + paddle_inc;
              }
          playarea.rect(paddle_1['x'],paddle_1['y'],paddle_1['width'],paddle_1['height']);
          playarea.rect(paddle_2['x'],paddle_2['y'],paddle_2['width'],paddle_2['height']);

          //move ball
          playarea.rect(ball['x'], ball['y'], ball['width'], ball['height']);
          ball['x'] = ball['x'] + Math.cos((ball_direction)*Math.PI/180) * speed;
          ball['y'] = ball['y'] + Math.sin((ball_direction)*Math.PI/180) * speed;

          playarea.fillStyle = pa['foreground'];
          playarea.fill();

          playarea.beginPath();
          //redraw divider
          playarea.lineWidth = divider['width'];
          playarea.lineTo(divider['pos'], 0);
          playarea.lineTo(divider['pos'], pa['height'] = 200);
          playarea.lineWidth = 1;

          playarea.stroke();
          playarea.closePath();
      }

      function testCollisions()
      {
          //make sure paddles don't go beyond play area
          if(((paddle_1['y'] <= 0) && (player_1_direction == up)) || ((paddle_1['y'] >= (pa['height'] - paddle_1['height'])) && (player_1_direction == down)))
              player_1_direction = null;
          if(((paddle_2['y'] <= 0) && (player_2_direction == up)) || ((paddle_2['y'] >= (pa['height'] - paddle_2['height'])) && (player_2_direction == down)))
              player_2_direction = null;

          //check to see if ball went beyond paddles, and if so, score accordingly and reset playarea
          if(ball['x'] <= 0)
              {
                  setScore(player_2);
                  init()
                      sleep(1000);
              }
          if(ball['x'] >= (pa['width'] - ball['width']))
              {
                  setScore(player_1);
                  init();
                  sleep(1000);
              }

          //check to see if ball hit top or bottom wall. if so, change direction
          if((ball['y'] >= (pa['height'] - ball['height'])) || ball['y'] <= 0)
              ball_direction = -ball_direction;

          //check to see if the ball hit a paddle, and if so, change ball angle dependant on where it hit the paddle
          if((ball['x'] <= (paddle_1['x'] + paddle_1['width'])) && (ball['y'] >= paddle_1['y']) && (ball['y'] <= (paddle_1['y'] + paddle_1['height'])))
              {
                  ball_direction = -ball_direction/2;
                  speed += .5;
              }
          if(((ball['x'] + ball['width']) >= paddle_2['x']) && (ball['y'] >= paddle_2['y']) && (ball['y'] <= (paddle_2['y'] + paddle_2['height'])))
              {
                  ball_direction = (180+ball_direction)/2;
                  speed += .5;
              }
      }

      function setScore(p)
      {
          if(p == player_1)
              {
                  player_1_scr++;
                  //p1_scr.firstChild.nodeValue = player_1_scr;
              }
          if(p == player_2)
              {
                  player_2_scr++;
                  //p2_scr.firstChild.nodeValue = player_2_scr;
              }
      }

      //handle input
      document.onkeydown = function(ev)
      {
          switch(ev.keyCode)
          {
              case key_W:
              player_1_direction = up;
              break;
              case key_S:
              player_1_direction = down;
              break;
              case key_up:
              player_2_direction = up;
              break;
              case key_down:
              player_2_direction = down;
              break;
          }
      }

      document.onkeyup = function(ev)
      {
          switch(ev.keyCode)
          {
              case key_W:
              case key_S:
              player_1_direction = null;
              break;
              case key_up:
              case key_down:
              player_2_direction = null;
              break;
              case key_pause:
              if(pause == false)
              {
                  clearInterval(game);
                  //status_msg.style.visibility = "visible";
                  pause = true;
              }
              else
              {
                  game = setInterval(main, 25);
                  //status_msg.style.visibility = "hidden";
                  pause = false;
              }
              break;
          }
      }

      function main()
      {
          testCollisions();
          renderPlayarea();
      }

      init();
      game = setInterval(main, 25);