<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>骰子游戏</title>
<script type="text/javascript">
var crapsSize = 100;//骰子的width，height
var crapsMargin = 50;//骰子的边距
var pointRadius = 10;//点的半径
var money = 500;//钱
function InitCraps() {
drawCraps(6, 6, 6);
var sumLabel = document.getElementById("coinSum");
sumLabel.textContent = money;
}
function Bet() {
var num1 = Math.floor(Math.random() * 6 + 1);
var num2 = Math.floor(Math.random() * 6 + 1);
var num3 = Math.floor(Math.random() * 6 + 1);
drawCraps(num1, num2, num3);
var resultLabel = document.getElementById("betResult");
var sumLabel = document.getElementById("coinSum");
var bigRadio = document.getElementById("bigRadio");
var crapsSum = num1 + num2 + num3;
if (crapsSum == 3 || crapsSum == 18) {//庄家通杀
money = money - 50;
sumLabel.textContent = money;
resultLabel.textContent = "庄家通杀！";
}
else if (crapsSum <= 10) {//4~10，小
if (bigRadio.checked) {
money = money - 50;
sumLabel.textContent = money;
resultLabel.textContent = "有赌未为输，继续！";
}
else {
money = money + 50;
sumLabel.textContent = money;
resultLabel.textContent = "不赌不知时运高，继续！";
}
}
else {//11~17，大
if (bigRadio.checked) {
money = money + 50;
sumLabel.textContent = money;
resultLabel.textContent = "不赌不知时运高，继续！";
}
else {
money = money - 50;
sumLabel.textContent = money;
resultLabel.textContent = "有赌未为输，继续！";
}
}
}
function drawCraps( craps1,craps2,craps3) {
var ctx = document.getElementById("myCanvas").getContext("2d");
var crapsArray = new Array(craps1, craps2, craps3);
for (var i = 0; i < 3; i++) {
var xOffset = crapsMargin * (i + 1) + crapsSize * i;
ctx.clearRect(xOffset, crapsMargin, crapsSize, crapsSize);
switch (crapsArray[i]) {
case 1: draw1(ctx, xOffset);
break;
case 2: draw2(ctx, xOffset);
break;
case 3: draw3(ctx, xOffset);
break;
case 4: draw4(ctx, xOffset);
break;
case 5: draw5(ctx, xOffset);
break;
default: draw6(ctx, xOffset);
break;
}
}
}
function drawRect(ctx,xOffset) {
ctx.strokeRect(xOffset, crapsMargin, crapsSize, crapsSize);
}
function draw1(ctx, xOffset) {
ctx.beginPath();
ctx.arc(xOffset + crapsSize / 2, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
ctx.fill();
drawRect(ctx, xOffset);
}
function draw3(ctx, xOffset) {
draw1(ctx, xOffset);
draw2(ctx, xOffset);
}
function draw5(ctx, xOffset) {
draw4(ctx, xOffset);
draw1(ctx, xOffset);
}
function draw4(ctx, xOffset) {
ctx.beginPath();
ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
ctx.beginPath();
ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
drawRect(ctx, xOffset);
}
function draw2(ctx, xOffset) {
ctx.beginPath();
ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 4 * 3, pointRadius, 0, 2 * Math.PI, true);
ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 4, pointRadius, 0, 2 * Math.PI, true);
ctx.fill();
drawRect(ctx, xOffset);
}
function draw6(ctx, xOffset) {
ctx.beginPath();
ctx.arc(xOffset + crapsSize / 4, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
ctx.arc(xOffset + crapsSize / 4 * 3, crapsMargin + crapsSize / 2, pointRadius, 0, 2 * Math.PI, true);
ctx.closePath();
ctx.fill();
draw4(ctx, xOffset);
}
</script>
</head>
<body onload="InitCraps()">
<canvas id="myCanvas" width="500" height="200">your broswer does not support canvas.</canvas>
<br />
<input type="radio" name="sex" value="大" id="bigRadio" checked="checked"/>大
<input type="radio" name="sex" value="小" />小
<br />
<input type="button" value="play" onclick="Bet()" />
<br />
<label>*三个骰子，总点数为4至10称作小，11至17为大，围骰除外</label>
<br />
<label>本次结果：</label>
<label id="betResult">Null</label>
<br />
<label>当前钱币总数为：</label>
<label id="coinSum">0</label>
</body>
</html>
时间： 2024-11-05 04:38:05