Pong Jr.
Use W/S to control the left paddle, and use I/K to control the right paddle.
"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":31,"y":17,"vx":0.02,"vy":0.01},"streams":[{"type":"body:mousemove,mouseover,mouseout,body:wheel","expr":"{x:if(ball.x < -2 || ball.x > width,31,ball.x+(ball.vx*clocks.delta)),y:ball.y+(ball.vy*clocks.delta),vx:if((ball.x<width-6 && ball.x+(ball.vx*clocks.delta)>=width-6 && ball.y+(ball.vy*clocks.delta)<paddle2.y+10 && ball.y+(ball.vy*clocks.delta)+2>paddle2.y) || (ball.x>4 && ball.x+(ball.vx*clocks.delta)<=4 && ball.y+(ball.vy*clocks.delta)<paddle1.y+10 && ball.y+(ball.vy*clocks.delta)+2>paddle1.y),ball.vx*-1,ball.vx),vy:if((ball.y<height-2 && ball.y+(ball.vy*clocks.delta)>=height-2) || (ball.y>0 && ball.y+(ball.vy*clocks.delta)<=0),ball.vy*-1,ball.vy)}"}]},
{"name":"paddle1","init":{"y":10,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyW']","expr":"{y:paddle1.y,vy:-.01}"}, {"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:.01}"}, {"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-10),vy:paddle1.vy}"}]},
{"name":"paddle2","init":{"y":20,"vy":0},"streams":[ {"type":"body:keydown[event.code=='KeyI']","expr":"{y:paddle2.y,vy:-.01}"}, {"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:.01}"}, {"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-10),vy:paddle2.vy}"}]}], "marks":[{
"type":"rect",
"properties":{
"enter":{"fill":{"value":"white"},"width":{"value":2},"height":{"value":2}},
"update":{"x":{"signal":"ball.x"},"y":{"signal":"ball.y"}}
}
},{
"type":"rect",
"properties":{
"enter":{"fill":{"value":"white"},"width":{"value":2},"height":{"value":10},"x":{"value":2}},
"update":{"y":{"signal":"paddle1.y"}}
}
},{
"type":"rect",
"properties":{
"enter":{"fill":{"value":"white"},"width":{"value":2},"height":{"value":10},"x":{"value":60}},
"update":{"y":{"signal":"paddle2.y"}}
}
}]}</graph>