2 * http://learning-computer-programming.blogspot.jp/2009/09/simple-pong-game-using-javascript.html
5 ( function( gOS, window ) {
\r
6 gOS.registerApplication( function() {
\r
7 // CHANGE THESE, IF REQUIRED
\r
9 // Speed of ball (pixels/step)
\r
11 // Speed of CPU Paddle (pixels/step)
\r
13 // Short references to objects
\r
23 // Speed in x and y directions
\r
25 // x and y positions of ball
\r
27 // y position of player paddle (x fixed)
\r
30 // y position of CPU paddle (x fixed)
\r
32 // To store ID of set interval used to clear it when required
\r
34 // Attach a function to onLoad event
\r
36 // INITIALIZE GAME OBJECTS
\r
38 // Make short refrences to objects
\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
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
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
62 msg.data = 'Click on Paddle to Start Game.';
\r
66 function Start( e ) {
\r
67 //self.removeMouseEventListener( paddle1, 'click', Start );
\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
74 //iID = setInterval( GameLoop , 10 );
\r
76 self.addTimer( GameLoop , 10 );
\r
82 // MAIN GAME LOOP, CALLED REPEATEDLY
\r
83 function GameLoop() {
\r
88 // See if ball is past player paddle
\r
91 // clearInterval( iID );
\r
92 self.removeTimer( GameLoop );
\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
101 // See if ball is past CPU paddle
\r
103 if((ballX + ball.offsetWidth) > box.offsetWidth) {
\r
104 // clearInterval(iID);
\r
105 self.removeTimer( GameLoop );
\r
109 // box.onmousemove = '';
\r
110 self.removeMouseEventListener( box, 'mousemove', MovePaddle );
\r
112 msg.data = 'You Win!<br/>Click on Paddle to Re-Start Game.';
\r
115 // COLLISION DETECTION
\r
117 // If ball hits upper or lower wall
\r
118 if(ballY < 0 || ((ballY + ball.offsetHeight) > box.offsetHeight))
\r
120 // Make x direction opposite
\r
122 // If ball hits player paddle
\r
124 if(ballX < (paddle1.offsetLeft + paddle1.offsetWidth))
\r
125 if(((ballY + ball.offsetHeight) > playerY) && ballY < (playerY + paddle1.offsetHeight))
\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
133 // Place ball at calculated positions
\r
135 ball.style.left = ballX + 'px';
\r
136 ball.style.top = ballY + 'px';
\r
139 // Move paddle only if ball is coming towards the CPU paddle
\r
141 if((cpuY + (paddle2.offsetHeight / 2)) > (ballY + ball.offsetHeight))
\r
146 paddle2.style.top = cpuY + 'px';
\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
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
166 paddle1.style.top = y + 'px';
\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
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
186 this.onOpen = function( _w, _h ){
\r
191 self.onPaneResize( _w, _h );
\r
193 self.addMouseEventListener( paddle1, 'click', Start );
\r
194 self.addMouseEventListener( close, 'click', self.close );
\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
200 this.onClose = function(){
\r
201 // iID && clearInterval( iID );
\r
204 }, false, true, 'pon', 'pon', null, '#1C1C1C' );
\r