A Pen by CarterTsai.

airplain-canvas.markdown

airplain canvas

A Pen by CarterTsai on CodePen.

License.

index.html

<div class="background"></div>
<canvas></canvas>

script.js

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame

canvas = document.querySelector('canvas');
ctx = canvas.getContext('2d');

// http://mathjs.org/
var math = mathjs();

// resources 
var airplaneImg = 'https://dl.dropboxusercontent.com/u/15259002/airplane.png';

imageObj = new Image();
imageObj.src = airplaneImg;
imageObj.onload = function() {
};

var canvasInfo = {
  width: 0,
  height: 0,
  centerW: 0,
  centerH: 0
}
//
function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

// Airplane object
var Airplane = function() {
  this.x = math.randomInt(0,canvasInfo.height);
  this.y = canvasInfo.centerH;
  this.w = 50;
  this.v1 = 5; 
  this.v2 = 20;
  this.acc = 0; // acceleration
  this.time = 0;
  this.range = math.randomInt(0,canvasInfo.centerH);
  this.limit_x = canvasInfo.width;
  this.limit_y = canvasInfo.height;
  this.line = [];
  this.line_length = 50;
}

Airplane.prototype._line = function(x,y) {
  ctx.beginPath();
  ctx.rect(x, y, 3, 3);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.lineWidth = 0;
  //ctx.strokeStyle = 'black';
  ctx.stroke();
  ctx.beginPath();
  ctx.rect(x+10, y+10, 3, 3);
  ctx.fillStyle = 'red';
  ctx.fill();
  ctx.lineWidth = 0;
  //ctx.strokeStyle = 'black';
  ctx.stroke();
}

Airplane.prototype.drawLine = function(x,y) {
  var that = this;
  var _x = x-20;
  var _y = y+20;
  
  that._line(_x, _y);
  if(that.line.length !== 0){
    for (var i = 0; i < that.line.length; i++) {
      that._line(that.line[i].line_x, that.line[i].line_y);
    }  
  }
  
  // recorde
  if(that.line.length > that.line_length) {
    that.line.shift();
  } 
  that.line.push({"line_x":_x,"line_y":_y}); 
}

Airplane.prototype.draw = function() {
  var that = this;
  ctx.drawImage(imageObj, that.x, that.y);
  //that.drawLine(that.x, that.y);
  that.move(); 
}

Airplane.prototype.move = function() {
  var that = this;
  if(that.x <= that.limit_x) {
    // 
    that.time++;
    that.x = 0.5 * that.acc * Math.pow(that.time,2);
    that.y = math.cos(math.unit(that.x, 'deg')) * that.range + canvasInfo.centerH;
  } else {
    that.x = 0;
    that.time = 0;
  }
}

//
var airplanes = [];
var airplaneNum = 5;

var airplaneInit = function() {
  console.log("airplane init");
  for (var i = 0; i < airplaneNum; i++) {
    airplanes[i] = new Airplane();
    airplanes[i].acc = getRandomArbitrary(0.01, 0.05);
  }  
}

// Draw
var draw = function(){
  for(var i = 0; i < airplanes.length; i++) {
    airplanes[i].draw(); 
  }
}

var onresize = function(){
  canvas.width = canvas.clientWidth;
  canvas.height = canvas.clientHeight;
  // initial canvas info
  canvasInfo.width = canvas.width;
  canvasInfo.height = canvas.height;
  canvasInfo.centerW = canvasInfo.width/2;
  canvasInfo.centerH = canvasInfo.height/2;
  console.log(canvasInfo);
}

var initial = function() {
  onresize();
  airplaneInit();
  requestAnimationFrame(loop);
}

loop = function(){
  ctx.clearRect(0,0,canvas.width,canvas.height);
  draw();
  requestAnimationFrame(loop)
}

// start and inital
initial();

style.css

body{
  margin: 0;
}
canvas{
  position: absolute;
  width: 100%;
  height: 100%;
  background: #111a22;
}

style.scss

@import "compass/css3";
$body-background : #0c2322;
$game-backgound:  #233668;

/* 
 *   Layout order 
 *  1 is small
*/
$layout-order-background: 1;
$layout-order-canvas: 5;

body{
  margin: 0px;
  background: $body-background;
}

.background, canvas {
    width: 100%;
    height: 80%;
    top : 10%;
    bottom: 10%;
}

.background {
    position: absolute;
    background:  $game-backgound;
    z-index: $layout-order-background;
}
    
canvas{
    position: absolute;
    z-index: $layout-order-canvas;
}