app/assets/javascripts/pongame.js

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