Крути барабан!

by twobomb three

JavaScript

var canvas, ctx,ctxW = 500,ctxH = 500,wheel,prize;
//by twobomb
window.onload = function () {
    canvas = document.createElement("Canvas");
    canvas.width = ctxW;
    canvas.height = ctxH;
    document.body.appendChild(canvas);
	ctx = canvas.getContext("2d");
	canvas.addEventListener("click",function(e){
		var x = e.offsetX;
		var y = e.offsetY;
		if(x> btn.x && x < btn.x + btn.w && y > btn.y && y < btn.y + btn.h){
			wheel.speed = getRandNum(20,50,true);
			prize = "";
		}
	},false);
	wheel = new wheel(ctxW/2 ,ctxH/2 ,200,8,["#F00","#0F0","#00F","#000","#888","#FF0","#0FF","#444"],
	[100,200,300,400,500,600,700,"MegaPrize"]);
	window.btn = {x:wheel.x+wheel.r*0.7,y: wheel.y + wheel.r*0.7,w:100,h:50,draw:function(ctx){
		ctx.fillStyle = "#060";
		ctx.fillRect(this.x,this.y,this.w,this.h);
		ctx.fillStyle = "#FFF";
		ctx.font = "Bold 20px Arial"
		ctx.fillText("Крутить!",this.x+3,this.y+23);
		}};
	handler();
}

function wheel(x,y,r,cells,color,text){
	this.x = x || 0;
	this.y = y || 0;
	this.r = r || 10;//радиус
	if(typeof color == "object")
		this.color = color;
	else{
		this.color = new Array;
		for(var i = 0; i < cells; i++)
			this.color.push(randColor());
	}
	if(typeof text == "object")
		this.text = text;
	else{
		this.text = new Array;
		for(var i = 0; i < cells; i++)
			this.text.push((i+1)*100);
	}
	this.cells = cells || 1;//Количество ячеек(долек)
	this.angle = 0;//угол
	this.speed = 0;//текущая скорость вращения
	this.brakeSpeed = -0.11;//скорость торможения 
	this.move = function(){
		if(this.speed == 0)
			return false;
		this.angle = (this.angle+this.speed)%360;
		this.speed = (this.speed - this.brakeSpeed >0)?this.speed + this.brakeSpeed:0;
		if(this.speed  == 0){
			var a = this.cells - Math.ceil(this.angle/(360/this.cells));
			prize = this.text[a];
		}
	}
	this.draw = function(ctx){
		var angRast = (Math.PI*2)/this.cells;
		ctx.beginPath();
		ctx.strokeStyle = "#000";
		ctx.lineWidth = 10;
		ctx.arc(this.x,this.y,this.r,0,Math.PI *...