本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程。

话不多说，先上图。

首先我们需要写好网页的基本布局（此处涉及简单的HTML和CSS知识）。

网页一共分为三个区域，左侧时间显示区，中间主要游戏区和右侧按钮菜单区。

通过三个DIV设置其style为float:left使三个div同行显示。

<div class="main">

<div class="left">

　　<!-- 左侧区域 -->

</div>

<div class="center">

 　　<!-- 中间区域 -->

</div>

<div class="right">

    <!-- 右侧区域 -->

</div>

</div>

然后我们分别在三个div中添加不同的内容。

由于本篇文章主要讲js的设计思路，html不做过多介绍。

详情代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>拼图游戏——初级</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内容 -->

<div class="left">

<h3>目标图</h3>

<div class="pic" id="mainpic"></div>

<br><br>

<h3>所用时间</h3>

<p id="timer">0分0秒</p>

</div>

<!-- 中间div内容 -->

<div class="center">

    <table class="picbox" cellspacing="0" cellpadding="1">

    <tbody id="picbox">

    </tbody>

    </table>

</div>

<!-- 右侧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">初级</a>

    <a href="level2.html" class="btn btn-sm animated-button victoria-three">中级</a>

    <a href="level3.html" class="btn btn-sm animated-button victoria-four">高级</a>

</div>

</div>

<!-- 胜利时需要弹出的界面  start -->

<div class="wingame">

<h2>恭喜你完成拼图！</h2>

<div class="pic pic2"></div>

<p>完成耗时：<b id="timer2">0分0秒</b></p>

</div>

<!-- 胜利时需要弹出的界面  end -->

</body>

</html>

好吧，还是给大家讲解一下html页面构成，

左侧通过id="mainpic"显示当前所要完成的拼图。id="timer"是一个计时器通过setTimeout()递归来实现计时。

中间区域时一个表格，通过给表格赋予不同的背景图来使表格组成一张大的图片，再通过背景图的替换实现挪移效果。

具体代码稍后我们会详细讲到。

至于为什么没有tr和td。我们通过js动态生成，用参数的形式，这样就可以很轻松的实现四阶五阶等更复杂的拼图。

右侧为几个按钮，具体用来实现不同页面的跳转和游戏的开始。

body

{

    background-color: #E8E8E8;

}

.main

{

    margin:0 auto;

    width: 1250px;

    height: 720px;

}

.left

{

    width: 300px;

    height: 700px;

    float: left;;

}

.center

{

    width: 700px;

    height: 700px;

    float: left;

}

.right

{

    width: 250px;

    height: 700px;

    color: red;

    float: right;

}

.picbox

    {

        margin: 0 auto;

        border: 1px solid black;

        width: 650px;

        height: 650px;

    }

    .picbpx td

    {

        padding: 0;

    }

    .border_bg

    {

        background-image:url(../img/border_bg.jpg);

        width: 100px;

        height: 100px;

        background-repeat: repeat;

    }

    .left h3

    {

        text-align: center;;

    }

    #timer

    {

        color: #D24D57;

        text-align: center;

        font-size:23px;

        font-weight: bold;

    }

    .pic

    {

        margin: 20px auto;

        background-size: cover;

        width: 270px;

        height: 250px;

        border: 2px solid #FFF;

    }

    .wingame

    {

        display: none;

        width: 600px;

        height: 300px;

        background-color: rgba(80,100,120,0.5);

        position: fixed;

        top:25vh;

        left: 32vw;

    }

    .pic2

    {

        width: 150px;

        height: 150px;

    }

    .pic2:hover

    {

        cursor:pointer;

    }

    .wingame h2

    {

        text-align: center;

    }

    .wingame p

    {

        font-size: 20px;

        text-align: center;

    }

    .wingame p b

    {

        color: rgb(200,60,60);

    }

小弟奉上css部分代码。

PS：博主菜鸟一个大神勿喷，不过接受教育批评。

欢迎大家留言讨论更好的方法。

勿喷，勿喷，勿喷。

链接: https://pan.baidu.com/s/1nVfFD6zviIQmY3xRYeiD7Q 提取码: ci4g

HTML+Javascript制作拼图小游戏详解（一）的更多相关文章

  1. HTML+Javascript制作拼图小游戏详解（终）

    上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...

  2. HTML+Javascript制作拼图小游戏详解（二）

    上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...

  3. JavaScript版拼图小游戏

    慕课网上准备开个新的jQuery教程,花了3天空闲时间写了一个Javascript版的拼图小游戏,作为新教程配套的分析案例 拼图游戏网上有不少的实现案例了,但是此源码是我自己的实现,所以不做太多的比较 ...

  4. java贪吃蛇小游戏详解

    https://blog.csdn.net/u011622021/article/details/81162083

  5. 壁球小游戏详解（附有源码.cpp）

    1.在python中安装pygame 2.将下列源码复制过去,运行. #引用 import pygame, sys #初始化 pygame.init() size = width, height = ...

  6. 教你用Python自制拼图小游戏，一起来制作吧

    摘要: 本文主要为大家详细介绍了python实现拼图小游戏,文中还有示例代码介绍,感兴趣的小伙伴们可以参考一下. 开发工具 Python版本:3.6.4 相关模块: pygame模块: 以及一些Pyt ...

  7. javascript中=、==、===区别详解

    javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...

  8. 使用NGUI实现拖拽功能（拼图小游戏）

    上一次用UGUI实现了拼图小游戏,这次,我们来用NGUI来实现 实现原理 NGUI中提供了拖拽的基类UIDragDropItem,所以我们要做的就是在要拖拽的图片上加一个继承于该类的脚本,并实现其中的 ...

  9. jQuery拼图小游戏

    jQuery拼图小游戏 最后样式 核心代码部分 <script type="text/javascript" > $(function () { $("td& ...

随机推荐

  1. Mina 系列(二)之基础

    Mina 系列(二)之基础 Mina 使用起来多么简洁方便呀,就是不具备 Java NIO 的基础,只要了解 Mina 常用的 API,就可以灵活使用并完成应用开发. 1. Mina 概述 首先,看 ...

  2. 2018.07.18 HAOI2009 逆序对数列（线性dp）

    传送门 目前只会n2" role="presentation" style="position: relative;">n2n2的dp" ...

  3. 如何在eclipse的配置文件里指定jdk路径

    转载自:https://blog.csdn.net/gnail_oug/article/details/51925804:个人做了些小修改. 今天下载了eclipse4.6版本,打开时报Version ...

  4. Android draw Rect 坐标图示

    前两天在博客发了在例子 android Canvas类介绍 http://byandby.javaeye.com/blog/825330 建议大家 点进去 看一看 不然下边没办法 继续啊. 我还是把这 ...

  5. python Cannot uninstall 'numpy'. It is a distutils installed project and thus we cannot accurately determine which files belong to it which would lead to only a partial uninstall.

    在Python中移除(升级)numpy的时候出现: Cannot uninstall 'numpy'. It is a distutils installed project and thus we ...

  6. （网络流 模板）A Plug for UNIX -- poj -- 1087

    链接: http://poj.org/problem?id=1087 http://acm.hust.edu.cn/vjudge/contest/view.action?cid=82835#probl ...

  7. （最小生成树）Jungle Roads -- HDU --1301

    链接: http://acm.hdu.edu.cn/showproblem.php?pid=1301 http://acm.hust.edu.cn/vjudge/contest/view.action ...

  8. android java层实现hook替换method

    Android上的热修复框架 AndFix 大家都很熟悉了,它的原理实际上很简单: 方法替换——Java层的每一个方法在虚拟机实现里面都对应着一个ArtMethod的结构体,只要把原方法的结构体内容替 ...

  9. hdu 5007

    http://acm.hdu.edu.cn/showproblem.php?pid=5007 字符串处理 暴力 #include <cstdio> #include <cstdlib ...

  10. express4.X 笔记

    express是node的web框架,更新频繁,3.X到4.X有了很大的改变.网上的例子,各种版本的都有,为了以后方便,现在重新认真看一遍4.X的API,统一以后的使用方法.在J2EE上落后了,在ex ...