html掷骰子游戏的代码,html5 canvas掷骰子（简单，学习基础canvas）

置骰子游戏

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