html5 摇骰子游戏 HTML5+JavaScript实现掷骰子游戏代码

Craps掷骰子游戏

var cwidth =400;

var cheight = 300;

var dicex = 50;

var dicey = 50;

var dicewidth = 100;

var diceheight = 100;

var dotard = 6;

var ctx;

var dx;

var dy;

var firstturn = true;

var point;

function throwdice(){

var sum;

var ch = 1+ Math.floor(Math.random()*6);

sum = ch;

dx = dicex;

dy = dicey;

drawface(ch);

dx = dicex +150;

ch = 1+Math.floor(Math.random()*6);

sum +=ch;

drawface(ch);

if(firstturn){

switch(sum){

case 7:

case 11:

document.f.outcome.value = "You win!";

break;

case 2:

case 3:

case 12:

document.f.outcome.value = "You lose!";

break;

default:

point = sum;

document.f.pv.value = point;

firstturn = false;

document.f.stage.value = "Need follow-up throw.";

document.f.outcome.value=" ";

}

}

else{

switch(sum){

case point:

document.f.outcome.value = "You win!";

document.f.stage.value = "Back to first throw.";

document.f.pv.value=" ";

firstturn = true;

break;

case 7:

document.f.outcome.value="You lose!";

document.f.stage.value="Back to first throw.";

document.f.pv.value=" ";

firstturn = true;

}

}

}

function drawface(n){

ctx = document.getElementById('canvas').getContext('2d');

ctx.lineWidth = 5;

ctx.clearRect(dx,dy,dicewidth,diceheight);

ctx.strokeRect(dx,dy,dicewidth,diceheight);

var dotx;

var doty;

ctx.fillStyle = "#009966";

switch(n){

case 1:

draw1();

break;

case 2:

draw2();

break;

case 3:

draw2();

draw1();

break;

case 4:

draw4();

break;

case 5:

draw4();

draw1();

break;

case 6:

draw4();

draw2mid();

break;

}

}

function draw1(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + .5*dicewidth;

doty = dy + .5*diceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw2(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw4(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw2mid(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + .5*deiceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard;

doty = dy + .5*deiceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

浏览器不支持HTML5的canvas元素

Throw dice

Stage:

Point:

Outcome: