0.5.x/javascripts/pongame.js

   1 /*\r
   2  * http://learning-computer-programming.blogspot.jp/2009/09/simple-pong-game-using-javascript.html
   3  */\r
   4 \r
   5 ( function( gOS, window ) {\r
   6         gOS.registerApplication( function() {\r
   7                 // CHANGE THESE, IF REQUIRED\r
   8                 var Speed = 5;\r
   9                 // Speed of ball (pixels/step)\r
  10                 var CPUSpeed = 5;\r
  11                 // Speed of CPU Paddle (pixels/step)\r
  12 \r
  13                 // Short references to objects\r
  14                 var paddle1;\r
  15                 var paddle2;\r
  16                 var ball;\r
  17                 var box;\r
  18                 var msg;\r
  19                 var close;\r
  20                 \r
  21                 // For internal use\r
  22                 var dx, dy;\r
  23                 // Speed in x and y directions\r
  24                 var ballX, ballY;\r
  25                 // x and y positions of ball\r
  26                 var playerY;\r
  27                 // y position of player paddle (x fixed)\r
  28 \r
  29                 var cpuY;\r
  30                 // y position of CPU paddle (x fixed)\r
  31                 var iID;\r
  32                 // To store ID of set interval used to clear it when required\r
  33 \r
  34                 // Attach a function to onLoad event\r
  35 \r
  36                 // INITIALIZE GAME OBJECTS\r
  37                 function Init() {\r
  38                         // Make short refrences to objects\r
  39 \r
  40                         paddle1 = document.getElementById('paddle1');\r
  41                         paddle2 = document.getElementById('paddle2');\r
  42                         ball    = document.getElementById('ball');\r
  43                         box     = document.getElementById('box');\r
  44                         msg     = document.getElementById('msg').firstChild;\r
  45                         close   = document.getElementById('pon-close');\r
  46                         // Initial values\r
  47                         ballX   = (box.offsetWidth / 2) - (ball.offsetWidth / 2);\r
  48                         ballY   = (box.offsetHeight / 2) - (ball.offsetHeight / 2);\r
  49                         cpuY    = (box.offsetHeight / 2) - (paddle2.offsetHeight / 2);\r
  50                         playerY = (box.offsetHeight / 2) - (paddle1.offsetHeight / 2);\r
  51                         dx = dy = Speed;\r
  52 \r
  53                         paddle1.style.left = 20 + 'px';\r
  54                         paddle1.style.top  = playerY + 'px';\r
  55                         paddle2.style.left = box.offsetWidth - (20 + paddle2.offsetWidth) + 'px';\r
  56                         paddle2.style.top  = cpuY + 'px';\r
  57                         ball.style.left    = ballX + 'px';\r
  58                         ball.style.top     = ballY + 'px';\r
  59 \r
  60                         // Show message\r
  61 \r
  62                         msg.data = 'Click on Paddle to Start Game.';\r
  63                 }\r
  64 \r
  65                 // START GAME\r
  66                 function Start( e ) {\r
  67                         //self.removeMouseEventListener( paddle1, 'click', Start );\r
  68                         \r
  69                         // Attach a function to onmousemove event of the box\r
  70                         // box.onmousemove = MovePaddle;\r
  71                         self.addMouseEventListener( box, 'mousemove', MovePaddle );\r
  72                         // Call 'GameLoop()' function every 10 milliseconds\r
  73 \r
  74                         //iID = setInterval( GameLoop , 10 );\r
  75                         \r
  76                         self.addTimer( GameLoop , 10 );\r
  77                         \r
  78                         msg.data = '';\r
  79                         return false;\r
  80                 }\r
  81 \r
  82                 // MAIN GAME LOOP, CALLED REPEATEDLY\r
  83                 function GameLoop() {\r
  84                         // MOVE BALL\r
  85                         ballX += dx;\r
  86                         ballY += dy;\r
  87 \r
  88                         // See if ball is past player paddle\r
  89 \r
  90                         if( ballX < 0 ) {\r
  91                                 // clearInterval( iID );\r
  92                                 self.removeTimer( GameLoop );\r
  93                                 iID = null;\r
  94                                 Init();\r
  95 \r
  96                                 //box.onmousemove = '';\r
  97                                 self.removeMouseEventListener( box, 'mousemove', MovePaddle );\r
  98                                 msg.data = 'You Loose! Click on Paddle to Re-Start Game.';\r
  99                         }\r
 100 \r
 101                         // See if ball is past CPU paddle\r
 102 \r
 103                         if((ballX + ball.offsetWidth) > box.offsetWidth) {\r
 104                                 // clearInterval(iID);\r
 105                                 self.removeTimer( GameLoop );\r
 106                                 iID = null;\r
 107                                 Init();\r
 108 \r
 109                                 // box.onmousemove = '';\r
 110                                 self.removeMouseEventListener( box, 'mousemove', MovePaddle );\r
 111 \r
 112                                 msg.data = 'You Win!<br/>Click on Paddle to Re-Start Game.';\r
 113                         }\r
 114 \r
 115                         // COLLISION DETECTION\r
 116 \r
 117                         // If ball hits upper or lower wall\r
 118                         if(ballY < 0 || ((ballY + ball.offsetHeight) > box.offsetHeight))\r
 119                                 dy = -dy;\r
 120                         // Make x direction opposite\r
 121 \r
 122                         // If ball hits player paddle\r
 123 \r
 124                         if(ballX < (paddle1.offsetLeft + paddle1.offsetWidth))\r
 125                                 if(((ballY + ball.offsetHeight) > playerY) && ballY < (playerY + paddle1.offsetHeight))\r
 126                                         dx = -dx;\r
 127 \r
 128                         // If ball hits CPU paddle\r
 129                         if((ballX + ball.offsetWidth) > paddle2.offsetLeft)\r
 130                                 if(((ballY + ball.offsetHeight) > cpuY) && ballY < (cpuY + paddle2.offsetHeight))\r
 131                                         dx = -dx;\r
 132 \r
 133                         // Place ball at calculated positions\r
 134 \r
 135                         ball.style.left = ballX + 'px';\r
 136                         ball.style.top = ballY + 'px';\r
 137 \r
 138                         // MOVE CPU PADDLE\r
 139                         // Move paddle only if ball is coming towards the CPU paddle\r
 140                         if(dx > 0) {\r
 141                                 if((cpuY + (paddle2.offsetHeight / 2)) > (ballY + ball.offsetHeight))\r
 142                                         cpuY -= CPUSpeed;\r
 143                                 else\r
 144                                         cpuY += CPUSpeed;\r
 145 \r
 146                                 paddle2.style.top = cpuY + 'px';\r
 147                         }\r
 148                 }\r
 149 \r
 150                 // TO MOVE PLAYER PADDLE ON MOUSE MOVE EVENT\r
 151                 function MovePaddle(e) {\r
 152                         // Fetch y coordinate of mouse\r
 153                         var y = (e.clientY - (box.offsetTop - document.documentElement.scrollTop));\r
 154                         // Here, (box.offsetTop - document.documentElement.scrollTop) will get the relative\r
 155                         // position of "box" w.r.t to current scroll postion\r
 156 \r
 157                         // If y below lower boundary (cannot go above upper boundary -\r
 158                         // mousemove event only generated when mouse is inside box\r
 159                         if(y > (box.offsetHeight - paddle1.offsetHeight))\r
 160                                 y = (box.offsetHeight - paddle1.offsetHeight);\r
 161 \r
 162                         // Copy position\r
 163                         playerY = y;\r
 164                         // Set position\r
 165 \r
 166                         paddle1.style.top = y + 'px';\r
 167                 }\r
 168                 \r
 169                 var self = this;\r
 170                 \r
 171                 this.bgColor     = '#000000';\r
 172                 this.MIN_WIDTH   = 500;\r
 173                 this.MIN_HEIGHT  = 300;\r
 174                 this.onInit = function(){\r
 175                         self.rootElement.id = 'pon-root';\r
 176                         self.rootElement.innerHTML = [\r
 177                                 '<div id="box" style="width: 500px;height: 300px;margin: auto; border: 5px solid #FFF; position: relative; overflow: hidden;">',\r
 178                                         '<div style="width:24px;height:64px;background:#FFF;position:absolute;cursor:pointer;" id="paddle1"></div>',\r
 179                                         '<div style="width:24px;height:64px;background:#FFF;position:absolute;" id="paddle2"></div>',\r
 180                                         '<div style="position:absolute;color:#fff;width:32px;height:32px;font-size:32px;line-height:32px;" id="ball">●</div>',\r
 181                                         '<div style="position:absolute;top:120px;left:0;width:500px;text-align:center;font-size:20px;color:#fff;" id="msg" align="center">msg</div>',\r
 182                                 '</div>',\r
 183                                 '<div id="pon-close" style="width: 500px;height: 30px;margin: auto; border: 5px solid #FFF;color: #FFF;margin-top:20px;text-align:center; line-height: 30px;cursor:pointer;">close</div>'\r
 184                         ].join( '' );\r
 185                 };\r
 186                 this.onOpen = function( _w, _h ){\r
 187                         winW = _w;\r
 188                         winH = _h;\r
 189                         \r
 190                         Init();\r
 191                         self.onPaneResize( _w, _h );\r
 192                         \r
 193                         self.addMouseEventListener( paddle1, 'click', Start );\r
 194                         self.addMouseEventListener( close, 'click', self.close );\r
 195                 };\r
 196                 this.onPaneResize = function( _w, _h ){\r
 197                         var h = Util.getElementSize( self.rootElement ).height;\r
 198                         self.rootElement.style.marginTop = Math.floor( _h / 2 - h / 2 ) + 'px';\r
 199                 };\r
 200                 this.onClose = function(){\r
 201                         // iID && clearInterval( iID );\r
 202                 };\r
 203                 \r
 204         }, false, true,  'pon', 'pon', null, '#1C1C1C' );\r
 205 })( gOS, window );\r