运用html5特性制作的掷骰子游戏
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
<html>
<head>
<title>Throwing dice</title>
<script>
varcwidth = 400;
varcheight = 300;
vardicex = 50;
var dicey = 50;
vardicewidth = 100;
vardiceheight = 100;
vardotrad = 6;
varctx;
var dx;
vardy;
functionthrowdice() {
varch = 1+Math.floor(Math.random()*6);
dx = dicex;
dy = dicey;
drawface(ch);
dx = dicex + 150;
ch=1 + Math.floor(Math.random()*6);
drawface(ch);
}
functiondrawface(n) {
ctx = document.getElementById('canvas').getContext('2d'); ctx.lineWidth = 5;
ctx.clearRect(dx,dy,dicewidth,diceheight);
ctx.strokeRect(dx,dy,dicewidth,diceheight)
vardotx;
vardoty;
ctx.fillStyle = "#FF0000";
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() {
vardotx;
vardoty;
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() {
vardotx;
vardoty;
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() {
vardotx;
vardoty;
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; //no change
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() {
vardotx;
vardoty;
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; //no change
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();">???子</button>
</body>
</html>。