1 /**
  2  * The background canvas
  3  * @constructor
  4  */
  5 function BB_Drawer() {}
  6 
  7 /**
  8  * Extends CP_Canvas
  9  */
 10 BB_Drawer.prototype = new CP_Canvas(480, 320);
 11 
 12 /**
 13  * Generate random value
 14  * @param {Number} value
 15  * @returns {Number}
 16  */
 17 BB_Drawer.prototype.rand = function(value) {
 18 	return Math.round(Math.random() * value) - (value / 2);
 19 };
 20 
 21 /**
 22  * Draw the main scene informations
 23  */
 24 BB_Drawer.prototype.info = function() {
 25 	var ctx = this.ctx,
 26 		title = "BOUNCING BUTTON",
 27 		desc = [
 28 			"Shoot the red button 3 times",
 29 			"Collect all golden buttons",
 30 			"Avoid holes",
 31 			"Bounce off walls"
 32 		];
 33 	ctx.save();
 34 	ctx.font = "bold 36px Arial";
 35 	ctx.textAlign = "center";
 36 	ctx.textBaseline = "middle";
 37 	ctx.lineWidth = 4;
 38 	ctx.strokeStyle = "#852";
 39 	ctx.fillStyle = "#f90";
 40 	ctx.strokeText(title, 240, 55);
 41 	ctx.fillText(title, 240, 55);
 42 	ctx.font = "bold 16px Arial";
 43 	ctx.fillStyle = "#420";
 44 	ctx.textAlign = "left";
 45 	for (var i=0; i<desc.length; i++) {
 46 		ctx.fillText(desc[i], 190, 110 + i * 35);
 47 	}
 48 	this.hole(140, 180, 18, 2);
 49 	this.wood(115, 205, 50, 20, 2, 2);
 50 	ctx.restore();
 51 };
 52 
 53 /**
 54  * Draw hole
 55  * @param {Number} x
 56  * @param {Number} y
 57  * @param {Number} r
 58  * @param {Number} stroke
 59  */
 60 BB_Drawer.prototype.hole = function(x, y, r, stroke) {
 61 	var ctx = this.ctx;
 62 	ctx.save();
 63 	ctx.translate(x, y);
 64 	if (stroke) {
 65 		ctx.save();
 66 		ctx.scale(1.1, 1);
 67 		ctx.beginPath();
 68 		ctx.arc(stroke, 0, r + stroke, 0, 2 * Math.PI, false);
 69 		ctx.fillStyle = "#852";
 70 		ctx.fill();
 71 		ctx.restore();	
 72 	}
 73 	ctx.beginPath();
 74 	ctx.arc(0, 0, r, 0, 2 * Math.PI, false);
 75 	ctx.fillStyle = "#000";
 76 	ctx.fill();
 77 	ctx.restore();	
 78 };
 79 
 80 /**
 81  * Draw wood pattern rectangle
 82  * @param {Number} x
 83  * @param {Number} y
 84  * @param {Number} w
 85  * @param {Number} h
 86  * @param {Number} r
 87  * @param {Number} stroke
 88  */
 89 BB_Drawer.prototype.wood = function(x, y, w, h, r, stroke) {
 90 	var ctx = this.ctx,
 91 		color = stroke ? "#852" : "#b85";
 92 	ctx.save();
 93 	ctx.beginPath();
 94 	ctx.rect(x, y, w, h);
 95 	ctx.fillStyle = stroke ? "#963" : "#c96";
 96 	ctx.lineWidth = stroke || 0;
 97 	ctx.strokeStyle = color;
 98 	if (stroke) {
 99 		ctx.save();
100 		ctx.shadowBlur = 10 * this.scale;
101 		ctx.shadowColor = "#000";
102 		ctx.shadowOffsetX = 5 * this.scale;
103 		ctx.shadowOffsetY = 5 * this.scale;
104 		ctx.fill();
105 		ctx.restore();
106 		ctx.stroke();
107 	} else {
108 		ctx.fill();
109 	}
110 	ctx.restore();
111 	if (w >= h) {
112 		for (var i=r; i<h-r; i+=r) {
113 			ctx.save();
114 			ctx.translate(x, y + i + this.rand(r));
115 			ctx.beginPath();
116 			ctx.moveTo(0, this.rand(r));
117 			ctx.bezierCurveTo(w/3, this.rand(r), w/3*2, this.rand(r), w, this.rand(r));
118 			ctx.lineTo(w, this.rand(r));
119 			ctx.bezierCurveTo(w/3*2, this.rand(r), w/3, this.rand(r), 0, this.rand(r));
120 			ctx.fillStyle = color;
121 			ctx.fill();
122 			ctx.restore();
123 		}
124 	} else {
125 		for (var i=r; i<w-r; i+=r) {
126 			ctx.save();
127 			ctx.translate(x + i + this.rand(r), y);
128 			ctx.beginPath();
129 			ctx.moveTo(this.rand(r), 0);
130 			ctx.bezierCurveTo(this.rand(r), h/3, this.rand(r), h/3*2, this.rand(r), h);
131 			ctx.lineTo(this.rand(r), h);
132 			ctx.bezierCurveTo(this.rand(r), h/3*2, this.rand(r), h/3, this.rand(r), 0);
133 			ctx.fillStyle = color;
134 			ctx.fill();
135 			ctx.restore();
136 		}
137 	}
138 };
139