Mute!

previous next

Adding sound is fine ... but sometimes you may want to have the option to turn it off without changing the code. I have used the variable speaker_on (in the source code of this html file) to link the state of the "speaker on/off" button; we can use this variable in our code as follows:

function Game(){
  this.ctx = $('#game-canvas')[0].getContext("2d");
  this.width = $("#game-canvas").width();
  this.height = $("#game-canvas").height();
  this.time_delay = 20;

this.clear_canvas = function(){
    this.ctx.clearRect(0, 0, this.width, this.height);
  };

this.loop = function(f){
    return setInterval(f, this.time_delay);
  };
}

function Ball(x, y, r, dx, dy, ctx) {
  this.x = x;
  this.y = y;
  this.r = r;
  this.dx = dx;
  this.dy = dy;
  this.ctx = ctx;

this.move = function(height, width) {
  var delta;

if (this.x + this.dx + this.r > width) {
    delta = this.x + this.dx + this.r - width;
    this.x = width - delta - this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else if ( this.x + this.dx - this.r < 0) {
    delta = this.x + this.dx - this.r;
    this.x = - delta + this.r;
    this.dx = - this.dx;
    play_sound("#wall_sound");
  }
  else {
    this.x += this.dx;
  }

if (this.y + this.dy + this.r > height) {
    delta = this.y + this.dy + this.r - height;
    this.y = height - delta - this.r;
    this.dy = - this.dy;
    play_sound("#wall_sound");
  }
  else if ( this.y + this.dy - this.r < 0) {
    delta = this.y + this.dy - this.r;
    this.y = - delta + this.r;
    this.dy = - this.dy;
    play_sound("#wall_sound");
  }
  else {
    this.y += this.dy;
  }
};

this.draw = function() {
    var c = this.ctx;
    c.beginPath();
    c.arc(this.x, this.y, this.r, 0, Math.PI*2, true);
    c.closePath();
    c.fill();
  };
}

Note that I have also moved the code for move back into the library.

Experiment!

Try it! Also, change the code to set the value of speaker_on to false at the beginning and see what that does.

previous next

Reeborg

Programming tutorials

Experiment!