<html>
<head>
<title>骰子游戏</title>
<meta
charset="utf-8"/>
<script
type="text/javascript">
// 画布大小
var canvasWidth = 400;
var canvasHeight = 300;
//
骰子大小 var diceWidth = 100; var diceHeight = 100;
// 骰子位置 var diceX = 50; var diceY = 50;
// 偏移量,用于绘制不同位置的骰子 var dx; var dy;
// 点半径 var dotRadius = 6;
var ctx;
var point; var isFirstThrownFlag = true;
function btnThrowClickHandler() { var sum = 0; // 记录每一次的两个骰子的和
ctx = document.getElementById("canvas").getContext("2d");
// 第一个骰子绘制开始 var randomNum = Math.floor((Math.random() * 6)) + 1; sum += randomNum;
dx = diceX; dy = diceY; draw(randomNum);
randomNum = Math.floor((Math.random() * 6)) + 1; sum += randomNum;
dx = diceX + 150; draw(randomNum);
if(isFirstThrownFlag) { switch(sum)
{ case 7: case 11: document.getElementById("txtOutCome").value = "You Win!";
break; case 2 : case 3 : case 12:
document.getElementById("txtOutCome").value = "You lose!!";
break; default: point = sum; isFirstThrownFlag = false;
document.getElementById("txtScore").value = point; document.getElementById("txtStage").value = "Need folloy up throw!!"; document.getElementById("txtOutCome").value
= ""; break; } }
else { switch(sum) {
case point: document.getElementById("txtOutCome").value = "You Win!!"; document.getElementById("txtStage").value = "Back to first throw!!";
isFirstThrownFlag = true; document.getElementById("txtScore").value = ""; break;
case 7: document.getElementById("txtOutCome").value = "You lose!!"; document.getElementById("txtStage").value
= "Back to first throw!!"; isFirstThrownFlag = true; document.getElementById("txtScore").value = "";
break; } } }
function draw(num) { // 绘制骰子的矩形外框
ctx.lineWidth = 5; ctx.clearRect(dx,dy,diceWidth,diceHeight); ctx.strokeRect(dx,dy,diceWidth,diceHeight);
// 设置圆点的颜色 ctx.fillStyle = "#009966";
switch(num) { case 1: draw1();
break; case 2: draw2(); break;
case 3: draw1(); draw2(); break;
case 4: draw4(); break; case 5:
draw1(); draw4(); break; case 6:
draw2mid(); draw4(); break; default:
break; } }
function draw1() {
// 绘制一个点,放到正中间 var dotX = dx + diceWidth * 0.5; var dotY = dy + diceHeight * 0.5;
ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath();
ctx.fill(); }
function draw2() { // 绘制两个点,一个左上角,一个右下角
// 左上点的角圆心 var dotX = dx + 3 * dotRadius; var dotY = dy + 3 * dotRadius;
ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true);
// 右下角点的圆心 dotX = dx + diceWidth - 3 * dotRadius; dotY = dy + diceHeight -
3 * dotRadius;
ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill();
}
function draw4() { // 先绘制左上角和右下角 draw2();
// 绘制右上角 var dotX = dx + diceWidth - 3 * dotRadius; var dotY = dy + 3 * dotRadius;
ctx.beginPath(); ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true);
dotX = dx + 3 * dotRadius; dotY = dy + diceHeight - 3 * dotRadius; ctx.arc(dotX,dotY,
dotRadius,0,2 * Math.PI,true); ctx.closePath(); ctx.fill(); }
function draw2mid() { // 第二行中间绘制两个点
var dotX = dx + 3 * dotRadius; var dotY = dy + 0.5 * diceHeight; ctx.beginPath();
ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true);
dotX = dx + diceWidth - 3 * dotRadius; ctx.arc(dotX,dotY, dotRadius,0,2 * Math.PI,true);
ctx.closePath(); ctx.fill();
}
</script> </head>
<body > <canvas id="canvas" width="400" height="300"> Sorry,your browser doesn't support Canvas!!!
</canvas>
<input type="button" value="Throw" onClick="btnThrowClickHandler()"/><br/> <table> <tr>
<td>Stage:<input type="text" id="txtStage"/></td> <td>Score:<input type="text" id="txtScore"/></td> <td>OutCome:<input type="text" id="txtOutCome"/></td>
</tr> </table> </body></html>
Html5骰子游戏
最新推荐文章于 2025-05-14 13:36:05 发布