html5 骰子游戏
下面是我根据craps骰子游戏的规则，利用html5的canves+js写好的骰子游戏，代码略微长，不过重复比较多，也有适当的注释
<!DOCTYPE html PUBLIC "--//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1--transitional.dtd">
<html xmlns="http;//www.w3.org/1999/xhtml">
<head>
<title>啊干牌骰子游戏</title>
<meta http--equiv="Content--Type" content="text/html;charset=gb2312">
<script language = "JavaScript">
<!--
var throwtime = 0; //第几次掷骰子
var width = 200;
var sum = 0; //两次点数之和
var ch1; //第一次的点数
var ch2; //第二次的点数
var IS_WIN = false; //是否输赢
var gameOver = false; //游戏是否结束
var IS_FIRST = true; //是不是第一轮
//重新开始的函数
function restart()
{
throwtime = 0;
sum = 0;
ch1 = 0;
ch2 = 0;
IS_WIN = false;
gameOver = false;
IS_FIRST = true;
}
//初始化的函数
function myinit()
{
var con = document.getElementById('canvass');
var context = con.getContext('2d');
//绘制两个骰子面
context.strokeRect(5,5,100,100);
context.strokeRect(205,5,100,100);
}
/*draw1到draw6分别是对应1-6点的画点函数*/
function draw1()
{
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(30+200*throwtime,25,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
function draw2()
{
draw1();
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(80+200*throwtime,25,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
function draw3()
{
draw2();
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(30+200*throwtime,55,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
function draw4()
{
draw3();
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(80+200*throwtime,55,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
function draw5()
{
draw4();
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(30+200*throwtime,85,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
function draw6()
{
draw5();
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.beginPath();
context.arc(80+200*throwtime,85,5,0,Math.PI*2,true);
context.closePath();
context.fill();
}
//更新游戏的信息
function update()
{
if(gameOver== true)
{
if(IS_WIN == true)
{
document.form1.tip.value = "游戏结束，请重新开始";
document.form1.outcome.value = "you Win !";
alert("恭喜，你赢了");
}
else
{
document.form1.tip.value = "游戏结束，请重新开始";
document.form1.outcome.value = "you Lose !";
alert("非常遗憾，你输了");
}
}
else
{
document.form1.tip.value = "还没分出胜负喔~~~";
document.form1.point.value = sum;
}
}
//核心函数
function decide()
{
//如果游戏结束，提示重新开始
if(gameOver)
{
alert("Please restart game!");
return;
}
//清理上次骰子的图
if(IS_FIRST == false && gameOver == false)
{
var con = document.getElementById('canvass');
var context = con.getContext('2d');
context.clearRect(5,5,100,100);
context.clearRect(205,5,100,100);
}
//第一次骰子的图
if(throwtime == 0)ch1 = 1+Math.floor(Math.random()*6);
switch(ch1)
{
case 1 : draw1();break;
case 2 : draw2();break;
case 3 : draw3();break;
case 4 : draw4();break;
case 5 : draw5();break;
case 6 : draw6();break;
}
throwtime++;
//第二次骰子的图
if(throwtime == 1)ch2 = 1+Math.floor(Math.random()*6);
switch(ch2)
{
case 1 : draw1();break;
case 2 : draw2();break;
case 3 : draw3();break;
case 4 : draw4();break;
case 5 : draw5();break;
case 6 : draw6();break;
}
throwtime--;
if(ch1+ch2 == sum || (IS_FIRST == true && (((ch1+ch2) == 7) || ((ch1+ch2) == 11))))
{
IS_WIN = true;
gameOver = true;
return;
}
sum = ch1+ch2;
if((IS_FIRST == false &&(sum == 2 || sum == 3 || sum == 7 || sum == 12)))
{
IS_WIN = false;
gameOver = true;
}
IS_FIRST = false;
update();
}
//-->
</script>
</head>
<body onload = "myinit();">
<canvas id = "canvass" name = "canvass" width = "800" height = "200"></canvas><hr>
<form name="form1" id = "form1" >
提示框:<input type = "text" , name = "tip" id = "tip" value = "请掷骰子"/>
点数:<input type = "text" name = "point" id = "point" value = ""><br><br>
<input type = "button" name = "mybutton" id = "mybutton" value = "投掷" onclick ="decide();" />
<input type = "button" value = "重新开始" onclick = "restart();"/><br><br>
结果:<input type = "text" name = "outcome" id = "outcome" value = " "/><br><br>
</form>
<h3><em>规则:</em></h3>
<h5>玩家扔一对骰子。我们关心的是两对骰子之和，所以1和3与2和2是一样的。两个骰子的数字之和可以是2——12中的任意一个<br>
如果玩家第一次抛出7或11，那么他就获胜。如果玩家抛出2,3或12，那么他就输了。<br>
抛出其他结果，则会记录为玩家的点数，然后需要继续掷骰子。后面再抛出7就输了，而如果正好又抛出玩家的点数则获胜。<br>
对于其他情况，游戏继续，并遵循刚才继续掷骰子的规则。</h5>
</body>
</html>