掷骰子的小程序 HTML5

最新推荐文章于 2024-08-07 11:09:47 发布

侠之大者为国为民

最新推荐文章于 2024-08-07 11:09:47 发布

阅读量5.1k

点赞数

分类专栏：学习笔记文章标签： canvas html5

本文链接：https://blog.csdn.net/sofeien/article/details/41043995

版权

学习笔记专栏收录该内容

56 篇文章 0 订阅

订阅专栏

<html>
<head>
<title>掷骰子游戏</title>
<script>
var ctx;
function init(){
	ctx = document.getElementById("canvas").getContext('2d');
	ctx.strokeStyle = "rgb(0,0,0)";
	ctx.lineWidth = 5;
	ctx.strokeRect(0,0,400,300);
	ctx.fillStyle = "rgb(255,255,0)";
	ctx.fillRect(20,20,80,80);
	ctx.strokeRect(20,20,80,80);
	var ch = 1 + Math.floor(Math.random()*6);
	drawdice(ch);
	document.f.pv.value = ch;	
}
function drawdice(n)
{
	ctx.fillStyle = "rgb(255,255,0)";
	ctx.fillRect(25,25,70,70);
	ctx.fillStyle = "rgb(255,0,0)";
	ctx.lineWidth = 3;
	ctx.strokeStyle = "rgb(0,0,0)";
	switch(n){
		case 1:
			makepoint(60,60);
			break;
		case 2:
			makepoint(60,45);
			makepoint(60,75);
			break;
		case 3:
			makepoint(80,40);
			makepoint(60,60);
			makepoint(40,80);
			break;
		case 4:
			makepoint(45,45);
			makepoint(75,45);
			makepoint(45,75);
			makepoint(75,75);
			break;
		case 5:
			makepoint(40,40);
			makepoint(80,40);
			makepoint(60,60);
			makepoint(40,80);
			makepoint(80,80);
			break;
		case 6:
			makepoint(45,35);
			makepoint(75,35);
			makepoint(45,60);
			makepoint(75,60);
			makepoint(45,85);
			makepoint(75,85);
			break;
	}
}
function makepoint(x,y)
{
	ctx.beginPath();
	ctx.arc(x,y,8,0,2*Math.PI,true);
	ctx.fill();
	ctx.stroke();
}
</script>
</head>

<body οnlοad="init();">

<canvas id="canvas" width="400" height="300">
抱歉，你的浏览器不支持HTML5的canvas元素。
</canvas>

<form name="f">
	点数:<input type="text" name="pv" value=" "/>
	<input type="submit" value="扔骰子"/>
</form>

</body>
</html>