window.onload = () => { startX = 0; startY = 0; endX = 0; endY = 0; c = document.getElementsByTagName("canvas")[0]; c.width = W; c.style.width = W; c.height = H - 4; c.style.height = H; rAF = window.requestAnimationFrame(() => {}); direction = "none"; ctx = c.getContext("2d"); Circle.draw() } const W = window.innerWidth; const H = window.innerHeight; const {abs, PI} = Math; const random = (max, min = 0) => max > min? Math.random() * (max - min) + min: Math.random() * (min - max) + max; window.ontouchstart = e => { startX = e.touches[0].clientX; startY = e.touches[0].clientY; } window.ontouchmove = e => { endX = e.touches[0].clientX; endY = e.touches[0].clientY; } window.ontouchend = () => { window.cancelAnimationFrame(rAF); diffX = abs(startX - endX); diffY = abs(startY - endY); if (startY < endY && diffX < diffY) direction = "down"; else if (startY > endY && diffX < diffY) direction = "up"; else if (startX < endX && diffX > diffY) direction = "right"; else if (startX > endX && diffX - diffY) direction = "left"; if (Circle.x + Circle.r >= W) Circle.x--; else if (Circle.x - Circle.r <= 0) Circle.x++; else if (Circle.y + Circle.r >= H) Circle.y--; else if (Circle.y - Circle.r <= 0) Circle.y++; window.requestAnimationFrame(update) } const Circle = { r: 30, x: W / 2, y: H / 2, red: random(255), green: random(255), blue: random(255), dr: random(-2, 2), dg: random(-2, 2), db: random(-2, 2), move() { if (Circle.x + Circle.r < W && Circle.x - Circle.r > 0 && Circle.y + Circle.r < H && Circle.y - Circle.r > 0) { switch (direction) { case "up": Circle.y--; break; case "down": Circle.y++; break; case "right": Circle.x++; break; case "left": Circle.x--; break; } Circle.red += Circle.dr; Circle.green += Circle.dg; Circle.blue += Circle.db; } if (Circle.red > 255) { Circle.red = 255; Circle.dr *= -1; } else if (Circle.red < 0) { Circle.red = 0; Circle.dr *= -1; } else if (Circle.green > 255) { Circle.green = 255; Circle.dg *= -1; } else if (Circle.green < 0) { Circle.green = 0; Circle.dg *= -1; } else if (Circle.blue > 255) { Circle.blue = 255; Circle.db *= -1; } else if (Circle.blue < 0) { Circle.blue = 0; Circle.db *= -1; } Circle.draw(); }, draw() { ctx.strokeStyle = `rgb(${Circle.red}, ${Circle.green}, ${Circle.blue})`; ctx.beginPath(); ctx.arc(Circle.x, Circle.y, Circle.r, 0, PI * 2, true); ctx.closePath(); ctx.stroke(); } } const update = () => { Circle.move(); rAF = window.requestAnimationFrame(update); }

Swipe.