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

置顶 xcLeigh

已于 2022-05-31 23:07:56 修改

阅读量5.5k

点赞数 8

分类专栏： HTML5小游戏源码文章标签： html 前端

于 2022-05-31 23:06:57 首次发布

BY xcSharp@126.com

本文链接：https://blog.csdn.net/weixin_43151418/article/details/125074948

版权

HTML5小游戏源码专栏收录该内容

14 篇文章 8 订阅

订阅专栏

拼图目录

html好看的拼图小游戏

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好看的拼图小游戏(源码)

xcLeigh

关注

8
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
15
评论
【博主推荐】html好看的拼图小游戏(附源码)

拼图目录html好看的拼图小游戏1.拼图效果示意图1.1 第一级九宫格拼图1.2 第二级十六宫格拼图1.3 第三级三十二宫格拼图14 第三级八十一宫格拼图2.图片切图说明3.实现代码3.1 第一级拼图页面代码3.2 第二级拼图页面代码3.3 第三级拼图页面代码3.4 第四级拼图页面代码4.源码下载html好看的拼图小游戏拼图资源来自，最近比较火得电视剧《且试天下》，觉得挺不错得一部剧，喜欢里面得角色，所以拿来当资源了，拼出来得成就感还是不错的，废话不多说，上效果，上代码。HTML5 + JS
复制链接

扫一扫