大斌的HTML5历程

最新推荐文章于 2025-03-31 16:14:10 发布

NI_NE

最新推荐文章于 2025-03-31 16:14:10 发布

阅读量252

点赞数

分类专栏： html5 文章标签： html5小游戏

本文链接：https://blog.youkuaiyun.com/qq_45042898/article/details/100853111

版权

html5 专栏收录该内容

1 篇文章

订阅专栏

简单的HTML5小游戏

拼图小游戏

拼图小游戏

准备图片

在这里插入图片描述

操作步骤

1.桌面建立一个txt文档
2.将源码复制到文档
3.将文档后缀名改为.html
4.将名为nine.jpg的图片和html文档放置同一个文件夹下
5.完成。

拼图源码

<html>
<head>
<meta charset="utf-8">
<title>自制拼图游戏</title>
<link rel="stylesheet" href="pintu.css">

<style type="text/css">
#container{
	background-color: aliceblue;
	width: 600px;
	padding: 20px;
	margin: auto;
	text-align: center;
	box-shadow: 10px 10px 15px pink;
	/*水平方向偏移量，垂直方向偏移，阴影宽度，阴影颜色*/
}
body{
	background-color: silver;/*页面背景为银色*/
}
#timeBOx{
	margin: 10px 0;
	font-size: 18px;
}
button{
	width: 200px;
	height: 50px;
	margin: 10px 0;
	border: 0;
	outline: none;
	font-size: 25px;
	font-weight: bold;
	color: #E40AC8;
	background-color: pink;
}/*无边框效果，*/
/*鼠标悬浮样式*/
button:hover{
	background-color: aqua;
}
</style>

</head>
<body>

<div id="container">
  <h3>拼图游戏</h3>
  <hr />
  <!--游戏时间-->
  <div id="timeBOx"> 共计时间：<span id="time">00:00:00</span> </div>
  <!--游戏画布-->

  <canvas id="mynine" width="300" height="300" style="border: 1px solid"> 对不起您的浏览器不支持HTML5画布API。</canvas>
  <div>
    <button onclick="restartGame()">重新开始</button>
  </div>
</div>

<script>
	var c=document.getElementById('mynine');//获取画布对象
	var ctx=c.getContext('2d');//获取2D的context对象
	var num=[[00,01,02],[10,11,12],[20,21,22]];//定义初始方块位置
	var w=100;//定义拼图小方块的边长
	var time=document.getElementById("time");
	var h=0,m=0,s=0;//初始化时分秒
	var timer=setInterval("getCurrentTime()",1000);//每隔1000毫秒刷新时间
	
	function getCurrentTime(){
		//将时分秒转化为整数
		s=parseInt(s);
		m=parseInt(m);
		h=parseInt(h);
		//每秒变量s先自增1
		s++;
		if(s==60){//60秒后归零，m++
			s=0;
			m++;
		}
		if(m==60){
			m=0;
			h++;
		}
		//修改时分秒的显示效果，保持两位数
		if(s<10) s="0"+s;
		if(m<10) m="0"+m;
		if(h<10) h="0"+h;
		//将当前计时的时间显示在屏幕上
		time.innerHTML=h+":"+m+":"+s;	
	}
	//声明拼图的图片来源
	var img=new Image();
	img.src="nine.jpg";
	//图片加载
	img.onload=function(){
		//游戏相关代码	
		generateNum();//打乱拼图
		drawCanvas();//画布上绘制图片
	}
	function generateNum(){
		//循环50次进行打乱拼图
		for(var i=0;i<50;i++){
			//随机抽取数
			var i1=Math.round(Math.random()*2);
			var j1=Math.round(Math.random()*2);
			var i2=Math.round(Math.random()*2);
			var j2=Math.round(Math.random()*2);
			//对调他们的位置
			var temp=num[i1][j1];
			num[i1][j1]=num[i2][j2];
			num[i2][j2]=temp;	
		}
	}	
	//绘制拼图
	function drawCanvas(){
		ctx.clearRect(0,0,300,300);//清空画布
		//使用双重for绘制3X3拼图
		for(var i=0;i<3;i++){
			for(var j=0;j<3;j++){
				if(num[i][j]!=22){
					//获取第几行第几列
					var row=parseInt(num[i][j]/10);
					var col=num[i][j]%10;
					//在画布的相关位置绘图
					ctx.drawImage(img,col*w,row*w,w,w,j*w,i*w,w,w);
				}	
			}
		}
	}
	//监听鼠标单击事件
	c.onmousedown=function(e){
		//获取画布边界
		var bound=c.getBoundingClientRect();
		//获取鼠标在画布上的坐标位置(x,y)
		var x=e.pageX-bound.left;
		var y=e.pageY-bound.top;
		//将xy换成几行几列
		var row=parseInt(y/w);
		var col=parseInt(x/w);
		//如果单击的不是空白区域
		if(num[row][col]!=22){
			detectBox(row,col);//移动单击的方块
			drawCanvas();//重新绘制画布
			//检查游戏是否成功
			var isWin=checkWin();
			if(isWin){//游戏成功
				clearInterval(timer);//清除计时器
				ctx.drawImage(img,0,0);//绘制完整图片
				ctx.font="bold 68px serif";//字体serif,68号字，加粗
				ctx.fillStyle="blue";//填充蓝色
				ctx.fillText("游戏成功！",20,150);	
			}	
		}
	}
	//移动单击的方块
	function detectBox(i,j){
		if(i>0){//如果单击的方块不在最上面一行
			if(num[i-1][j]==22){//空白方块在当前方块上方
				//交换位置
				num[i-1][j]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(i<2){//如果单击的方块不在最下面一行
			if(num[i+1][j]==22){//空白方块在当前方块下方
				//交换位置
				num[i+1][j]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(j>0){//如果单击的方块不在最左边一行
			if(num[i][j-1]==22){//空白方块在当前方块左边
				//交换位置
				num[i][j-1]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
		if(j<2){//如果单击的方块不在最右边一行
			if(num[i][j+1]==22){//空白方块在当前方块右边
				//交换位置
				num[i][j+1]=num[i][j];
				num[i][j]=22;
				return;
			}
		}
	}
	//判断游戏是否胜利
	function checkWin(){
		for(var i=0;i<3;i++){
			for(var j=0;j<3;j++){
				if(num[i][j]!=i*10+j){
					return false;
				}
			}
		}
		return true;
	}
	//重新开始游戏
	function restartGame(){
		clearInterval(timer);//清除计时器
		//时间清零
		s=0;m=0;h=0;
		getCurrentTime();//重新开始时间
		timer=setInterval("getCurrentTime()",1000);
		generateNum();//重新打乱拼图顺序
		drawCanvas();//绘制拼图
	}
	</script>
</body>
</html>