html5 骰子小遊戲開發
<!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="結束" onclick="closeimplement()"/>';
}
function closeimplement() {
stopState = true;
implement();
document.getElementById("divButton").innerHTML = '<input type="button" value="開始" onclick="startimplement()"/>';
}
</script>
</head>
<body onload="init()">
<canvas id="canvasOne" width="400" height="300">
你的瀏覽器不支援html5 //只有當瀏覽器不支援html5時才會顯示
</canvas>
<div id="divButton">
<input type="button" value="開始" onclick="startimplement()"/>
</div>
</body>
</html>