置骰子游戏
var cwidth = 400; //保存画布宽度和高度，用于擦除用
var cheight = 300; //
//骰子的位置和大小
var diceX = 50;
var diceY = 50;
var diceWidth = 100;
var diceHeight = 100;
var diceXoff = diceWidth + 20; //第二个骰子偏移量
var dotrad = 6; //骰子中原点的半径
var ctx;
//初始化
function init() {
ctx = document.getElementById("canvas").getContext("2d");
var ch = 1+Math.floor(Math.random()*6);
//drawFace(ch);
}
//根据点数画骰子
function drawFace(ch) {
//
ctx.lineWidth = 5;
ctx.clearRect(diceX, diceY, diceWidth, diceHeight);
ctx.strokeRect(diceX, diceY, diceWidth, diceHeight);
ctx.fillStyle = "#009966";
//注意绘制的算法
switch (ch) {
case 1 :
draw1();
break;
case 2 :
draw2();
break;
case 3 :
draw1();
draw2();
break;
case 4 :
draw4();
break;
case 5 :
draw4();
draw1();
break;
case 6 :
draw4();
draw2middle();
break;
}
}
function draw1() {
ctx.beginPath();
var thex = diceX + 0.5*diceWidth;
var they = diceY + 0.5*diceHeight;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
}
function draw2() {
ctx.beginPath();
//第一个点
var thex = diceX + 18;
var they = diceY + 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
//第二个点
thex = diceX + diceWidth - 18;
they = diceY + diceHeight - 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
}
function draw4() {
ctx.beginPath();
//第一个点
var thex = diceX + 18;
var they = diceY + 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
//第二个点
thex = diceX + diceWidth - 18;
they = diceY + diceHeight - 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
//重新绘制，防止fill成块
ctx.beginPath();
//第三个点
thex = diceX + 18;
they = diceY + diceHeight - 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
//第四个点
thex = diceX + diceWidth - 18;
they = diceY + 18;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
}
function draw2middle() {
ctx.beginPath();
//第一个点
var thex = diceX + 18;
var they = diceY + 0.5*diceHeight;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
//第二个点
thex = diceX + diceWidth - 18;
they = diceY + 0.5*diceHeight;
ctx.arc(thex, they, dotrad, 0, 2*Math.PI, true);
ctx.closePath();
ctx.fill();
}
//置骰子，一个
function throwDice() {
diceX = 50;
diceY = 50;
//考虑清空之前2个骰子的绘画内容
ctx.clearRect(diceX, diceY, diceWidth, diceHeight);
ctx.clearRect(diceX+diceXoff, diceY, diceWidth, diceHeight);
var ch = 1+Math.floor(Math.random()*6);
document.getElementById("divNumber").innerHTML = ""+ch;
drawFace(ch);
}
//两个骰子
function throwDice2() {
diceX = 50;
diceY = 50;
var ch1 = 1+Math.floor(Math.random()*6);
var ch2 = 1+Math.floor(Math.random()*6);
document.getElementById("divNumber").innerHTML = ""+(ch1+ch2);
//第一个
drawFace(ch1);
//第二个
diceX = diceX + diceXoff;
drawFace(ch2);
}
Your browser dosen't support the HTML5 element canvas.
|
0
