HTML5+JavaScript实现掷骰子游戏代码

2024-09-05 12:18:57

字体：大中小

来源：转载

供稿：网友

今天与大家分享另一个学习HTML5给力的小游戏特效——掷骰子，当然了，JavaScript在本游戏中也起到了重要作用，JS与HTML5配合，似乎成了现在WEb前端的主流，当然，jQuery也属于Js啦，Canvas是必需研究的，呵呵。本款游戏，点击“Throw dice”按钮即可开投掷骰子游戏，连续点击实现多次掷骰子的效果。

<!DOCTYPE HTML><html><head><meta charset="utf-8"><title>Craps掷骰子游戏</title><script>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();		}</script></head><body><canvas id="canvas" width="400" height="300">浏览器不支持HTML5的canvas元素</canvas><br /><button onClick="throwdice();">Throw dice</button><form name="f">Stage:<input name="stage" value="First Throw"/>Point:<input name="pv" value=" "/>Outcome:<input name="outcome" value=" "/></form></body></html>

上一篇：HTML5向下滑出的网页提示（工具条）

下一篇：大乐透号码生成器_基于HTML5+JS技术