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

话不多说，先上图。

首先我们需要写好网页的基本布局（此处涉及简单的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. 执行程序---system

    头文件:#include<stdlib.h> 函数原型:int system(const char *command) 参数说明:command被执行的命令,字符串格式 返回值:成功则返回 ...

  2. c++中嵌套类，外部类访问内部类的私有成员变量

    在嵌套类中,内部类可以直接访问外部类的私有成员变量,但是外部类不能直接访问内部类的私有成员变量,必须把外部类声明为内部类的友元类 /********************************** ...

  3. 2018.09.28 牛客网contest/197/C期望操作数（状态转移+前缀和递推）

    传送门 比赛手动打了四项感觉有规律,调了40min+之后重新手算了后面几项发现只有前四项满足规律233. 首先这道题只跟q−xq-xq−x有关. 我们尝试找找递推关系. 我们令f[i]f[i]f[i] ...

  4. Django入门与实践-第14章：用户注册（完结）

    http://127.0.0.1:8000/signup/ django-admin startapp accounts INSTALLED_APPS = [ 'accounts', ] # mypr ...

  5. Kolakoski

    Kolakoski序列:我们知道的还是太少 上帝创造了整数,其余的则是我们人类的事了.正因为如此,质数.完全数.Fibonacci 数之类的数列才会让数学家们如痴如醉,因为它们的存在是如此自然,没有任 ...

  6. Object-C中方法

    //方法         //方法分了两种         //1.类方法,类调用,方法以+开头         //2.实例方法,对象调用,方法以-开头              //类方法和实例方 ...

  7. node API assert

    1.assert.throws(block, [error], [message]): assert.throws( function(){ throw new Error('wrong'); }, ...

  8. Paul and Joyce are going to a movie(More listening of Unit 2)

      Paul: Hurry up, Joyce. We need to leave now if we're going to get to the theater a half hour befor ...

  9. Tomcat服务器(一)

    一.tomcat目录中重要的文件: bin 存放启动和关闭的脚本 conf  存放配置文件 logs 日志文件 webapps 存放部署的项目 work 工作目录 Web应用开发好后,若想供外界访问, ...

  10. Oracle/PLSQL: BitAnd Function

    BITAND 函数 本文介绍 Microsoft Excel 中 BITAND 函数的公式语法和用法. 说明 返回两个数的按位“与”. 语法 BITAND( number1, number2) BIT ...