使用 Jscex & HTML5 Canvas 制作的抽奖小程序

2016/12/06 22:19
阅读数 27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang='zh-CN' xml:lang='zh-CN' xmlns='http://www.w3.org/1999/xhtml'>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
<meta name="robots" content="index, follow" />
<title>开源中国 - 抽奖小程序</title>
<script type="text/javascript" src="http://www.oschina.net/js/2012/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-parser.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-jit.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-builderbase.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-async.js"></script>
<script type="text/javascript" src="http://repository.jscex.info/master/src/jscex-async-powerpack.js"></script>
<style>
* {font-size:12pt;font-weight:bold;}
body {margin: 5px;}
form {margin:0 0 20px 0;}
input {text-align:center;}
</style>
</head>
<body>
<form>
共有 100 个会员,抽取 <input type='text' id='c_count' name='count' value='10' size='4'/> 名幸运会员
<input type='button' id='btn_begin' value='开始抽奖' onclick='begin_chose()'/>
</form>
<canvas id="myCanvas">Fallback content, in case the browser does not support Canvas.</canvas>
</body>
 
<script type='text/javascript'>
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<ccount;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;
}));
 
</script>
</html>

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部