<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>骰子游戏</title>
<script type="text/javascript" src="js/math.js"></script>//见上传的文件
<script type="text/javascript">
var firstCavas;
var stopState = false;
function init() {
firstCavas = document.getElementById("canvasOne").getContext("2d");//平面画布
//画框
firstCavas.strokeRect(0,0,100,100);
//画一个圆
drawOne();
}
//1点
function drawOne() {
firstCavas.beginPath();
firstCavas.arc(50,50,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
//2点
function drawTwo() {
firstCavas.beginPath();
firstCavas.arc(20,20,3,0,Math.PI*2,false);
firstCavas.arc(80,80,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
//3点
function drawThree() {
firstCavas.beginPath();
firstCavas.arc(20,20,3,0,Math.PI*2,false);
firstCavas.arc(50,50,3,0,Math.PI*2,false);
firstCavas.arc(80,80,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
//4点
function drawFour() {
firstCavas.beginPath();
firstCavas.arc(25,25,3,0,Math.PI*2,false);
firstCavas.arc(25,75,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
firstCavas.beginPath();
firstCavas.arc(75,25,3,0,Math.PI*2,false);
firstCavas.arc(75,75,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
//5点
function drawFive() {
firstCavas.beginPath();
firstCavas.arc(25,25,3,0,Math.PI*2,false);
firstCavas.arc(25,75,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
firstCavas.beginPath();
firstCavas.arc(50,50,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
firstCavas.beginPath();
firstCavas.arc(75,25,3,0,Math.PI*2,false);
firstCavas.arc(75,75,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
6点
function drawSix() {
firstCavas.beginPath();
firstCavas.arc(25,25,3,0,Math.PI*2,false);
firstCavas.arc(50,25,3,0,Math.PI*2,false);
firstCavas.arc(75,25,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
firstCavas.beginPath();
firstCavas.arc(25,75,3,0,Math.PI*2,false);
firstCavas.arc(50,75,3,0,Math.PI*2,false);
firstCavas.arc(75,75,3,0,Math.PI*2,false);
firstCavas.closePath();
firstCavas.fill();
}
//清除画布并重新生成画布
function clearCavas() {
firstCavas.clearRect(0,0,100,100);
firstCavas.strokeRect(0,0,100,100);
}
function implement() {
var dotNum = 1+Math.floor(Math.random()*6);
switch(dotNum){
case 1:
clearCavas();
drawOne();
break;
case 2:
clearCavas();
drawTwo();
break;
case 3:
clearCavas();
drawThree();
break;
case 4:
clearCavas();
drawFour();
break;
case 5:
clearCavas();
drawFive();
break;
case 6:
clearCavas();
drawSix();
break;
}
if(!stopState){
setTimeout("implement()",10);
}
}
function startimplement(){
stopState = false;
implement();
document.getElementById("divButton").innerHTML = '<input type="button" value="结束" οnclick="closeimplement()"/>';
}
function closeimplement() {
stopState = true;
implement();
document.getElementById("divButton").innerHTML = '<input type="button" value="开始" οnclick="startimplement()"/>';
}
</script>
</head>
<body οnlοad="init()">
<canvas id="canvasOne" width="400" height="300">
你的浏览器不支持html5 //只有当浏览器不支持html5时才会显示
</canvas>
<div id="divButton">
<input type="button" value="开始" οnclick="startimplement()"/>
</div>
</body>
</html>