31
\$\begingroup\$

The challenge is simple. Give the shortest code possible to reproduce the classic 2-player game of pong http://en.wikipedia.org/wiki/Pong . The level of graphics and functionality should be as close as possible to this javascript demonstration http://codeincomplete.com/posts/2011/5/14/javascript_pong/demo.html (but without the extra options you can click on on the left or the frame, fps etc. information in the bottom right).

As always the code must be written in a free language (in both senses) and should be runnable on linux. Any libraries used must also be free, easily available and not be written for the purposes of this competition (and also not already contain a working version of Pong!).

\$\endgroup\$
9

11 Answers 11

45
\$\begingroup\$

sed, 35

Raising the bar a bit with a postage-stamp sed meditation.

s/> / >/
s/ </< /
s/0</0>/
s/>1/<1/

The meditation is enjoyed on stdin/stdout on two computers, not necessarily connected by a network. The meditation begins in the state

0         <       1

with guru zero on the left and one on the right. The angle bracket moves left and right, and if a guru maneuvers their number to contact the cursor as it comes to their side, their score is increased by one, and they become elated with joy.

The meditation is initiated by typing the above state into sed -f medi.sed, and the computer responds with the next state. The dutiful guru types that state into the meditation, reading aloud the next key they will press, with both gurus pressing the holy key to enter the future at the same time. The dutiful computer replies with the next state. This, in turn, is read aloud while typed in unison as with the last. Continue advancing into the future until infinite bliss is achieved.

Gurus desiring a challenge may play 'turbo' mode, wherein the gurus attempt to collaboratively predict the computer's next state, and typing it into the prompt instead of the current state. Gurus will have the wisdom to verify agreement between their predictions before entering the future.

\$\endgroup\$
2
  • 27
    \$\begingroup\$ Dude... what did I just read? \$\endgroup\$
    – MrZander
    Mar 8 '13 at 23:43
  • 13
    \$\begingroup\$ @MrZander Only through extensive contemplation may the wisdom of the meditation be revealed. This contemplation is best aided through execution of the program. \$\endgroup\$
    – boothby
    Mar 9 '13 at 18:00
25
+25
\$\begingroup\$

Javascript, 883 (+ 70 HTML)

c=document.getElementById('c').getContext('2d')
c.fillStyle="#FFF"
c.font="60px monospace"
w=s=1
p=q=a=b=0
m=n=190
x=300;y=235
u=-5;v=3
setInterval(function(){if(w&&!s)return;s=0
c.clearRect(0,0,640,480)
for(i=5;i<480;i+=20)c.fillRect(318,i,4,10)
m+=p;n+=q
m=m<0?0:m;m=m>380?380:m
n=n<0?0:n;n=n>380?380:n
x+=u;y+=v
if(y<=0){y=0;v=-v}
if(y>=470){y=470;v=-v}
if(x<=40&&x>=20&&y<m+110&&y>m-10){u=-u+0.2;v+=(y-m-45)/20}
if(x<=610&&x>=590&&y<n+110&&y>n-10){u=-u-0.2;v+=(y-n-45)/20}
if(x<-10){b++;x=360;y=235;u=5;w=1}
if(x>640){a++;x=280;y=235;u=-5;w=1}
c.fillText(a+" "+b,266,60)
c.fillRect(20,m,20,100)
c.fillRect(600,n,20,100)
c.fillRect(x,y,10,10)},30)
document.onkeydown=function(e){k=(e||window.event).keyCode;w=w?0:k=='27'?1:0;p=k=='65'?5:k=='81'?-5:p;q=k=='40'?5:k=='38'?-5:q;}
document.onkeyup=function(e){k=(e||window.event).keyCode;p=k=='65'||k=='81'?0:p;q=k=='38'||k=='40'?0:q}


/* Variable index:
a -> left player score
b -> right player score
c -> context
e -> event
i -> counter for dashed line
k -> keycode
m -> left paddle y
n -> right paddle y
p -> left paddle y velocity
q -> right paddle y velocity
s -> is start of game
u -> ball x velocity
v -> ball y velocity
w -> game is waiting (paused)
x -> ball x
y -> ball y
*/

The script can be placed at the end of <body> or called onLoad. It needs the following canvas element:

<canvas id="c"width="640"height="480"style="background:#000"></canvas>

Player 1 uses the q and a keys, and player 2 uses the p and l keys. Press the esc key to pause and any key to start/continue.

You can play it in your browser here.

I wasn't sure of the physics to use, so I started off with a simple reflection method and then added some variety and experimented with it a bit. The ball's velocity in the y direction is affected by where on the paddle you hit the ball, so you have some control over where the ball goes. The ball's velocity in the x direction slowly increases with each hit in the rally.

I suspect that it will be beaten quite easily by solutions using libraries, but I had fun making it in plain javascript.

\$\endgroup\$
3
  • 2
    \$\begingroup\$ That's a really nice implementation. \$\endgroup\$
    – Raphael
    Mar 12 '13 at 14:15
  • 2
    \$\begingroup\$ Could be golfed a bit more, I know I'm about two years late here. but you could assign 20 to a variable named g and save one measly byte. \$\endgroup\$
    – Adalynn
    Dec 9 '16 at 0:25
  • \$\begingroup\$ Damn, it's hard to play on an azerty keyboard... \$\endgroup\$
    – dim
    Jan 5 '18 at 16:05
18
\$\begingroup\$

Python 2 (with pygame) 650 bytes

Features

  • 1 and 2 player modes - When the game begins, press 1 for 1 player, or 2 for 2 players. The game will not begin until one of these keys is pressed.
  • Increasing ball speed - Each volley, the ball speed is increased so that after 10 volleys it has increased by approximately 50%, after 20 it will be 50% faster than that, etc.
  • Variable ball deflection - Ball deflection is based on two factors: what portion of the paddle it strikes, and whether or not the paddle is moving upon impact. If the ball strikes the paddle near one of the ends, it will be deflected more strongly than if it strikes near the middle (almost as if it were a curved surface). Additionally, if the paddle is in motion, the motion of the paddle is added to the deflection. In order to obtain the strongest deflection, the ball must strike near the end of the paddle, and the paddle must be in motion towards that same end. This is very similar to the original Pong for Atari 2600.
  • Pause - The game may be paused at any time by pressing the Space bar. Play will resume upon pressing the space bar a second time.
  • Controls - As with the example, player 1 moves with the Q and A keys, and player 2 moves with P and L.
from pygame import*
init();d=display;s=d.set_mode((640,480))
g=p=16;j=q=80;x=y=200;o=t=h=v=1;z=m=n=0;w=[255]*3
while s.fill(time.wait(3)):
 event.get();k=key.get_pressed();t^=o*k[32];o=1-k[32];z=z or-k[49]-k[50]*2;e=k[113]-k[97];f=[k[112]-k[108],(h>0)*cmp(y,q-32)][z];a=p<g;b=q-[y,x][a]
 if p%608<g:m,n,p,h,v=[m+1-a,m,n+a,n,g+a*592,p,1-a*2,h/-.96,1,b/32.+~[f,e][a]][-g<b<j::2]
 for r in[(0,x,g,j),(624,y,g,j),(p,q,g,g)]+[(316,i*31,8,15)for i in range(g)]:draw.rect(s,w,r)
 if z*t:v*=(0<q<464)*2-1;x-=(0<x-e<400)*e/.6;y-=(0<y-f<400)*f/.6;p+=h;q+=v
 c=font.SysFont('monospace',j,1).render('%3d %%-3d'%m%n,1,w);s.blit(c,(320-c.get_width()/2,0));d.flip()

cmp is no longer defined in Python 3. The code above can be made Python 3 compatitble by prepending the following:

def cmp(a, b):
  return (a>b)-(a<b)

Sample screen capture:

Note: the font used for the score may vary from system to system.

\$\endgroup\$
5
  • \$\begingroup\$ The score shows in the left half for me, and I think the deflection is too strong, but it's pretty cool anyway :) \$\endgroup\$ Mar 14 '13 at 8:28
  • \$\begingroup\$ @aditsu are you operating under linux? I'll see if I can find an alternative that works regardless of the selected font face. The idea behind the deflection is that it would be possible to deflect the ball at a faster speed (maximum 2.5 on my scale) than the paddle can move (1.67). This is only possible if you give it some 'spin'. If the paddle isn't moving when the ball strikes, the maximum is velocity will be 1.5. \$\endgroup\$
    – primo
    Mar 14 '13 at 8:38
  • \$\begingroup\$ Yes I'm using Linux. I find it strange that the ball can actually go "back" (up or down) after hitting the paddle, instead of continuing in the same direction (perhaps at a different angle). But maybe the Atari version did that, I don't know. \$\endgroup\$ Mar 14 '13 at 9:07
  • \$\begingroup\$ @aditsu It cost a few bytes, but I believe the score should be centered regardless of the font chosen (so long as it is monospace). Let me know if it works for you. And yes, the deflection is very similar (although a smoother distribution) to the Atari version I was familiar with. If you imagine the paddle as a (convexly) curved surface (like an air hockey paddle), I think it should be more intuitive. \$\endgroup\$
    – primo
    Mar 14 '13 at 11:22
  • \$\begingroup\$ Yes it's centered now \$\endgroup\$ Mar 14 '13 at 16:53
8
\$\begingroup\$

HTML & JavaScript (take 2) - 525

Since the OP didn't seem to care much about the "as close as possible" part, here's an alternative solution that I mercilessly simplified, stripped and golfed. Q/A and P/L to play, but every other key also has an effect. Again, the code is fully self-contained and I tested it in Chromium 25 on Linux. I can golf it even further if you can accept small bugs or greater degradation of graphics quality/gameplay.

<canvas id=c><script>C=c.getContext('2d');f=C.fillRect.bind(C)
S=[-1,I=J=0];A=B=210;X=Y=1
function g(n){++S[n];N=Math.random(M=n*613+9)*471}D=document
D.onkeydown=D.onkeyup=function(e){d=!!e.type[5];k=e.keyCode
k&1?I=k&16?d:-d:J=k&4?-d:d}
g(0);setInterval(function(){A-=A<I|A>420+I?0:I
B-=B<J|B>420+J?0:J
M+=X;N+=Y
N<0|N>471?Y=-Y:0
M==622&N>B&N<B+51|M==9&N>A&N<A+51?X=-X:M>630?g(0):M||g(1)
f(0,0,c.width=640,c.height=480)
C.fillStyle='tan';C.font='4em x';C.fillText(S,280,60)
f(0,A,9,60);f(631,B,9,60);f(M,N,9,9)},6)</script>

Thanks Shmiddty

\$\endgroup\$
5
  • \$\begingroup\$ I don't understand the objection. As far as I can recall, the 715 byte version (edited 3 hours before this post) is nearly identical to the original version of Pong I had for my Atari 2600. \$\endgroup\$
    – primo
    Mar 13 '13 at 1:50
  • \$\begingroup\$ @primo I'm assuming you're talking about my implied claim that your solution does not meet the "as close as possible" criterion. Well, the OP did not mention the Atari 2600 version, but a specific javascript implementation that he linked to. And at first sight there are 2 glaring differences in your code: no computer player and no "7-segment" score display. There are probably a lot more differences in the "mechanics". If these things are not important, then I think this solution should be valid too. \$\endgroup\$ Mar 13 '13 at 2:09
  • \$\begingroup\$ This is my mistake. I did really mean "as close as possible" so your first solution is the best so far. \$\endgroup\$
    – Raphael
    Mar 13 '13 at 8:01
  • \$\begingroup\$ you can remove the c=window.c. You're assigning a global variable to itself. \$\endgroup\$
    – Shmiddty
    Mar 13 '13 at 22:17
  • \$\begingroup\$ You can save 1 more character by moving ++S[n] inside of .random(++S[n]) \$\endgroup\$
    – Shmiddty
    Mar 13 '13 at 22:35
7
\$\begingroup\$

TI-Basic, 328 326 bytes

AxesOff:ZInteger:GridOn
99→Xscl:2→Yscl:1→U:1→V
Pt-Change(0,0
Line(Xmin,0,Xmin,9
Line(Xmax,0,Xmax,9
While 1
If 30≤abs(Y
-V→V
Pt-Change(X,Y
If X≥46:Then
If Y≥E and Y≤E+9:Then
-U→U
Else
IS>(A,9
X-90→X
End
End
If X≤-46:Then
If Y≥D and Y≤D+5:Then
-U→U
Else
IS>(B,9
X+90→X
End
End
If 9<max(A,B
Stop
X+U→X:Y+V→Y
Pt-Change(X,Y
Text(1,43,A,":",B
getkey→G
If G=21
1→I
If G=41
-1→I
If G=25
1→J
If G=34
-1→J
I(G≠31→I
J(G≠26→J
D+I→D:E+J→E
For(θ,-1,9,10
Pt-Change(Xmin-not(I),D+θ-I/2
Pt-Change(Xmax+not(J),E+θ-J/2
End
End

This program is very basic (constant speed and angles) but since there's is no precise specifications, the strict minimum will do

Since a long press is not detectable (or 2 keys pressed at the same time), an extra key is used to stop the movement of the racket

Here is the result at ~5x speed:

program demo

\$\endgroup\$
1
  • 1
    \$\begingroup\$ A thing of beauty! \$\endgroup\$
    – Raphael
    Jun 24 at 13:25
6
\$\begingroup\$

HTML & JavaScript - 1663

Against my better judgment, I took the crazy approach of golfing the actual code from the demo. I removed some features and interface elements, but generally it works exactly the same - 0, 1 or 2 to choose the number of human players, Q/A and P/L to move.

Unless I made some mistakes, gameplay should be identical, pixel for pixel and millisecond for millisecond, to the original at 640*480 (hint: resizing the browser window changes the game size in the demo). It just doesn't give instructions, doesn't announce the winner and doesn't handle esc.

The code is fully self-contained and I tested it in Chromium 25 on Linux. Firefox doesn't like it very much.

<body bgcolor=0><canvas id=c height=480><script>R=Math.random
C=c.getContext('2d');f=C.fillRect.bind(C)
S=[l=G=I=J=K=L=0,0];r=17;u=463;o=24;q=12;z=10;s=640;v=36
function T(z,t,u,v){P=0;if(e=v*E-u*F){a=(u*t-v*z)/e;b=(E*t-F*z)/e
a<0|a>1|b<0|b>1?0:P={x:M+a*E,y:N+a*F,d:u,s:0,X:X,Y:Y}}}function
i(p,q,h){T(p-22*(E<0),q,0,h)
P?0:T(p,q-h*(F<0),22,0)}function
U(p){if(p.a)if(M<p.x&X<0|M>p.x+q&X>0)p.u=0
else{P=p.P;if(P&&P.X*X>0&P.Y*Y>0&P.s<p.l/z)P.s+=t
else{E=X*z;F=Y*z;i(M-p.x+5,s*q,s*o)
if(p.P=P){y=P.y;while(y<r|y>u)y=y<r?34-y:y>u?u+u-y:y
P.y=y+R(e=(p.l+2)*(X<0?M-p.x-q:p.x-M)/64)*2*e-e}}P?p.u=P.y<p.y+25?1:P.y>p.y+35?-1:0:0}y=p.y-p.u*t*198
p.y=y<q?q:y>408?408:y}function
W(n,x){a=9.6;b=[~8,3,62,31,75,93,~2,7,-1,u][n]
b&4&&f(x,o,v,a);b&64&&f(x,o,a,o)
b&2&&f(x+v,o,-a,o);b&8&&f(x,43.2,v,a)
b&32&&f(x,48,a,o);b&1&&f(x+v,48,-a,o)
b&16&&f(x,72,v,-a)}A={u:0,x:0,y:210};B={u:0,x:628,y:210}
function g(n){if(++S[n]>8)G=A.a=B.a=0
else{N=R(M=n?635:5)*446+r;Y=157.5;X=n?-Y:Y
A.l=z+S[0]-S[1];B.l=20-A.l}}D=document
D.onkeydown=D.onkeyup=function(e){d=!!e.type[5]
k=e.keyCode-45;if(k>2&k<6&d&!G){G=S=[-1,0];A.a=k<4;B.a=k<5
g(0)}k^31?k^35?k^20?k^v?0:I=d:J=d:K=d:L=d
A.a?0:A.u=I-J;B.a?0:B.u=K-L}
setInterval(function(){t=new Date()/1000-l;l+=t;U(A);U(B)
if(G){E=t*X+4*t*t;F=t*Y+4*t*t
x=M+E;y=N+F;m=X+t*(X>0?8:-8);n=Y+t*(Y>0?8:-8)
if(n>0&y>u){y=u;n=-n}if(n<0&y<r){y=r;n=-n}p=m<0?A:B
i(M-p.x+5,N-p.y+5,70)
if(P){if(P.d){y=P.y;n=-n}else{x=P.x;m=-m}n*=n*p.u<0?.5:p.u?1.5:1}M=x;N=y
X=m;Y=n;M>645?g(0):M<-5&&g(1)}c.width=s;C.fillStyle='#fff'
f(0,0,s,q);f(0,468,s,q);for(j=o;j--;)f(314,6+o*j,q,q)
W(S[0],266.5);W(S[1],338.5)
f(0,A.y,q,60);f(s,B.y,-q,60);G&&f(M-5,N-5,z,z)},50/3)</script>

Some credits to Shmiddty for improvements

\$\endgroup\$
6
\$\begingroup\$

Processing, 487 characters

int a=320,b=240,c=2,d=2,e=0,f=0,g=0,h=0,i=15,j=80,k=640,
l=160,m;void setup(){size(k,b*2);}void draw(){background
(0);if(keyPressed){if(key=='q'&&g>0)g-=i;if(key=='a'&&g<
j*5)g+=i;if(key=='o'&&h>0)h-=i;if(key=='l'&&h<j*5)h+=i;}
rect(0,g,i,j);for(m=0;m<k;m+=30)rect(312,m,i,i);rect(a,b
,i,i);rect(625,h,i,j);a+=c;b+=d;c*=a<i&&(b>g&&b+i<g+j)||
a>610&&(b>h&&b+i<h+j)?-1:1;d*=b<0||b>=465?-1:1;if(a<0){f
++;a=0;b=240;c=2;}if(a>k){e++;a=625;b=240;c=-2;}textSize
(j);text(e,l,j);text(f,3*l,j);}

Sample screenshot:

enter image description here

This code was made with shortness in mind, so it is pretty buggy (the ball sometimes goes through the paddle, or wraps around it). Controls are Q/A for Player 1 and O/L for Player 2.

\$\endgroup\$
1
  • 1
    \$\begingroup\$ As a game your Pong version also seems quite unfair, as only one player's keys are registered per frame :P \$\endgroup\$ Jul 8 '18 at 21:09
3
\$\begingroup\$

K (oK) + iKe, 393 335 bytes

q:p:-15+h%2
d:w,h
b:-2+d%2
v:5 -1
s:t:0
tick:{b::v+0|d&b
$[$[0>*b;t+::1;w<*b;s+::1;0];b::-2+d%2;0]
v*::$[(&/(b>(0;p-5))&b<(10;p+30))|&/(b>(w-15;q-5))&b<(w;q+30);-1;1],1}
draw:{((;gray);(((0;p);(w-5;q));;30 5#1);(b;;5 5#1);((w%4;0);;~,/'+text(),$t);((-10+3*w%4;0);;~,/'+text(),$s))}
kd:{$[x=81;p-::5;x=65;p+::5;x=80;q-::5;x=76;q+::5;0]}

Try it online!

My first K answer!

Was really fun to do in K. Kinda sad that the question spec isn't too specific about the implementation.

This answer has points based scoring, involves two players and no AI.

\$\endgroup\$
2
  • \$\begingroup\$ How do you move the paddles? \$\endgroup\$
    – Raphael
    Jun 23 at 16:43
  • 1
    \$\begingroup\$ same as the reference given. Q&A for p1, P&L for p2. \$\endgroup\$
    – Razetime
    Jun 23 at 16:43
2
\$\begingroup\$

C# - 1283 characters

This can be golfed quite a bit more but here it is.

using System;using System.Drawing;using System.Runtime.InteropServices;using System.Windows.Forms;using r=System.Drawing.RectangleF;namespace f{public partial class f:Form{public f(){InitializeComponent();}private void f_Load(object sender,EventArgs e){var t=this;var s=new r(0,0,300,300);var q=new r(0,0,15,50);var o=new r(0,0,15,50);var x=new PointF(150,150);var v=.06F;var h=v;var b=new r(x.X,x.Y,15,15);var p1=0;var p2=0;var p=new PictureBox{Size=t.Size,Location=new Point(0,0)};t.Controls.Add(p);p.Paint+=(wh,n)=>{var g=n.Graphics;Action<Brush,r>f=g.FillRectangle;var k=new SolidBrush(Color.Black);var w=new SolidBrush(Color.White);var d=new byte[256];GetKeyboardState(d);var l=q.Location;var _1=.1F;q.Location=new PointF(0,d[90]>1?l.Y+_1:d[81]>1?l.Y-_1:l.Y);l=o.Location;o.Location=new PointF(269,d[77]>1?l.Y+_1:d[79]>1?l.Y-_1:l.Y);f(k,s);f(w,q);f(w,o);Func<r,bool>i=b.IntersectsWith;h=i(q)||i(o)?-h:h;v=b.Top<1||b.Bottom>t.Height-30?-v:v;b.Offset(h,v);if(b.Left<0){p2++;b.Location=x;}if(b.Right>290){p1++;b.Location=x;}f(w,b);for(int j=0;j<19;)f(w,new r(140,(j+(j++%2))*15,10,10));var a=new Font("Arial",20);g.DrawString(p1.ToString(),a,w,100,12);g.DrawString(p2.ToString(),a,w,170,12);p.Invalidate();};}[DllImport("user32.dll")]static extern bool GetKeyboardState(byte[]s);}}

Edit: Didn't see the requirement for a free, linux-runnable language...

\$\endgroup\$
2
\$\begingroup\$

Tcl/Tk, 932 bytes

Must be run in the interactive shell

gri [can .c -w 1024 -he 768 -bg #000]
proc A {} {set ::v [expr (int(rand()*36)+1)*20]}
proc R {C t\ X} {.c cr r $C -f #aaa -t $t}
proc I {} {incr ::v 20}
time {R "504 [I] 520 [I]"} 18
R "0 0 1024 20"
R "0 748 1024 768"
R "0 340 20 440" b
R "1004 340 1024 440" B
R "40 [A] 60 [I]" P
lmap n 4\ 5 T F\ S {.c cr t ${n}62 60 -ta $T -te 0 -fi #aaa -font {"" 56}}
proc C t\ n {lindex [.c coo $t] $n}
lmap {a b c d e} {q b 1 >20 -20 a b 3 <740 20 p B 1 >20 -20 l B 3 <740 20} {bind . $a "if \[C $b $c]$d {.c move $b 0 $e}"}
lassign {0 0 20 20} F S y x
proc M {} {lmap {_ a b c d e f} {0 <40 b 20 S 960 980 2 >984 B -20 F 80 100} {if [C P $_]$a {if [C P 1]>=[C $b 1]&&[C P 3]<=[C $b 3] {bell
set ::x $c} {.c itemco $d -te [incr ::$d]
if \$::$d>8 {tk_messageBox -message WINNER!
lmap T F\ S {.c itemco $T -te [set ::$T 0]}}
.c coo P $e [A] $f [I]}}}
.c move P $::x [set ::y [expr [C P 1]<40?20:[C P 3]>727?-20:$::y]]
after 99 M}
M
focus -f .

Note:

 #There is an Enter at the end

Just a very minimal version of Pong, where the ball only runs in diagonal angles and always has same velocity.

enter image description here

\$\endgroup\$
1
1
\$\begingroup\$

Simple HTML solution without AI

!DOCTYPE html>
<html>
<head>
  <title>Basic Pong HTML Game</title>
  <meta charset="UTF-8">
  <style>
  html, body {
    height: 100%;
    margin: 0;
  }

  body {
    background: black;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  </style>
</head>
<body>
<canvas width="750" height="585" id="game"></canvas>
<script>
const canvas = document.getElementById('game');
const context = canvas.getContext('2d');
const grid = 15;
const paddleHeight = grid * 5; // 80
const maxPaddleY = canvas.height - grid - paddleHeight;

var paddleSpeed = 6;
var ballSpeed = 5;

const leftPaddle = {
  // start in the middle of the game on the left side
  x: grid * 2,
  y: canvas.height / 2 - paddleHeight / 2,
  width: grid,
  height: paddleHeight,

  // paddle velocity
  dy: 0
};
const rightPaddle = {
  // start in the middle of the game on the right side
  x: canvas.width - grid * 3,
  y: canvas.height / 2 - paddleHeight / 2,
  width: grid,
  height: paddleHeight,

  // paddle velocity
  dy: 0
};
const ball = {
  // start in the middle of the game
  x: canvas.width / 2,
  y: canvas.height / 2,
  width: grid,
  height: grid,

  // keep track of when need to reset the ball position
  resetting: false,

  // ball velocity (start going to the top-right corner)
  dx: ballSpeed,
  dy: -ballSpeed
};

// check for collision between two objects using axis-aligned bounding box (AABB)
// @see https://developer.mozilla.org/en-US/docs/Games/Techniques/2D_collision_detection
function collides(obj1, obj2) {
  return obj1.x < obj2.x + obj2.width &&
         obj1.x + obj1.width > obj2.x &&
         obj1.y < obj2.y + obj2.height &&
         obj1.y + obj1.height > obj2.y;
}

// game loop
function loop() {
  requestAnimationFrame(loop);
  context.clearRect(0,0,canvas.width,canvas.height);

  // move paddles by their velocity
  leftPaddle.y += leftPaddle.dy;
  rightPaddle.y += rightPaddle.dy;

  // prevent paddles from going through walls
  if (leftPaddle.y < grid) {
    leftPaddle.y = grid;
  }
  else if (leftPaddle.y > maxPaddleY) {
    leftPaddle.y = maxPaddleY;
  }

  if (rightPaddle.y < grid) {
    rightPaddle.y = grid;
  }
  else if (rightPaddle.y > maxPaddleY) {
    rightPaddle.y = maxPaddleY;
  }

  // draw paddles
  context.fillStyle = 'white';
  context.fillRect(leftPaddle.x, leftPaddle.y, leftPaddle.width, leftPaddle.height);
  context.fillRect(rightPaddle.x, rightPaddle.y, rightPaddle.width, rightPaddle.height);

  // move ball by its velocity
  ball.x += ball.dx;
  ball.y += ball.dy;

  // prevent ball from going through walls by changing its velocity
  if (ball.y < grid) {
    ball.y = grid;
    ball.dy *= -1;
  }
  else if (ball.y + grid > canvas.height - grid) {
    ball.y = canvas.height - grid * 2;
    ball.dy *= -1;
  }

  // reset ball if it goes past paddle (but only if we haven't already done so)
  if ( (ball.x < 0 || ball.x > canvas.width) && !ball.resetting) {
    ball.resetting = true;

    // give some time for the player to recover before launching the ball again
    setTimeout(() => {
      ball.resetting = false;
      ball.x = canvas.width / 2;
      ball.y = canvas.height / 2;
    }, 400);
  }

  // check to see if ball collides with paddle. if they do change x velocity
  if (collides(ball, leftPaddle)) {
    ball.dx *= -1;

    // move ball next to the paddle otherwise the collision will happen again
    // in the next frame
    ball.x = leftPaddle.x + leftPaddle.width;
  }
  else if (collides(ball, rightPaddle)) {
    ball.dx *= -1;

    // move ball next to the paddle otherwise the collision will happen again
    // in the next frame
    ball.x = rightPaddle.x - ball.width;
  }

  // draw ball
  context.fillRect(ball.x, ball.y, ball.width, ball.height);

  // draw walls
  context.fillStyle = 'lightgrey';
  context.fillRect(0, 0, canvas.width, grid);
  context.fillRect(0, canvas.height - grid, canvas.width, canvas.height);

  // draw dotted line down the middle
  for (let i = grid; i < canvas.height - grid; i += grid * 2) {
    context.fillRect(canvas.width / 2 - grid / 2, i, grid, grid);
  }
}

// listen to keyboard events to move the paddles
document.addEventListener('keydown', function(e) {

  // up arrow key
  if (e.which === 38) {
    rightPaddle.dy = -paddleSpeed;
  }
  // down arrow key
  else if (e.which === 40) {
    rightPaddle.dy = paddleSpeed;
  }

  // w key
  if (e.which === 87) {
    leftPaddle.dy = -paddleSpeed;
  }
  // a key
  else if (e.which === 83) {
    leftPaddle.dy = paddleSpeed;
  }
});

// listen to keyboard events to stop the paddle if key is released
document.addEventListener('keyup', function(e) {
  if (e.which === 38 || e.which === 40) {
    rightPaddle.dy = 0;
  }

  if (e.which === 83 || e.which === 87) {
    leftPaddle.dy = 0;
  }
});

// start the game
requestAnimationFrame(loop);
</script>
</body>
</html>

\$\endgroup\$
1
  • 3
    \$\begingroup\$ Welcome to the site! This is a [code-golf] competition so the goal is to make the source code as small as possible. You can do this by removing comments and excess whitespace and using single letter variable names. For more information see the tag wiki, \$\endgroup\$
    – Grain Ghost
    Sep 15 at 9:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.