html5如何掷色子,html5 canvas掷骰子（简单，学习基础canvas）

搜索热词

下面是编程之家 jb51.cc 通过网络收集整理的代码片段。

编程之家小编现在分享给大家，也给大家做个参考。

置骰子游戏

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,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,2*Math.PI,true);

ctx.closePath();

ctx.fill();

}

function draw2() {

ctx.beginPath();

//第一个点

var thex = diceX + 18;

var they = diceY + 18;

ctx.arc(thex,true);

//第二个点

thex = diceX + diceWidth - 18;

they = diceY + diceHeight - 18;

ctx.arc(thex,true);

ctx.closePath();

ctx.fill();

}

function draw4() {

ctx.beginPath();

//第一个点

var thex = diceX + 18;

var they = diceY + 18;

ctx.arc(thex,true);

ctx.closePath();

ctx.fill();

//重新绘制，防止fill成块

ctx.beginPath();

//第三个点

thex = diceX + 18;

they = diceY + diceHeight - 18;

ctx.arc(thex,true);

//第四个点

thex = diceX + diceWidth - 18;

they = diceY + 18;

ctx.arc(thex,true);

ctx.closePath();

ctx.fill();

}

function draw2middle() {

ctx.beginPath();

//第一个点

var thex = diceX + 18;

var they = diceY + 0.5*diceHeight;

ctx.arc(thex,true);

//第二个点

thex = diceX + diceWidth - 18;

they = diceY + 0.5*diceHeight;

ctx.arc(thex,true);

ctx.closePath();

ctx.fill();

}

//置骰子，一个

function throwDice() {

diceX = 50;

diceY = 50;

//考虑清空之前2个骰子的绘画内容

ctx.clearRect(diceX,diceHeight);

ctx.clearRect(diceX+diceXoff,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

以上是编程之家(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。