<!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>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
//骰子对象
var Dice = function (x, y, w, h, d, c) {
this.dicex = x; //骰子的x坐标
this.dicey = y; //骰子的y坐标
this.dicewidth = h; //骰子的宽度
this.diceheight = w; //骰子的高度
this.dotrad = d; //圆点半径
this.ctx = c; //画板
this.draw1 = function () {
var dotx, doty;
this.ctx.beginPath();
dotx = this.dicex + .5 * this.dicewidth;
doty = this.dicey + .5 * this.diceheight;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
this.draw2 = function () {
var dotx, doty;
this.ctx.beginPath();
dotx = this.dicex + 3 * this.dotrad;
doty = this.dicey + 3 * this.dotrad;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
dotx = this.dicex + this.dicewidth - 3 * this.dotrad;
doty = this.dicey + this.diceheight - 3 * this.dotrad;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
this.draw4 = function () {
this.draw2();
this.ctx.beginPath();
dotx = this.dicex + this.dicewidth - 3 * this.dotrad;
doty = this.dicey + 3 * this.dotrad;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
dotx = this.dicex + 3 * this.dotrad;
doty = this.dicey + this.diceheight - 3 * this.dotrad;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
this.draw2mid = function Draw2mid() {
dotx = this.dicex + 3 * this.dotrad;
doty = this.dicey + .5 * this.diceheight;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
this.ctx.beginPath();
dotx = this.dicex + this.dicewidth - 3 * this.dotrad;
doty = this.dicey + .5 * this.diceheight;
this.ctx.arc(dotx, doty, this.dotrad, 0, Math.PI * 2, true);
this.ctx.closePath();
this.ctx.fill();
}
this.drawface = function (n) {
this.ctx.lineWidth = 3;
this.ctx.clearRect(this.dicex, this.dicey, this.dicewidth, this.diceheight);
this.ctx.strokeRect(this.dicex, this.dicey, this.dicewidth, this.diceheight);
this.ctx.fillStyle = "#009966";
switch (n) {
case 1:
this.draw1();
break;
case 2:
this.draw2();
break;
case 3:
this.draw2();
this.draw1();
break;
case 4:
this.draw4();
break;
case 5:
this.draw4();
this.draw1();
break;
case 6:
this.draw4();
this.draw2mid();
break;
}
}
this.init = function () {
var ch = 1+ Math.floor(Math.random() * 6);
this.drawface(ch);
}
}
$(document).ready(function () {
var can = document.getElementById("con").getContext("2d");
$("#btn").click(function () {
var dice1 = new Dice(50, 50, 100, 100, 5, can);
dice1.init();
var dice2 = new Dice(160, 50, 100, 100, 5, can);
dice2.init();
var dice3 = new Dice(270, 50, 100, 100, 5, can);
dice3.init();
});
});
</script>
</head>
<body>
<canvas id="con" width="400px" height="300px">
</canvas>
<input type="button" id="btn" value="掷骰子" />
</body>
</html>
html5入门游戏掷骰子
4星 · 超过85%的资源 需积分: 50 160 浏览量
2013-08-05
17:13:14
上传
评论 4
收藏 38KB RAR 举报 
html5掷骰子游戏源码.rar （2个子文件） 
html5掷骰子游戏源码 
start.htm 5KB js jquery.js 125KB资源评论
shenkingpassword2013-09-02一般吧，还以为是3D效果的，原来是平面的。
zzk_凯李2014-04-09一般般吧，不是很好看
kbii012014-07-28入新html5 矢量 学习的好资格
xh348078707
- 粉丝: 0
- 资源: 4
