/*
categories: relative
files:
../point_src/core/head.js
../point_src/pointpen.js
../point_src/pointdraw.js
../point_src/extras.js
../point_src/math.js
../point_src/point-content.js
../point_src/stage.js
../point_src/point.js
../point_src/distances.js
../point_src/pointlist.js
../point_src/events.js
../point_src/automouse.js
../point_src/relative.js
../point_src/keyboard.js
../point_src/screenwrap.js
The arrow keys pushes the ship in a frictionless 2D space.
Keydown performs an `impartOnRads` to _push_ the ship in the pointing direction
*/
// Function to convert angle to velocity vector
function angleToVelocity(theta, speed) {
return {
x: speed * Math.cos(theta),
y: speed * Math.sin(theta)
};
}
class MainStage extends Stage {
canvas = 'playspace'
mounted() {
console.log('mounted')
// this.screenwrap = new ScreenWrap
this.mouse.position.vy = this.mouse.position.vx = 0
this.a = new Point({ x: 200, y: 200, vx: 0, vy: 0})
this.keyboard.onKeydown(KC.UP, this.onUpKeydown.bind(this))
this.keyboard.onKeyup(KC.UP, this.onUpKeyup.bind(this))
this.keyboard.onKeydown(KC.LEFT, this.onLeftKeydown.bind(this))
this.keyboard.onKeydown(KC.RIGHT, this.onRightKeydown.bind(this))
this.keyboard.onKeydown(KC.DOWN, this.onDownKeydown.bind(this))
this.keyboard.onKeyup(KC.DOWN, this.onDownKeyup.bind(this))
this.a.update({radius: 10})
this.rotationSpeed = 0
this.power = 0
this.powerDown = false
}
addMotion(point, speed=1) {
/* Because we're in a zero-gravity space, the velocity is simply _added_
to the current XY, pushing the point in the direction of forced. */
point.x += point.vx
point.y += point.vy
return
}
performPower(){
if(this.powerDown === true) {
/* Applied here, bcause a spaceship only applied force when the thottle is on.*/
this.impart(.01)
return
}
this.power = 0
if(this.reverseDown === true) {
this.impart(-.01)
}
}
onUpKeydown(ev) {
/* On keydown we add some to the throttle.
As keydown first repeatedly, this will raise the power until
keyup */
this.powerDown = true
}
onUpKeyup(ev) {
/* Reset the throttle */
this.powerDown = false
}
impart(speed=1, direction=new Point(1,0)){
/* Impart _speed_ for momentum relative to the direction the the point.
For example - pointing _right_ and applying the _{1,0}_ direction (denoting forward)
will push the point further right, applying _{0, 1}_ pushes the point _left_
relative to its direction.
Or to rephase, imagine a engine on the back of the point - pushing _forward_.
*/
let a = this.a
const r = impartOnRads(a.radians, direction)
a.vx += r.x * speed;
a.vy += r.y * speed;
}
onDownKeydown(ev) {
this.reverseDown = true
}
onDownKeyup(ev) {
this.reverseDown = false
}
onLeftKeydown(ev) {
/* Rotate the point as if spinning on the spot.
This rotation Speed is applied constantly in `this.updateShip`
*/
if(ev.shiftKey || ev.ctrlKey) {
/* Perform a _crab_ left */
this.impart(.02, new Point(0, -1))
return
}
this.rotationSpeed -= 1
}
onRightKeydown(ev) {
/* Rotate the point as if spinning on the spot.
This rotation Speed is applied constantly in `this.updateShip`
*/
if(ev.shiftKey || ev.ctrlKey) {
/* Perform a _crab_ right */
this.impart(.02, new Point(0, 1))
return
}
this.rotationSpeed += 1
}
updateShip(){
let a = this.a;
a.rotation += this.rotationSpeed
this.rotationSpeed *= .99
/* We could constantly push here - however without motion dampening
it's likely you'll always drift
(in the direction of radians - like a leaky engine) */
// this.impart(this.power)
this.addMotion(a, this.speed)
this.screenWrap.perform(a)
this.performPower()
}
draw(ctx) {
this.clear(ctx)
this.updateShip()
this.a.pen.indicator(ctx)
}
}
const stage = MainStage.go()