游戏一:dice

最新推荐文章于 2024-10-31 19:45:00 发布

moveofgod

最新推荐文章于 2024-10-31 19:45:00 发布

阅读量435

点赞数

分类专栏： HTML5 文章标签：游戏 function input browser button html5

本文链接：https://blog.csdn.net/moveofgod/article/details/7919795

版权

HTML5 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

.html file

<!doctype html>
<html>
	<head>
		
		<script type = "text/javascript" src = "dice.js"></script>
		
		<title>The Dice Game</title>
		
		
	</head>
	<body>
		<button type = "button" onclick = "Init()">Click Me Now</button>
		<canvas id = "canvas" width = "400" height = "300">
			Your browser doesn't support the HTML5 element canvas.
		</canvas>
		
		<form name = "f" onSubmit = "throwdice();">
			Stage : <input name = "stage" value = "First Throw" />
			Point : <input name = "pv" value = "   " />
			Outcome : <input name = "outcome" value = "    " />
			<input type = "submit" value = "Throw Dice" />
		</form><br />
		
	</body>
</html>

.js file

var cwidth = 400;
var cheight = 300;
var dicex = 50;
var dicey = 50;
var dicewidth = 100;
var diceheight = 100;
var dotrad = 6;  //点的半径
var ctx;
var firstturn = true;
var point;


function Draw1()
{
	var dotx;	//点的 X
	var doty;	//点的 Y
	ctx.beginPath();
	dotx = dicex + 0.5 * dicewidth;
	doty = dicey + 0.5 * diceheight;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
	
}

function Draw2()
{
	var dotx;	//点的 X
	var doty;	//点的 Y
	ctx.beginPath();
	dotx = dicex + 3 * dotrad;
	doty = dicey + 3 * dotrad;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	dotx = dicex + dicewidth - 3 * dotrad;
	doty = dicey + diceheight - 3 * dotrad;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
}

function Draw4()
{
	var dotx;	//点的 X
	var doty;	//点的 Y
	ctx.beginPath();
	dotx = dicex + 3 * dotrad;
	doty = dicey + 3 * dotrad;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	dotx = dicex + dicewidth - 3 * dotrad;
	doty = dicey + diceheight - 3 * dotrad;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	dotx = dicex + 3 * dotrad;
	doty = dicey + diceheight - 3 * dotrad;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	dotx = dicex + dicewidth - 3 * dotrad;
	doty = dicey + 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 = dicex + 3 * dotrad;
	doty = dicey + 0.5 * diceheight;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	dotx = dicex + dicewidth - 3*dotrad;
	doty = dicey + 0.5 * diceheight;
	ctx.arc(dotx, doty, dotrad, 0, Math.PI*2, true);
	ctx.closePath();
	ctx.fill();
}



//画图
function Drawface( n )
{
	
	ctx = document.getElementById("canvas").getContext("2d");
	ctx.lineWidth = 5;
	ctx.clearRect(dicex, dicey, dicewidth, diceheight);
	ctx.strokeRect(dicex, dicey, dicewidth, diceheight);
	ctx.fillStyle = "#009966";
	switch(n){
		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();
			Draw2mid();
			break;
	}
}


//初始化
function Init()
{
	var ch1,ch2;
	var sum;
	ch1 = 1 + Math.floor(Math.random()*6);
	sum = ch1;
	dicex = 50;
	Drawface(ch1);
	
	dicex = 200;
	ch2 = 1 + Math.floor(Math.random()*6);
	sum = ch1 + ch2;
	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.state.value = "Need follow-up throw.";
				document.outcome.value = "   ";
		}
	}else{
		switch(sum){
			case point:
				document.f.outcome.value = "You win!";
				document.f.stage.value = "Back to first thorw.";
				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;
		}
	}
	Drawface(ch2);
	
}