View source for Pong Jr.

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

<div class="animated-graph"><graph>{"width":64,"height":36,"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":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><div class="animated-graph-overlay"></div></div>{{#css:.mw-graph{border-color:white}.animated-graph{position:relative;width:max-content;height:max-content}.animated-graph-overlay{position:absolute;top:0px;left:0px;width:100%;height:100%;transition:width .00000001s}.animated-graph-overlay:hover{width:0px} }}
[[Category:Juniors]][[Category:Pong]][[Category:Minigames]][[Category:Graph minigames]]