Pong

Archive

Use W/S to control the left paddle, and use I/K to control the right paddle.

<graph>{"width":640,"height":360,"background":"black",

"signals":[{"name":"clocks","init":{"expr":"{raw:now(),active:false,offset:now(),main:0,prev:0,delta:0,frames:0}"},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:now(),active:eventX()>=0&&eventX()<width&&eventY()>=0&&eventY()<height,offset:clocks.offset,main:clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.active?clocks.offset:(clocks.raw-clocks.main),main:clocks.active?(clocks.raw-clocks.offset):clocks.main,prev:clocks.prev,delta:clocks.delta,frames:clocks.frames+clocks.active}"},{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{raw:clocks.raw,active:clocks.active,offset:clocks.offset,main:clocks.main,prev:clocks.main,delta:clocks.main-clocks.prev,frames:clocks.frames}"}]},

{"name":"ball","init":{"x":310,"y":170,"vx":0.2,"vy":0.1},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{x:if(ball.x < -20 || ball.x > width,310,ball.x+(ball.vx*clocks.delta)),y:ball.y+(ball.vy*clocks.delta),vx:if((ball.x<width-60 && ball.x+(ball.vx*clocks.delta)>width-60 && ball.y+(ball.vy*clocks.delta)<paddle2.y+100 && ball.y+(ball.vy*clocks.delta)+20>paddle2.y) || (ball.x>40 && ball.x+(ball.vx*clocks.delta)<40 && ball.y+(ball.vy*clocks.delta)<paddle1.y+100 && ball.y+(ball.vy*clocks.delta)+20>paddle1.y),ball.vx*-1,ball.vx),vy:if((ball.y<height-20 && ball.y+(ball.vy*clocks.delta)>height-20) || (ball.y>0 && ball.y+(ball.vy*clocks.delta)<0),ball.vy*-1,ball.vy)}"}]},

{"name":"paddle1","init":{"y":100,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyW']","expr":"{y:paddle1.y,vy:-.1}"}, {"type":"body:keyup[event.code=='KeyW']","expr":"{y:paddle1.y,vy:if(paddle1.vy<0,0,paddle1.vy)}"}, {"type":"body:keydown[event.code=='KeyS']","expr":"{y:paddle1.y,vy:.1}"}, {"type":"body:keyup[event.code=='KeyS']","expr":"{y:paddle1.y,vy:if(paddle1.vy>0,0,paddle1.vy)}"}, {"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{y:clamp(paddle1.y+(paddle1.vy*clocks.delta),0,height-100),vy:paddle1.vy}"}]},

{"name":"paddle2","init":{"y":200,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyI']","expr":"{y:paddle2.y,vy:-.1}"}, {"type":"body:keyup[event.code=='KeyI']","expr":"{y:paddle2.y,vy:if(paddle2.vy<0,0,paddle2.vy)}"}, {"type":"body:keydown[event.code=='KeyK']","expr":"{y:paddle2.y,vy:.1}"}, {"type":"body:keyup[event.code=='KeyK']","expr":"{y:paddle2.y,vy:if(paddle2.vy>0,0,paddle2.vy)}"}, {"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{y:clamp(paddle2.y+(paddle2.vy*clocks.delta),0,height-100),vy:paddle2.vy}"}]}], "marks":[{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":20}},
   "update":{"x":{"signal":"ball.x"},"y":{"signal":"ball.y"}}
 }

},{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":100},"x":{"value":20}},
   "update":{"y":{"signal":"paddle1.y"}}
 }

},{

 "type":"rect",
 "properties":{
   "enter":{"fill":{"value":"white"},"width":{"value":20},"height":{"value":100},"x":{"value":600}},
   "update":{"y":{"signal":"paddle2.y"}}
 }

}]}</graph>

Plot

So, let me get this straight. I’m somewhere that’s not what I would call Earth… I’m seeing freaking pixels, and… oh yeah, I’m talking to a paddle! Yeah, okay, that is something I do now. I use W/S, hit ball into goal — I’ll probably turn green next.

See also

• Pong Red - a unique spin on the classic Pong formula
• Pong Green - a delectable green version of Pong
• Pong Blue - a version of Pong for gamers seeking a challenge
• Pong Purple - Pong but Multiball
• Pong but the right player can't win - Self-explanatory
• Pong 3D - The Pong for the new generation!
• Pong 3D but it's the kind of 3D from Spy Kids - right what it says on the tin.
• Pong Jr. - if Pong is too big
• Ponglitical cartoon - Pong that says something deep about our society.
• Pongsuke
• Pong Pink - A pink one for girls