# Pong in the shortest code

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!).

• Honestly, this question is a little too difficult for code golf. The ball physics for Pong is pretty complicated. Mar 8, 2013 at 2:18
• @beary605, I don't think the ball physics are too complicated. My solution is 'as close as possible' to the javascript demonstration, and the physics are quite simple. Mar 8, 2013 at 21:21
• Just for reference there are some other [code-golf]s that run to pretty long. Build an engine for a maze game, Noughts and Crosses (aka Tic-Tac-Toe) (both could use additional entries, who likes to "win" by default?), Write a small HTTP server, Self-Interpreting Interpreter, Self-compiling compiler, Compile Regexes ... Mar 8, 2013 at 23:28
• @felipa, Can you formalize 'as close as possible'? I don't know why my sed solution isn't in the lead. Mar 12, 2013 at 19:28
• @beary605 too difficult? Nov 28, 2017 at 20:30

## 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.

• Dude... what did I just read? Mar 8, 2013 at 23:43
• @MrZander Only through extensive contemplation may the wisdom of the meditation be revealed. This contemplation is best aided through execution of the program. Mar 9, 2013 at 18:00

## 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
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.

• That's a really nice implementation.
– user7467
Mar 12, 2013 at 14:15
• 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. Dec 9, 2016 at 0:25
• Damn, it's hard to play on an azerty keyboard...
– dim
Jan 5, 2018 at 16:05

## 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.

• The score shows in the left half for me, and I think the deflection is too strong, but it's pretty cool anyway :) Mar 14, 2013 at 8:28
• @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. Mar 14, 2013 at 8:38
• 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. Mar 14, 2013 at 9:07
• @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. Mar 14, 2013 at 11:22
• Yes it's centered now Mar 14, 2013 at 16:53

# 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

• 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. Mar 13, 2013 at 1:50
• @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. Mar 13, 2013 at 2:09
• This is my mistake. I did really mean "as close as possible" so your first solution is the best so far.
– user7467
Mar 13, 2013 at 8:01
• you can remove the c=window.c. You're assigning a global variable to itself. Mar 13, 2013 at 22:17
• You can save 1 more character by moving ++S[n] inside of .random(++S[n]) Mar 13, 2013 at 22:35

# 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:

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.

• As a game your Pong version also seems quite unfair, as only one player's keys are registered per frame :P Jul 8, 2018 at 21:09

# 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:

• A thing of beauty!
– user7467
Jun 24, 2021 at 13:25

# 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

# 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...

# 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!

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.

• How do you move the paddles?
– user7467
Jun 23, 2021 at 16:43
• same as the reference given. Q&A for p1, P&L for p2. Jun 23, 2021 at 16:43

# 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.

• Failed outgolf: bit.ly/2VSIGz8 Jan 16, 2019 at 0:17

Simple HTML solution without AI

!DOCTYPE html>
<html>
<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>
<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

var ballSpeed = 5;

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

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

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

// prevent paddles from going through walls
}
}

}
}

context.fillStyle = 'white';

// 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
ball.dx *= -1;

// move ball next to the paddle otherwise the collision will happen again
// in the next frame
}
ball.dx *= -1;

// move ball next to the paddle otherwise the collision will happen again
// in the next frame
}

// 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

// up arrow key
if (e.which === 38) {
}
// down arrow key
else if (e.which === 40) {
}

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

// listen to keyboard events to stop the paddle if key is released
if (e.which === 38 || e.which === 40) {
}

if (e.which === 83 || e.which === 87) {
</html>