Atölye › Zelda Tarzı Zindan › 6/22. adım
Telefonda sol alt köşedeki soluk daire bir ped: bir kenarını basılı tut, o yöne yürü. Ortadan yana mı aşağı mı daha uzaksa yön o olur. (Başka bir yere dokunmak yakında kılıç sallayacak.)
```js
// Touch: the pad in the corner moves, a tap anywhere else swings the sword.
const PAD = { x: 70, y: 330, r: 60 }
let padDir = null
canvas.addEventListener('pointerdown', (event) => {
const rect = canvas.getBoundingClientRect()
const x = ((event.clientX - rect.left) * canvas.width) / rect.width
const y = ((event.clientY - rect.top) * canvas.height) / rect.height
const dx = x - PAD.x
const dy = y - PAD.y
if (Math.hypot(dx, dy) < PAD.r) padDir = Math.abs(dx) > Math.abs(dy) ? [Math.sign(dx), 0] : [0, Math.sign(dy)]
})
canvas.addEventListener('pointerup', () => {
padDir = null
})
let dir = padDir
// The touch pad, faint, in the corner.
ctx.strokeStyle = 'rgba(255, 255, 255, 0.25)'
ctx.lineWidth = 2
ctx.beginPath()
ctx.arc(PAD.x, PAD.y, PAD.r, 0, Math.PI * 2)
ctx.stroke()
```Math.hypot(dx, dy) < PAD.r → dokunuş dairenin içinde.Math.abs(dx) > Math.abs(dy) ? [Math.sign(dx), 0] : [0, Math.sign(dy)] → yana uzaklık büyükse yatay, değilse dikey;
Math.sign → −1 ya da 1: dört yönden biri.update artık null yerine padDir'den başlıyor; basılı bir ok tuşu yine önce gelir.ctx.restore()'dan sonra çiziliyor: 48 piksel kaydırma olmadan, tuvalin kendi köşesinde.update'te let dir = null satırını let dir = padDir yap.draw'ın sonuna (ctx.restore()'un altına) ped çizimini yaz. Çalıştır ve pede tıklayıp basılı tut.Beceriler: Klavye ve fare girdisi