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

话不多说，先上图。

首先我们需要写好网页的基本布局（此处涉及简单的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. c++编程思想里面的错误（可能c++标准变了，所以以前的东西没有更新）

    第一卷  第五章 5.3友元 下面的代码是<c++编程思想>里面的代码, struct X; struct Y{ void f(X*); }; struct X{ private: int ...

  2. 2018.06.30 BZOJ3083: 遥远的国度（换根树剖）

    3083: 遥远的国度 Time Limit: 10 Sec Memory Limit: 512 MB Description 描述 zcwwzdjn在追杀十分sb的zhx,而zhx逃入了一个遥远的国 ...

  3. 2018.09.08 AtCoder Beginner Contest 109简要题解

    比赛传送门 水题大赛? 全是水题啊!!! T1 ABC333 就是判断是不是两个数都是奇数就行了. 代码: #include<bits/stdc++.h> using namespace ...

  4. Django的路由层（2）

    https://www.cnblogs.com/yuanchenqi/articles/8931472.html django2.0版的path Django默认支持以下5个转化器: str,匹配除了 ...

  5. 打包python为可执行文件时报错R6034解决方案

    R6034 指的是:”An application has made an attempt to load the C runtime library incorrectly. Please cont ...

  6. UVa 11167 Monkeys in the Emei Mountain (最大流)

    题意:雪雪是一只猴子.它在每天的 2:00 —— 9:00之间非常渴,所以在这个期间它必须喝掉2个单位的水.它可以多次喝水,只要它喝水的总量是2.它从不多喝,在一小时内他只能喝一个单位的水.所以它喝水 ...

  7. UVa 12230 && HDU 3232 Crossing Rivers （数学期望水题）

    题意:你要从A到B去上班,然而这中间有n条河,距离为d.给定这n条河离A的距离p,长度L,和船的移动速度v,求从A到B的时间的数学期望. 并且假设出门前每条船的位置是随机的,如果不是在端点,方向也是不 ...

  8. C++标准模板库（STL）和容器

    1.什么是标准模板库(STL)? (1)C++标准模板库与C++标准库的关系 C++标准模板库其实属于C++标准库的一部分,C++标准模板库主要是定义了标准模板的定义与声明,而这些模板主要都是 类模板 ...

  9. trsd_extract_EDSD_new

    # -*- coding:utf-8 -*- import re ''' 适应新版本 ''' year='17A'#用户自定义 ss='./data/'#根目录 filename = ss+'EDSD ...

  10. HDU2577 How to Type 2016-09-11 14:05 29人阅读 评论(0) 收藏

    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...