<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>骰子游戏</title>
<style type="text/css">
form{
font-size: 40px;
color: #ee5566;
}
input{
width: 150px;
text-align: center;
font-size: 40px;
color: #00eeee;
}
button{
font-size: 35px;
}
</style>
<script type="text/javascript">
window.οnlοad=function(){
var timer=null;
var num=0;
var sum=0;
var cwidth = 400;
var cheight = 300;
var dicex = 100;
var dicey = 50;
var dicewidth = 200;
var diceheight = 200;
var dotrad = 15;
var ctx;
var dx;
var dy;
document.getElementById("throwDice").οnclick=function(){
clearInterval(timer);
timer=setInterval(function(){
var ch = 1+Math.floor(Math.random()*6);
sum = ch;
dx = dicex;
dy = dicey;
drawface(ch);
},50)
}
document.getElementById("stopDice").οnclick=function(){
clearInterval(timer);
document.f.num.value="第"+(++num)+"次";
document.f.all.value=parseInt(document.f.all.value)+sum;
if(num>=6){
alert("您已经摇了6次骰子");
num=0;
document.f.all.value="0";
}
}
function drawface(n) {
ctx = document.getElementById('canvas').getContext('2d');
ctx.lineWidth = 5;
ctx.fillStyle="#00ee11";
ctx.clearRect(dx,dy,dicewidth,diceheight);
ctx.fillRect(dx,dy,dicewidth,diceheight)
var dotx;
var doty;
ctx.fillStyle = "#ee0000";
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; //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() {
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; //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" style="border:2px red solid">
Your browser doesn't support the HTML5 element canvas.
</canvas>
<br/>
<button id="throwDice">开始摇骰子</button><button id="stopDice">停止摇骰子</button>
<form name="f" id="f">
第几次摇骰子: <input name="num" value=" " readonly="readonly" />
总点数: <input name="all" value="0" readonly="readonly" /></form>
</body>
</html>
2408
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
