PONG with SVG.js

Tutorial on https://css-tricks.com/pong-svg-js/

by qfox

HTML

<div id="container"></div>

JavaScript

// define document width and height
const width = 600, height = 600, gs = 20

const ink = '#00003ff0'
const lightGray = '#f0f0ff'
const guideBlue = '#afafff'

// create SVG document and set its size
const svg1 = SVG().addTo('#container').size(width, height)
svg1.viewbox(0, 0, width, width)

// Converting x, y positions to svg-oriented
const xy = (x, y) => [(width / 2) + (x * gs), (height / 2) - (y * gs)]
const shiftxy = (c, s) => [c[0] + s[0], c[1] + s[1]]

const dot = (x, y, radius = 3) => svg1.circle(radius).fill(ink).move(...shiftxy(xy(x, y), [-radius/2, -radius/2]))

const grid = () => {
  // Drawing grid
  for (var i = -15; i <= 15; i += 1) {
    svg1.line([...xy(-15, i), ...xy(15, i)]).stroke({ color: lightGray, width: 0.5 })
    svg1.line([...xy(i, -15), ...xy(i, 15)]).stroke({ color: lightGray, width: 0.5 })
  //  svg1.line(20).fill('#f06').move(300, 300);
  }
}


svg1.circle(2).fill(lightGray).move(150 - 1, 150 - 1)
svg1.line([...xy(-15, 0), ...xy(15, 0)]).stroke({ color: guideBlue, width: 0.8 })
svg1.line([...xy(0, -15), ...xy(0, 15)]).stroke({ color: guideBlue, width: 0.8 })

grid()
dot(-3, -9)
dot(-2, -4)
dot(-1, -1)
dot(0, 0)
dot(1, 1)
dot(2, 4)
dot(3, 9)

// svg1.circle(2 * gs).fill('#f06').move(...xy(0, 0))

// var grid = draw.line(0, 0, 100, 150).stroke({ width: 1 })










function makeArrow(destination, start = { x: 0, y: 0 }) {
  let height = 10;
  let base = 5;

  let P = destination;

  // I'd normally write this out as "theta", but JavaScript supports Unicode identifiers, nice 😎
  let θ = Math.atan((destination.y - start.y)/(destination.x - start.x));
  let α = Math.PI / 2 - θ;

  let ΔQ = { x: base * Math.cos(α), y: base * Math.sin(α) }
  let Q = { x: P.x - ΔQ.x, y: P.y + ΔQ.y }
  let S = { x: P.x + ΔQ.x, y: P.y - ΔQ.y }

  let ΔR = { x: height * Math.cos(θ), y: height * Math.sin(θ) }
  let R = { x: P.x + ΔR.x, y: P.y + ΔR.y }

  // draw.path('M0 0 H50 A20 20 0 1 0 100 50 v25 C50 125 0 85 0 85 z')
	return svg1.path(`M...