3 * http://learning-computer-programming.blogspot.jp/2009/09/simple-pong-game-using-javascript.html
6 ( function( gOS, window ) {
\r
7 gOS.registerApplication( function() {
\r
8 // CHANGE THESE, IF REQUIRED
\r
10 // Speed of ball (pixels/step)
\r
12 // Speed of CPU Paddle (pixels/step)
\r
14 // Short references to objects
\r
24 // Speed in x and y directions
\r
26 // x and y positions of ball
\r
28 // y position of player paddle (x fixed)
\r
31 // y position of CPU paddle (x fixed)
\r
33 // To store ID of set interval used to clear it when required
\r
35 // Attach a function to onLoad event
\r
37 // INITIALIZE GAME OBJECTS
\r
39 // Make short refrences to objects
\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
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
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
63 msg.data = 'Click on Paddle to Start Game.';
\r
67 function Start( e ) {
\r
68 //self.removeMouseEventListener( paddle1, 'click', Start );
\r
70 // Attach a function to onmousemove event of the box
\r
71 // box.onmousemove = MovePaddle;
\r
72 self.addMouseEventListener( box, 'mousemove', MovePaddle );
\r
73 // Call 'GameLoop()' function every 10 milliseconds
\r
75 //iID = setInterval( GameLoop , 10 );
\r
77 self.addTimer( GameLoop , 10 );
\r
83 // MAIN GAME LOOP, CALLED REPEATEDLY
\r
84 function GameLoop() {
\r
89 // See if ball is past player paddle
\r
92 // clearInterval( iID );
\r
93 self.removeTimer( GameLoop );
\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
102 // See if ball is past CPU paddle
\r
104 if((ballX + ball.offsetWidth) > box.offsetWidth) {
\r
105 // clearInterval(iID);
\r
106 self.removeTimer( GameLoop );
\r
110 // box.onmousemove = '';
\r
111 self.removeMouseEventListener( box, 'mousemove', MovePaddle );
\r
113 msg.data = 'You Win!<br/>Click on Paddle to Re-Start Game.';
\r
116 // COLLISION DETECTION
\r
118 // If ball hits upper or lower wall
\r
119 if(ballY < 0 || ((ballY + ball.offsetHeight) > box.offsetHeight))
\r
121 // Make x direction opposite
\r
123 // If ball hits player paddle
\r
125 if(ballX < (paddle1.offsetLeft + paddle1.offsetWidth))
\r
126 if(((ballY + ball.offsetHeight) > playerY) && ballY < (playerY + paddle1.offsetHeight))
\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
134 // Place ball at calculated positions
\r
136 ball.style.left = ballX + 'px';
\r
137 ball.style.top = ballY + 'px';
\r
140 // Move paddle only if ball is coming towards the CPU paddle
\r
142 if((cpuY + (paddle2.offsetHeight / 2)) > (ballY + ball.offsetHeight))
\r
147 paddle2.style.top = cpuY + 'px';
\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
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
167 paddle1.style.top = y + 'px';
\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
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
187 this.onOpen = function( _w, _h ){
\r
192 self.onPaneResize( _w, _h );
\r
194 self.addMouseEventListener( paddle1, 'click', Start );
\r
195 self.addMouseEventListener( close, 'click', self.close );
\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
201 this.onClose = function(){
\r
202 // iID && clearInterval( iID );
\r
205 }, false, true, 'pon', 'pon', null, '#1C1C1C' );
\r