html5 摇骰子游戏,HTML5+JavaScript实现掷骰子游戏代码
发布日期:2021-10-23 03:55:45 浏览次数:12 分类:技术文章

本文共 2773 字,大约阅读时间需要 9 分钟。

Craps掷骰子游戏

var cwidth =400;

var cheight = 300;

var dicex = 50;

var dicey = 50;

var dicewidth = 100;

var diceheight = 100;

var dotard = 6;

var ctx;

var dx;

var dy;

var firstturn = true;

var point;

function throwdice(){

var sum;

var ch = 1+ Math.floor(Math.random()*6);

sum = ch;

dx = dicex;

dy = dicey;

drawface(ch);

dx = dicex +150;

ch = 1+Math.floor(Math.random()*6);

sum +=ch;

drawface(ch);

if(firstturn){

switch(sum){

case 7:

case 11:

document.f.outcome.value = "You win!";

break;

case 2:

case 3:

case 12:

document.f.outcome.value = "You lose!";

break;

default:

point = sum;

document.f.pv.value = point;

firstturn = false;

document.f.stage.value = "Need follow-up throw.";

document.f.outcome.value=" ";

}

}

else{

switch(sum){

case point:

document.f.outcome.value = "You win!";

document.f.stage.value = "Back to first throw.";

document.f.pv.value=" ";

firstturn = true;

break;

case 7:

document.f.outcome.value="You lose!";

document.f.stage.value="Back to first throw.";

document.f.pv.value=" ";

firstturn = true;

}

}

}

function drawface(n){

ctx = document.getElementById('canvas').getContext('2d');

ctx.lineWidth = 5;

ctx.clearRect(dx,dy,dicewidth,diceheight);

ctx.strokeRect(dx,dy,dicewidth,diceheight);

var dotx;

var doty;

ctx.fillStyle = "#009966";

switch(n){

case 1:

draw1();

break;

case 2:

draw2();

break;

case 3:

draw2();

draw1();

break;

case 4:

draw4();

break;

case 5:

draw4();

draw1();

break;

case 6:

draw4();

draw2mid();

break;

}

}

function draw1(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + .5*dicewidth;

doty = dy + .5*diceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw2(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw4(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + diceheight-3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard

doty = dy + 3*dotard;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

function draw2mid(){

var dotx;

var doty;

ctx.beginPath();

dotx = dx + 3*dotard;

doty = dy + .5*deiceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

dotx = dx + dicewidth-3*dotard;

doty = dy + .5*deiceheight;

ctx.arc(dotx,doty,dotard,0,Math.PI*2,true);

ctx.closePath();

ctx.fill();

}

浏览器不支持HTML5的canvas元素

Throw dice

Stage:

Point:

Outcome:

转载地址:https://blog.csdn.net/weixin_30496999/article/details/117726194 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:html中div展开,html – 如何在悬停时展开div及其内容?
下一篇:html5字号的大小,webapp字号大小跟随系统字号大小缩放的示例代码

发表评论

最新留言

关注你微信了!
[***.104.42.241]2024年03月29日 03时23分40秒