Atölye › Asteroids › 3/41. adım
Oyun programcılarının her gün kullandığı tek trigonometri bilgisi şu:
aaçısındaki yön,(Math.cos(a), Math.sin(a))ikilisidir.
Math.cos(a) o yönde sağa ne kadar gidildiğini, Math.sin(a) aşağı ne kadar gidildiğini söyler (ikisi de -1
ile 1 arası). Merkezden a yönünde r piksel ötedeki nokta: x + cos(a) * r, y + sin(a) * r.
Geminin burnu merkezden SHIP_R (14) piksel ötede, baktığı yönde. Şimdilik burundan merkeze beyaz bir çizgi
çizeceğiz: pusula iğnesi gibi, geminin nereye baktığını gösterir.
```js
const SHIP_R = 14 // the ship's size: distance from its center to its nose
function drawShip() {
const tip = { x: ship.x + Math.cos(ship.angle) * SHIP_R, y: ship.y + Math.sin(ship.angle) * SHIP_R }
ctx.beginPath()
ctx.moveTo(tip.x, tip.y)
ctx.lineTo(ship.x, ship.y)
ctx.stroke()
}
ctx.strokeStyle = 'white'
ctx.lineWidth = 2
drawShip()
```Math.cos(ship.angle) * SHIP_R → baktığı yönde sağa ne kadar; Math.sin(ship.angle) * SHIP_R → aşağı ne kadar.
Yukarı bakınca cos 0, sin -1: burun (300, 211), merkezin 14 piksel üstü.const tip = { x: ..., y: ... } → burnun yeri, iki bilgili küçük bir nesne.ctx.beginPath() → yeni bir çizime başla.ctx.moveTo(tip.x, tip.y) → kalemi buruna koy (çizmeden).ctx.lineTo(ship.x, ship.y) → oradan merkeze çizgi çek.ctx.stroke() → çizgileri boya. İçini doldurmuyoruz: 1979'daki orijinal oyunun parlayan çizgi görünümü.ctx.strokeStyle = 'white' → çizgi rengi, ctx.lineWidth = 2 → çizgi kalınlığı (piksel).const ctx = ... satırının altındaki boş satırdan sonra SHIP_R satırını yaz; altında bir boş satır kalsın
(let ship'ten önce).function draw() { satırının üstüne drawShip fonksiyonunu yaz; altında bir boş satır kalsın.draw içinde siyah arka planı boyayan fillRect satırının altına bir boş satır bırakıp üç yeni satırı yaz.Beceriler: Hız ve yerçekimi, Canvas üzerine çizim