【博主推荐】html好看的拼图小游戏(附源码)

发布于：2023-04-28 ⋅ 阅读:(215) ⋅ 点赞:(0)

拼图目录

html好看的拼图小游戏

拼图资源来自，最近比较火得电视剧《且试天下》，觉得挺不错得一部剧，喜欢里面得角色，所以拿来当资源了，拼出来得成就感还是不错的，废话不多说，上效果，上代码。
HTML5 + JS + CSS

1.拼图效果示意图

1.1 第一级 九宫格拼图

也就第一级完成了，后面的头大

在这里插入图片描述

1.2 第二级 十六宫格拼图

花费了点时间也拼成功了，不错……

在这里插入图片描述

1.3 第三级 三十二宫格拼图

拼不了，头都大了……

在这里插入图片描述

14 第三级 八十一宫格拼图

没想尝试过，你们可以试试……

在这里插入图片描述

2.图片切图说明

可以根据这篇文章教程，实现图片切图，满足拼图中所需要的图片。
详见链接: PS把图片切成九宫格

3.实现代码

3.1 第一级拼图页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>且试天下【等级1】</title>
	<link rel="stylesheet" href="css/button.css">
	<script src="js/jquery.js"></script>
	<script src="js/level1.js"></script>
</head>
<body>
<div class="main">
<div class="left">
<h3>目标图</h3>
<div class="pic" id="mainpic"></div>
<br><br>
<h3>所用时间</h3>
<p id="timer">0分0秒</p>
</div>
<div class="center">
	<table class="picbox" cellspacing="0" cellpadding="1">
	<tbody id="picbox">
	</tbody>
	</table>
</div>
<div class="right">
    <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
    <a href="level1.html" class="btn btn-sm animated-button victoria-two">等级1</a>
    <a href="level2.html" class="btn btn-sm animated-button victoria-three">等级2</a> 
    <a href="level3.html" class="btn btn-sm animated-button victoria-four">等级3</a> 
</div>
</div>
<div class="wingame">
<h2>恭喜你完成拼图！</h2>
<div class="pic pic2"></div>
<p>完成耗时：<b id="timer2">0分0秒</b></p>
</div>
</body>
</html>

3.2 第二级拼图页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>且试天下【等级2】</title>
	<link rel="stylesheet" href="css/button.css">
	<script src="js/jquery.js"></script>
	<script src="js/level2.js"></script>
</head>
<body>
<div class="main">
<div class="left">
<h3>目标图</h3>
<div class="pic" id="mainpic"></div>
<br><br>
<h3>所用时间</h3>
<p id="timer">0分0秒</p>
</div>
<div class="center">
	<table class="picbox" cellspacing="0" cellpadding="1">
	<tbody id="picbox">
	</tbody>
	</table>
</div>
<div class="right">
    <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
    <a href="level1.html" class="btn btn-sm animated-button victoria-two">等级1</a>
    <a href="level2.html" class="btn btn-sm animated-button victoria-three">等级2</a> 
    <a href="level3.html" class="btn btn-sm animated-button victoria-four">等级3</a> 
</div>
</div>
<div class="wingame">
<h2>恭喜你完成拼图！</h2>
<div class="pic pic2"></div>
<p>完成耗时：<b>0分0秒</b></p>
</div>
</body>
</html>

3.3 第三级拼图页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>且试天下【等级3】</title>
	<link rel="stylesheet" href="css/button.css">
	<script src="js/jquery.js"></script>
	<script src="js/level3.js"></script>
</head>
<body>
<div class="main">
<div class="left">
<h3>目标图</h3>
<div class="pic" id="mainpic"></div>
<br><br>
<h3>所用时间</h3>
<p id="timer">0分0秒</p>
</div>
<div class="center">
	<table class="picbox" cellspacing="0" cellpadding="1">
	<tbody id="picbox">
	</tbody>
	</table>
</div>
<div class="right">
    <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
    <a href="level1.html" class="btn btn-sm animated-button victoria-two">等级1</a>
    <a href="level2.html" class="btn btn-sm animated-button victoria-three">等级2</a> 
    <a href="level3.html" class="btn btn-sm animated-button victoria-four">等级3</a> 
    <a href="level4.html" class="btn btn-sm animated-button victoria-five">等级4</a>
</div>
</div>
<div class="wingame">
<h2>恭喜你完成拼图！</h2>
<div class="pic pic2"></div>
<p>完成耗时：<b>0分0秒</b></p>
</div>
</body>
</html>

3.4 第四级拼图页面代码

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>且试天下【等级4】</title>
	<link rel="stylesheet" href="css/button.css">
	<script src="js/jquery.js"></script>
	<script src="js/level4.js"></script>
	<style>
	.picbox td
	{
		height: 60px;
	}
	</style>
</head>
<body>
<div class="main">
<div class="left">
<h3>目标图</h3>
<div class="pic" id="mainpic"></div>
<br><br>
<h3>所用时间</h3>
<p id="timer">0分0秒</p>
</div>
<div class="center">
	<table class="picbox" cellspacing="1" cellpadding="1" >
	<tbody id="picbox">
	</tbody>
	</table>
</div>
<div class="right">
    <a href="javascript:startgame()" class="btn btn-sm animated-button victoria-one">开始</a>
    <a href="level1.html" class="btn btn-sm animated-button victoria-two">等级1</a>
    <a href="level2.html" class="btn btn-sm animated-button victoria-three">等级2</a> 
    <a href="level3.html" class="btn btn-sm animated-button victoria-four">等级3</a> 
    <a href="level4.html" class="btn btn-sm animated-button victoria-five">等级4</a>
</div>
</div>
<div class="wingame">
<h2>恭喜你完成拼图！</h2>
<div class="pic pic2"></div>
<p>完成耗时：<b>0分0秒</b></p>
</div>
</body>
</html>

4.源码下载

【博主推荐】html好看的拼图小游戏(源码)

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布