【实例简介】

【实例截图】

【核心代码】

骰子游戏

body{ text-align:center;}

#can{ border:1px solid black;}

//定时器变量

var tidck =null;

//存放图片的容器

var can;

//画布

var ctx;

//骰子每次的点数的数组

var SumArray = [];

//摇骰子点数的总次数

//var sum = 0;

//每次骰子点数的和

var ranSum = 0;

//骰子变化次数

var count = 0;

//圆点的坐标

var pointCoordinates = [[20,20],[[10,10],[30,30]],[[10,10],[20,20],[30,30]],[[10,10],[10,30],[30,10],[30,30]],[[10,10],[10,30],[20,20],[30,10],[30,30]],[[10,10],[10,20],[10,30],[30,10],[30,20],[30,30]]];

//骰子的坐标

var diceCoordinates = [[40,10],[120,10],[180,10],[250,10],[330,10],[400,10]];/**/

window.onload = function(){

can = document.getElementById('can');

ctx = can.getContext("2d");

/*初始化骰子*/

/*ctx.clearRect(0,0,can.width,can.height);

for(var i=0;i

ctx.fillStyle = 'orange';

ctx.fillRect(diceCoordinates[i][0],diceCoordinates[i][1],40,40);

draw(diceCoordinates[i],i,pointCoordinates[i]);

}*/

loadCoordinates();

/*初始化骰子*/

document.getElementById('btnStart').onclick = function(){

//alert(SumArray.length);

if(SumArray.length<=8){

//sum ;

count = 0;

tidck = setInterval(drawCoordinates,100);

}

else{

if(config("摇骰子的次数不能大于8次,是否清空重新摇骰子？")){

//sum = 0;

count = 0;

SumArray.splice(0,SumArray.length);

loadCoordinates();

tidck = setInterval(drawCoordinates,100);

}

}

};

}

//初始化骰子

function loadCoordinates(){

ctx.clearRect(0,0,can.width,can.height);

for(var i=0;i

ctx.fillStyle = 'orange';

ctx.fillRect(diceCoordinates[i][0],diceCoordinates[i][1],40,40);

draw(diceCoordinates[i],i,pointCoordinates[i]);

}

}

//开始摇骰子

function drawCoordinates()

{

//执行一定次数后放慢速度(使用修改定时执行的时间来达到效果)

if(count == 30){

//清除定时执行

window.clearInterval(tidck);

//给定时执行赋新的时间

tidck = setInterval(drawCoordinates,200);

}

else if(count == 45){

window.clearInterval(tidck);

tidck = setInterval(drawCoordinates,500);

}

else if(count == 48){

window.clearInterval(tidck);

tidck = setInterval(drawCoordinates,800);

}

else if(count >= 50){

window.clearInterval(tidck);

//alert("摇骰子完成");

//将每次的值放进数组

SumArray.push(ranSum);

drawText(ranSum);

}

else{

//每次的时候先把上一次的点数清零

ranSum = 0;

//清理画布

ctx.clearRect(0,0,can.width,60);

for(var i=0;i

//画笔颜色

ctx.fillStyle = 'orange';

//画正方形

ctx.fillRect(diceCoordinates[i][0],diceCoordinates[i][1],40,40);

//获取随机数

var ran = Math.floor(Math.random()*6);

ranSum =ran 1;

draw(diceCoordinates[i],ran,pointCoordinates[ran]);/**/

}

}

count ;

}

//画骰子的点

function draw(dice,ran,drowArray){

ctx.fillStyle = 'red';

for(var i = 0;i<=ran;i ){

var array = drowArray[i];

ctx.beginPath();

if(ran==0)

{

//alert(drowArray[0]);

ctx.arc(drowArray[0] dice[0],drowArray[1] dice[1],5,0,Math.PI*2,true);

}

else

{

ctx.arc(array[0] dice[0],array[1] dice[1],5,0,Math.PI*2,true);

}

ctx.closePath();

ctx.fill();

}

}

function drawText(ranSum){

ctx.font="30px Verdana";

ctx.fillText("第" (SumArray.length) "次摇的点数是：" SumArray[SumArray.length-1] " " (SumArray[SumArray.length-1]>18?"大":"小"),40,90 40*(SumArray.length-1));

}