【博主推荐】html好看的拼图小游戏(附源码)
2024-06-07 08:49:34
拼图目录
- html好看的拼图小游戏
- 1.拼图效果示意图
- 1.1 第一级 九宫格拼图
- 1.2 第二级 十六宫格拼图
- 1.3 第三级 三十二宫格拼图
- 14 第三级 八十一宫格拼图
- 2.图片切图说明
- 3.实现代码
- 3.1 第一级拼图页面代码
- 3.2 第二级拼图页面代码
- 3.3 第三级拼图页面代码
- 3.4 第四级拼图页面代码
- 4.源码下载
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好看的拼图小游戏(源码)
【博主推荐】html好看的拼图小游戏(附源码)相关推荐
- html实现扫雷小游戏(附源码)
文章目录 实现功能 1.扫雷设计 1.1 主界面 1.2 扫雷难度 1.3 附带功能 2.效果和源码 2.1 动态效果 2.2 源代码 源码下载 作者:xcLeigh 文章地址:https://blo ...
- 【Python游戏】Python基于pygame实现的人机大战的斗兽棋小游戏 | 附源码
前言 有粉丝说要我出一期Python版本的斗兽棋,今天宠粉狂魔的我不就来啦!! 虽然是一个简单的小游戏,但是对于新手小伙伴来说还是有一定的小难度的哟!要是不理解都可以找到小编的哈!! 相关文件 关注小 ...
- 整理了30款Python小游戏附源码，五一有的玩了
快到五一了,整理了 30 款 Python 小游戏源码分享给大家,具体内容可以点击下方视频号查看: 点击上方视频后,源码获取方式:①关注上方视频号.②点赞当前视频.③在当前视频评论区扣1 友情提示:获 ...
- 【Python游戏】基于化学方程式的基础上，用Python实现一个消灭泡泡小游戏 | 附源码
前言 halo,包子们下午好 今天实现的这个小游戏呀,说实话化学不太好的小伙伴可能看起来会有点懵逼 不过不用担心,咱们今天不是来学化学的,我们是来学习Python的 所以呀,不要太担心啦,大家先好好看 ...
- 一口气用Python写了13个小游戏 (附源码)
大家好,今天给大家分享13个游戏源码,可以自己复现玩玩,研究下里面的编程逻辑,对学习编程(特别是初学者)应该会有很大帮助. 由于文章较长,大家记得滑到文末点个赞哈- 1.吃金币 源码分享: impor ...
- 【Python游戏】基于pygame实现的一个Dino Rush 恐龙宝贝冲冲冲的小游戏 | 附源码
前言 halo,包子们晚上好 很久没有更新啦,主要是小编这边最近有点小忙 今天给大家整一个Dino Rush 恐龙宝贝冲冲冲的小游戏 还是一个比较记经典的小游戏,还记这可谷歌浏览器上没有网也能打发时间 ...
- 【Python游戏】用Python 和 Pyglet 编写一个我的世界小游戏 | 附源码
相关文件 想学Python的小伙伴可以关注小编的公众号[Python日志] 有很多的资源可以白嫖的哈,不定时会更新一下Python的小知识的哈!! 需要源码的小伙伴可以在公众号回复我的世界 Pytho ...
- 用C语言easyx库来写一个简单的翻翻乐小游戏(附源码素材)
简明目录 写在前面 easyx库 准备工作 新建项目文件 分析 素材分析 上代码吧 地图表示 开始界面 地图初始化(打乱) 游戏过程实现 主函数的实现 测试 优化 1.游戏分数 2.游戏时间 3.nu ...
- 分享Python开发的13个小游戏(附源码)
导语 哈喽哈喽~铁汁萌!愉快的周末到了天气也变好了不知道大家有没有出去玩吖!小编这几天太累了周末就宅在家里啦
最新文章
- ArcGIS for qml - 地址地标转换为经纬度（地理编码）
- js 遍历对象的几种方法
- 玩转linux文件描述符和重定向,玩转Linux文件描述符和重定向
- JSP的9个内置对象-response
- java 获取所有线程,Java 实例 - 获取所有线程
- 用python如何制作表格步骤_Python中用xlwt制作表格实例讲解
- 为什么无法建立过程性能模型？
- Linux命令行截屏,Scrot：Linux 命令行截屏工具
- 1078 Hashing (25 分) 解决冲突采用正向增加的二次探查法
- 7款让你时刻涨知识越变越强的在线网站分享，相见恨晚！
- 人脸检测FDDB测试ROC曲线生成
- Linux文件压缩命令
- java实现deflate数据压缩和gzip数据压缩
- 用C#写一个微信登录软件(自己写协议)
- mysql对韵母分组,基于MySQL的中文发音查询的元级实现
- 【offerMe--面经必备】---京东面经分享（包含答案）
- 获取已安装或未安装的apk签名
- 电路b-3—06刘晏辰
- java 初级、中级、高级工程师
- Linux的账号与权限管理
热门文章
- 论述计算机与外设的访问控制方法,外设访问控制方法、装置与系统
- 安卓手机上漂亮的考试倒计时软件
- 现货黄金分时图怎么看？
- 解决yarn错误error An unexpected error occurred: “https://registry.yarnpkg.com/hardhat: ETIMEDOUT“.
- 某知名gov备份网站拟稿
- Epoll Reactor模型的部分代码[选自gxc]
- 新浪云SAE上运行PHP代码,新浪云SAE 上使用Thinkphp5 出现问题
- 1058：求一元二次方程（C C++)
- 基于JAVA校园流浪猫图鉴管理系统的设计与实现计算机毕业设计源码+系统+数据库+lw文档+部署
- 黄老板，给我来个亲笔签名，抽显卡~