Driving with Victor.js and CreateJS

  • Hold down W to accelerate.
  • Press A and D to steer.
  • victor.js is used as a library.
  • createjs is used as a library.

vector.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
var stage = new createjs.Stage("demoCanvas");

var key = [];
function createVehicle(location){
  var vehicle = {
    circle: new createjs.Shape(),
    vec: new Victor(0, 0),
    direction: new Victor(location.x, location.y),
    accelerate: function (vec2) {
      this.vec.add(this.vec.clone().normalize().multiply(vec2));
    },
    deccelerate: function (a) {
      this.vec.mix(new Victor(0,0), a);
    },
    newDirection: function (){
      // w
      if (key[87]){
        this.accelerate(new Victor(0.07,0.07));
      }
      // s
      if (key[83]){
        this.deccelerate(0.022);
      }
      // a
      if (key[65]){
        this.vec.rotateDeg(-3);
      }
      // d
      if (key[68]){
        this.vec.rotateDeg(3);
      }
      // crush
      if (this.circle.x <= 0 && this.vec.x < 0 || this.circle.x >= (stage.canvas.width-50) && this.vec.x > 0){
        this.vec.invertX();
        this.vec.divide(new Victor (5,1.5));
      }
      if (this.circle.y <= 0 && this.vec.y < 0 || this.circle.y >= (stage.canvas.height-50) && this.vec.y > 0){
        this.vec.invertY();
        this.vec.divide(new Victor (1.5,5));
      }
      // friction
      var friction = new Victor(0.02,0.02);
      this.deccelerate(0.016);

      this.direction.x = this.circle.x + this.vec.x;
      this.direction.y = this.circle.y + this.vec.y;
    }
  }
  vehicle.circle.graphics.beginFill("#ffe082").drawCircle(20, 20, 5);
  vehicle.circle.x = location.x;
  vehicle.circle.y = location.y;
  return vehicle
}

function buildCars(){
  var car = createVehicle({x: 0,y: 0})
  stage.addChild(car.circle);
  createjs.Ticker.addEventListener("tick", function(event){
    if (!event.paused) {
      car.newDirection();
      // console.log(car.direction.length());
      createjs.Tween.get(car.circle, { loop: false })
      .to({ x: car.direction.x, y: car.direction.y })
       // Actions carried out when the Ticker is not paused.
       //console.log(event);
   }
  });
}

function spread(x,y){
  x = x + _.random(-10,10);;
  y = y + _.random(-10,10);;
}
function init() {
  buildCars();
  createjs.Ticker.setFPS(60);
  createjs.Ticker.addEventListener("tick", stage);

//   createjs.Ticker.addEventListener("tick", handleTick);
}
function handleTick(event) {
   // Actions carried out each tick (aka frame)
   if (!event.paused) {
      car.newDirection();
      createjs.Tween.get(car.circle, { loop: false })
      .to({ x: car.direction.x, y: car.direction.y }, 1)
      console.log(car);
       // Actions carried out when the Ticker is not paused.
       //console.log(event);
   }
}

// http://stackoverflow.com/questions/5203407/javascript-multiple-keys-pressed-at-once
onkeydown = onkeyup = function(e){
  e = e || event; // to deal with IE
  key[e.keyCode] = e.type == 'keydown';
  /*insert conditional here*/
}