两颗骰子

最新推荐文章于 2021-10-24 14:24:07 发布

原创最新推荐文章于 2021-10-24 14:24:07 发布 · 382 阅读

CC 4.0 BY-SA版权

这是一个简单的Craps赌博游戏模拟器，使用HTML5 Canvas绘制骰子并根据掷骰结果更新游戏状态。玩家可以进行第一轮投注，并根据不同的点数情况继续游戏或结算赌注。

<html>
<head>
<title>Craps game</title>
<script>
var cwidth=400;
var cheight=300;
var dicex=50;
var dicey=50;
var dicewidth=100;
var diceheight=100;
var dotrad=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);
var bank=Number(document.f.bank.value);
if(bank<10){
alert("You ran out of money! Add some more money and try again");
return;
}
bank-=10;
document.f.bank.value=String(bank);
if(firstturn){
switch(sum){
case 7:
case 11:
document.f.outcome.value="You win!";
bank=Number(document.f.bank.value);
bank+=20;
document.f.bank.value=String(bank);
break;//显示You win!
case 2:
case 3:
case 12:
document.f.outcome.value="You lose!";//显示You lose!
break;
default:
point=sum;
document.f.pv.value=point//显示point值
firstturn=false;
document.f.stage.value="Need follow-up throw.";
document.f.outcome.value=" ";//清空outcome域
}
}
else{
switch(sum){
case point:
document.f.outcome.value="You win!";
document.f.stage.value="Back to first throw.";//显示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=3;
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,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}

function draw2(){
var dotx;
var doty;
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx=dx+dicewidth-3*dotrad;
doty=dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}

function draw4(){
var dotx;
var doty;
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);//第一个圆在左上角
dotx=dx+dicewidth-3*dotrad;
doty=dy+diceheight-3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);//第二个圆在右下角
ctx.closePath();//结束路径
ctx.fill(); //画两个圆
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+diceheight-3*dotrad;//左下角
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx=dx+dicewidth-3*dotrad;
doty=dy+3*dotrad;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}

function draw2mid(){
var dotx;
var doty;
ctx.beginPath();
dotx=dx+3*dotrad;
doty=dy+.5*diceheight;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
dotx=dx+dicewidth-3*dotrad;
doty=dy+.5*diceheight;
ctx.arc(dotx,doty,dotrad,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
</script>
</head>
<body>
<canvas id="canvas" width="400" height="300">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<button onclick="throwdice();">Throw dice</button>
<form name="f">
Stage:<input name="stage" value="First Throw"></input>
Point:<input name="pv" value=" "></input>
Outcome:<input name="outcome" value=" "></input>
Bank:<input name="bank" value="100"></input>
</form>
</body>
</html>