如何用html5制作抽奖游戏,使用 Jscex & HTML5 Canvas 制作的抽奖小程序

之前些的一个

小抽奖程序已经无法满足需求，这个抽奖小程序是给

OSC源创会(北京)准备的。使用了

Jscex 和 HTML5 Canvas API 制作

在线演示：

http://www.osctools.net/jsbin/fliydwck/5

请使用 chrome 浏览器访问(有声音)，使用firefox浏览器(无声音)，使用IE浏览器(无法执行)

此程序仅供osc使用，不适合通用情况，因为有很多不足，你可以在这基础上改进并分享给大家。

1.[图片] 未命名-1.png

2.[文件] lottery.html ~ 4KB     下载(485)

开源中国 - 抽奖小程序

* {font-size:12pt;font-weight:bold;}

body {margin: 5px;}

form {margin:0 0 20px 0;}

input {text-align:center;}

共有 100 个会员，抽取 名幸运会员

Fallback content, in case the browser does not support Canvas.

var PERSON_COUNT = 100;

var brick_width = 40;

var brick_height = 22;

var col_count = 0;

var results=new Array();

var canvas = document.getElementById('myCanvas');

var ctx = canvas.getContext('2d');

var sound1,sound2,sound3;

resize_canvas();

draw_bricks();

load_songs();

function resize_canvas(){

var cWidth = document.body.clientWidth - 10;

var cHeight = (PERSON_COUNT / (cWidth / (brick_width+10))) * (brick_height+10) + 50;

if (canvas.width < cWidth)

canvas.width = cWidth;

if (canvas.height < cHeight)

canvas.height = cHeight;

}

function load_songs(){

sound1 = new Audio("http://www.oschina.net/uploads/e.wav");

sound1.load();

sound2 = new Audio("http://www.oschina.net/uploads/e2.wav");

sound2.load();

sound3 = new Audio("http://www.oschina.net/uploads/e3.wav");

sound3.load();

}

function draw_bricks(){

var x = 0,y = 0;

var tmp_c_count = 0;

for(c = 0; c < PERSON_COUNT; c++){

ctx.fillStyle="#40AA53";

ctx.fillRect(x, y, brick_width, brick_height);

ctx.fillStyle="#fff";

ctx.fillText(c+1,x+10,y+brick_height-7);

x += (brick_width + 10);

tmp_c_count ++;

if((x + brick_width) > canvas.width){

y += (brick_height + 10);

x = 0;

if(col_count == 0)

col_count = tmp_c_count;

}

}

}

function begin_chose(){

$('#btn_begin').attr('disabled',true);

var nc = parseInt($('#c_count').val());

beginAsync(nc).addEventListener("success", function () {

sound3.play();

$('#btn_begin').removeAttr("disabled");

}).start();

}

var beginAsync = eval(Jscex.compile("async", function(num_count){

do{

var thisV = $await(drawAsync(20));

if(jQuery.inArray(thisV, results)<0){

results.push(thisV);

sound2.play();

if(results.length >= num_count)

break;

}

}while(true);

}));

var drawAsync = eval(Jscex.compile("async", function (ccount) {

var last = -1;

var r;

for(oc=0;oc

r = Math.floor(Math.random() * PERSON_COUNT) + 1;//0-PERSON_COUNT

if(jQuery.inArray(r, results)>=0)

continue;

var x = ((r - 1) % col_count) * (brick_width + 10);

var y = (Math.ceil(r / col_count)-1) * (brick_height + 10);

//alert("r="+r+",x="+x+",y="+y);

//绘制高亮显示

ctx.fillStyle="#F00";

ctx.fillRect(x, y, brick_width, brick_height);

ctx.fillStyle="#fff";

ctx.fillText(r,x+10,y+brick_height-7);

//擦除之前的高亮显示

if(last > 0){

var x = ((last - 1) % col_count) * (brick_width + 10);

var y = (Math.ceil(last / col_count)-1) * (brick_height + 10);

//绘制高亮显示

ctx.fillStyle="#40AA53";

ctx.fillRect(x, y, brick_width, brick_height);

ctx.fillStyle="#fff";

ctx.fillText(last,x+10,y+brick_height-7);

}

last = r;

sound1.play();

$await(Jscex.Async.sleep(100)); // 暂停10毫秒

}

return r;

}));