首页前端开发HTMLhtml5游戏掷骰子源码

html5游戏掷骰子源码

时间2024-01-25 10:27:46发布访客分类HTML浏览200
导读：收集整理的这篇文章主要介绍了html5教程-html5游戏掷骰子源码，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 <!DOCTYPE ht...
收集整理的这篇文章主要介绍了html5教程-html5游戏掷骰子源码，觉得挺不错的，现在分享给大家，也给大家做个参考。小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。 !DOCTYPE htML>

  html lang="en">

 head>

 tITle> Throwing 1/title>

 script type="text/javascript">

 VAR cwidth = 400;

 var cheight = 300;

 var dicex = 50;

 var dicey = 50;

 var dicewidth = 100;

 var diceheight = 100;

 var dotrad = 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 + 0.5*dicewidth;

 doty = dy + 0.5*diceheight;

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

 ctx.closePath();

 ctx.fill()

 }

 function draw2(){

 var dotx;

 var doty;

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 3*dotrad;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + diceheight - 3*dotrad;

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

 ctx.closePath();

 ctx.fill();

 }

 function draw4(){

 var dotx;

 var doty;

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 3*dotrad;

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

 dotx = dx + dicewidth -3*dotrad;

 doty = dy + dicewidth -3*dotrad;

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

 ctx.closePath(); www.2cto.COM

 ctx.fill();

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + diceheight - 3*dotrad;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + 3*dotrad;

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

 ctx.closePath();

 ctx.fill();

 }

 function draw2mid(){

 var dotx;

 var doty;  

ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 0.5*diceheight;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + 0.5*diceheight;

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

 ctx.closePath();

 ctx.fill();

 }

 /script>

 /head>

 body>

 canvas id="canvas" width="400" height="300">

 不支持html5

 /canvas>

 br/>

 button> Throw dice/button>

 form name="f">

 Stage:input name="stage" value="First Throw" /> br/>

 Point:input name="pv" value="" /> br/>

 outcome:input name="outcome" value="" />

 /form>

 /body>

 /html>

!DOCTYPE html>

  html lang="en">

 head>

 title> Throwing 1/title>

 script type="text/javascript">

 var cwidth = 400;

 var cheight = 300;

 var dicex = 50;

 var dicey = 50;

 var dicewidth = 100;

 var diceheight = 100;

 var dotrad = 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 + 0.5*dicewidth;

 doty = dy + 0.5*diceheight;

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

 ctx.closePath();

 ctx.fill()

 }

 function draw2(){

 var dotx;

 var doty;

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 3*dotrad;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + diceheight - 3*dotrad;

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

 ctx.closePath();

 ctx.fill();

 }

 function draw4(){

 var dotx;

 var doty;

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 3*dotrad;

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

 dotx = dx + dicewidth -3*dotrad;

 doty = dy + dicewidth -3*dotrad;

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

 ctx.closePath(); www.2cto.com

 ctx.fill();

 ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + diceheight - 3*dotrad;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + 3*dotrad;

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

 ctx.closePath();

 ctx.fill();

 }

 function draw2mid(){

 var dotx;

 var doty;  

ctx.beginPath();

 dotx = dx + 3*dotrad;

 doty = dy + 0.5*diceheight;

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

 dotx = dx + dicewidth - 3*dotrad;

 doty = dy + 0.5*diceheight;

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

 ctx.closePath();

 ctx.fill();

 }

 /script>

 /head>

 body>

 canvas id="canvas" width="400" height="300">

 不支持html5

 /canvas>

 br/>

 button> Throw dice/button>

 form name="f">

 Stage:input name="stage" value="First Throw" /> br/>

 Point:input name="pv" value="" /> br/>

 outcome:input name="outcome" value="" />

 /form>

 /body>

 /html>

觉得可用，就经常来吧！ 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！

divDOMHTMLhtml5post-format-gallery

若转载请注明出处： html5游戏掷骰子源码
本文地址： https://pptw.com/jishu/586414.html
CORS(Cross-Origin Resource Sharing) 跨域资源共享 [html5游戏开发]经典的推箱子

游客 回复需填写必要信息
↑