Intro to JS: Day 2

Goals for the day

• Timing functions
• window.requestAnimationFrame(func)
• Making graphics with sprites
• HTML elements
• More User Interactions
• HTML 5 Sound
• Upload to github!
  
  
• Day 1 notes here
• All files available on this project's Github Page

Fixed time interval (Old method)

• Change time (1000/fps) and some change per second (dx/dy)
• This only works if code runs infinitely fast (nope!)
• You can never guarentee that fps will actually be the true number
• Slow computers can grossly affect game math
• More advanced games will use other maths and easing functions
• View example1.js for full code

Fixed Timing (demo)

// inside move()
  ball.x += ball.dx/fps;
  ball.y += ball.dy/fps;

  // adjust max value of i to slow this down
  for (var i=0;i<10000000;i++) { Math.sqrt(2) }

Timing based on last_time

• Save a time for each frame
• Use time since last frame (elapsed_time)
• Calculate move (positions of paddle and ball)
• View example2.js for full code

// in global scope
var last_time, elapsed_time, now;

// in the top of tick()
  now = new Date().valueOf();
  elapsed_time = (now-last_time)/1000;
  last_time = now;

//in move()
  ball.x += ball.dx*elapsed_time;
  ball.y += ball.dy*elapsed_time;

  // move padle                                                                                                              
  if (leftDown) {
    paddle.x -= paddle.dx*elapsed_time;
    paddle.x = Math.max(0,paddle.x);
  }
  if (rightDown) {
    paddle.x += paddle.dx*elapsed_time;
    paddle.x = Math.min(WIDTH-paddle.w,paddle.x)
  }

// in start()
  now = new Date().valueOf();
  last_time = new Date().valueOf();

Timing based on last_time (demo)

requestAnimationFrame(function)

• On fast machines setInterval can be too fast (which wastes resources)
• requestAnimationFrame will only fire every time the graphics card wants to paint
• Must be called everytime the loop ends
• View step8.js for full code

// last line of tick!
  current_frame = requestAnimationFrame(tick);

function stop() {
  cancelAnimationFrame(current_frame);
} 

function start() {
  var current_frame = requestAnimationFrame(tick);
}

Demo: requestAnimationFrame(function)

• View step8.js for full code

// last line of tick!
  current_frame = requestAnimationFrame(tick);

function stop() {
  cancelAnimationFrame(current_frame);
}

function start() {
  var current_frame = requestAnimationFrame(tick);
}

Sprites

• Use an image with all the images for the game
• Cut out sprites and paste on the image
• Here's a sprite map I made:
  
• Each sprite is 8 wide and 16 high
• Sprites drawn with context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
• s === source (image)
• d === destination (canvas)
• Some values are optional (see Dive Into HTML5)
• View step9.js for full code

Sprites: Code

// new function brick(b);
var brick_sprites = document.createElement("img");
brick_sprites.src = "brick_sprites.png";
function draw_brick(b) {
  context.drawImage(brick_sprites,b.sx,b.sy,b.sw,b.sh,b.x,b.y,b.w,b.h);
}

//modified createBricks
function createBricks(o) {
  var out = [], x, y, col_max, color;
  var sw = 16;
  var sh = 8;
  var sprite_rows = [0,1,2,3,4,5,6,7];
  for (var row=0; row<o.rows; row++) {
    col_max = Math.floor(o.canvas.width / (o.w+o.separation));
    if (row%2 == 0) { col_max -=1; }
    y = (row+3)*(o.h + o.separation) + o.separation;
    for (var col=0; col<col_max; col++) {
      x = col*(o.separation + o.w) + o.separation;
      if (row%2 == 0) { x += o.w/2; }
      var sprite_row = sprite_rows[Math.floor((row+col)%sprite_rows.length)];
      sprite_col = Math.floor(Math.random()*5);
      var brick = {
        sx: sprite_col*sw,
        sy: sprite_row*sh,
        sw: sw,
        sh: sh,
        x: x, y: y, w: o.w, h: o.h, broken: false //old options
      };
      out.push(brick);
    }
  }
  return out;
}

//in draw instead of rect(b)
draw_brick(b)

Sprites: Demo

More Human Interaction: onmousemove

• Much like keydown and keyup, passes an event into a function when an event is triggered
• We'll use onmousemove and event.layerX event.layerY
• Use console.log(event) to see what other options there are
• Quirksmode is an excellent resource to learn more.
• View step10.js for full code

// Mouse Input
//-------------------

function onMouseMove(event) {
  paddle.x = event.layerX-paddle.w/2;
}
canvas.addEventListener("mousemove",onMouseMove);

More Human Interaction: tilt sensor

• Complicated because phones are different and newer
• You can't control what happens if they tilt their phone too far!
• View step11.js for full code
• Shortened url for demo: http://bit.ly/1vX9NTI

// Accelerometer
//-----------------
function tilt(bg) {
  var max_angle = 60;
  var angle = bg[1]+max_angle/2;
  paddle.x = angle/max_angle*WIDTH;
  paddle.x = Math.min(paddle.x,WIDTH - paddle.w);
  paddle.x = Math.max(paddle.x,0);
}

if (window.DeviceOrientationEvent) {
    window.addEventListener("deviceorientation", function () {
        tilt([event.beta, event.gamma]);
    }, true);
} else if (window.DeviceMotionEvent) {
    window.addEventListener('devicemotion', function () {
        tilt([event.acceleration.x * 2, event.acceleration.y * 2]);
    }, true);
} else {
    window.addEventListener("MozOrientation", function () {
        tilt([orientation.x * 50, orientation.y * 50]);
    }, true);
}

HTML5 Sound

• Still under development, not supported by all browsers
• Create a sound controller with it's own API so that you can change the sounds yourself
• Need to create multiple copies of the sounds since it won't play again unless first sound is finished
• Sounds taken from Sound Jay

function Sound(src,repeat) {
  var elements = [];
  for (var i=0;i<repeat;i++) {
    var audio = document.createElement("audio");
    var mp3 = document.createElement("source");
    mp3.src = src + ".mp3";
    audio.appendChild(mp3);
    var wav = document.createElement("source");
    wav.src = src + ".wav";
    audio.appendChild(wav);
    elements.push(audio);
  }
  var last_played = 0;
  function play() {
    last_played +=1;
    if (last_played == repeat) {
      last_played = 0;
    }
    elements[last_played].play();
  }
  function stop() { elements[last_played].stop(); }
  function set_volume(level) {
    for (var i=0;i<elements.length;i++) { elements[i].volume=level; }
  }
  return {
    play: play,
    stop: stop,
    set_volume: set_volume
  }
}

var beep = new Sound("beep",8);
beep.set_volume(0.5);

// anywhere you want a beep
  beep.play()

HTML5 Sound (demo)

Host it on Github

• Go to github.com
• Create an account or sign in
• Go to your email and verify the email.
• Open up the empty "breakout" repository on my github
• Click the fork button in the top right corner
• Click the dropdown where it says "branch:master" and type "gh-pages" then hit enter
• Create a file (the plus button above the file listing), call it index.html
• Copy your index.html content and save it
• Do the same for the javascript file (whatever you call it)
• Wait about 10 minutes and go to username.github.com/breakout/

Thanks for taking this class!

• Update your github with any more changes and email me the link
• Come show off at our next Recreational Computer Programming meetup

What now?

• The code is still pretty disorganized. I'd move it into these functions:
  1. init() - A function that holds everything that needs to happen once before the game starts
  2. startLevel(level_options) - creates a new level and plays it
  3. gameOver - Display an end of game screen and a button to restart the game
• If all that is smooth you should be ready to make new levels
  (hint, when all the bricks are done run startLevel(second_level_options)
• Add power-ups and a scoring system
• Add bricks that don't break, bricks that break from a certain angle, etc.