一款html拼图游戏详解

本文是爱编程原创翻译，转载请看清文末的转载要求，谢谢合作！

游戏介绍

这篇文章是献给web游戏开发者用简单的开发工具开发一款游戏。此文介绍了用html、css、javascript只需简单和几个步骤开发一款2d游戏。在这里，我要呈现给大家如何创建一款拼图游戏，在这个游戏中你可以拖动小图块来拼成完整的大图。

点击这里查看游戏效果。

游戏规则

游戏规则非常简单，你只要拖动被切碎的图片块来组成完整的大图。需要用正确的方法才能最终拼成完整的图片。在游戏中拖动小图片的次数将被统计下来。所以。应该尽量用最少的步骤来完成游戏。正确的图片效果在界面的右侧。

游戏的效果图如下：

关于代码

为了更好理解这些代码，我们把代码分为三部分，html，css和javasctipt。Html代码包括简单标记来布局游戏。Css提供了一系列的感应设计。Javascript部分就是游戏的主要逻辑代码。游戏的主要代码如下：

打碎图片

一张图片被切割成16个小块。把这16个小块放在ul的li标签下。li标签下的is的display属性设为inline-block。每一个Li标签的background –image属性设为这张图片的16分之1部分，背景图的位置按对应的设置好。实现代码如下：

 for (var i = 0; i < 16; i++) {

        var xpos = (33.33 * (i % 4)) + '%';

        var ypos = (33.33 * Math.floor(i / 4)) + '%';

        var li = $('<li class="item" data-value="' + (i) + '"></li>').css({

            'background-image': 'url(' + image.src + ')',

            'background-position': xpos + ' ' + ypos

});

到这一步你可以看到被打碎的图片效果，在右侧有个排序按钮，点击利用生成随机数的方法来随机的排列这些小碎片。在游戏中，用户需要重新排列这些小碎片来完成这张图片。

拖动图片的方法

为了让被打碎的小图片可以被拖动，我们需要引用jquery draggable插件。务必确保你的页面中已经引用了jquery-ui.js。

enableSwapping: function (elem) {

        $(elem).draggable({

            snap: '#droppable',

            snapMode: 'outer',

            revert: "invalid",

            helper: "clone"

});

        $(elem).droppable({

            drop: function (event, ui) {

                var $dragElem = $(ui.draggable).clone().replaceAll(this);

                $(this).replaceAll(ui.draggable);

                currentList = $('#sortable > li').map(function (i, el) { return $(el).attr('data-value'); });

                if (isSorted(currentList))

                    $('#actualImageBox').empty().html($('#gameOver').html());

                imagePuzzle.enableSwapping(this);

                imagePuzzle.enableSwapping($dragElem);

});

我们可以看到每次小图片移动完成，isSorted将检查每个小图片是否重新排序。正在排序的小图片将检查其所在的li标签的data-value属性。如果小图片按正常的顺序排列好后，游戏就完成了。

设置样式

一小段非常简短的css代码非常容易理解。用这些css代码来完成响应式设计，使游戏可在平板电脑和手机上完美展现。没有引用任可第三方的css代码，所以这些css代码非常容易理解。

统计移动的次数

统计用户完成的步骤数是游戏设计中最常见的一部分。这款游戏也一样，这里应用了一个简单的步骤。每一次的拖动完成后检查图片是否已经成功完成。如果是游戏结束，如果不是，移动的次数加1。这里我们用了jquery ui来完成移动次数加1。

浏览器兼容性

我没有用任何html5和css3的属性，所以这款游戏可以支持大部分浏览器。这款游戏不能在ie8或更低版本中运行。如果你想让这款游戏兼容ie8，只需要简单的把引用的jquery版本换成1.9版本或更旧生版本。最新的jquery版本不支持这些低版本的浏览器。

引用的代码需运行在最新的浏览器中，已经测试了ie11和google浏览器，可以完美运行。

游戏改进

好了。这篇文章是用简单的代码给开发者介绍这款拼图游戏的开发。在游戏的改进方面我们可以添加一些音乐和一些动画效果使得我们的游戏更加有活力。作为开发者的你，也可想一想改进的方案，比如说加入游戏完成所用的时间统计功能。就到这里吧。祝你玩游戏愉快。

原文链接：http://***/Article/5898
英文原文：Image Puzzle: A Html Game
翻译作者：爱编程– 拎壶充

在线预览源码下载

转载于:https://www.cnblogs.com/liaohuolin/p/3957082.html

一款html拼图游戏详解相关推荐

Python Tkinter——数字拼图游戏详解版
Python Tkinter 实践系列--数字拼图游戏详解版 import random #Python中的random是一个标准库用于生成随机数.随机整数.还有随机从数据集取数据. import t ...
【C语言】扫雷小游戏详解
[C语言]扫雷小游戏详解前言: 还记得大明湖畔的夏雨荷,电脑课上的扫雷吗? ---------------------------是他吗--------------------------- 没 ...
单片机电流检测电路图大全（四款模拟电路设计原理图详解） - 信号处理电子电路图
电路图简介: 本文主要介绍了单片机电流检测电路图大全(四款模拟电路设计原理图详解).它的主要功能是完成对过电压的瞬时值和峰值的检测.过电压次数的检测.电源输出电压和电流的检测,并通过键盘的操作显示出各 ...
取石子游戏详解NIM
取石子游戏详解NIM 分类: 编程之美2014-09-13 09:38 478人阅读评论(3) 收藏举报编程之美目录(?)[+] http://blog.csdn.net/pipisorry/ ...
HTML+Javascript制作拼图小游戏详解（一）
本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区, ...
一款3D拼图游戏，看呆太多数学天才，被当作魔术表演
<3D拼图游戏>是一款更具视觉效果的拼图游戏,游戏玩法与传统的拼图相同,在视觉上更具欣赏度,带给玩家更加精彩的游戏体验. 一款具有3D风格的VC++拼图游戏范例源代码,游戏支持难易程度选择 ...
100行实现《贪吃蛇》小游戏详解（Qt）
目录游戏说明游戏效果展示游戏代码详解关键数据结构初始化游戏界面游戏部分提示部分蛇逻辑小蛇的初始化边界判断蛇吃食物判断随机生成食物是否撞到自己小蛇的移动游戏主体逻辑定时 ...
牛客小朋友做游戏详解＜每日一题分享＞
题目: 条件: 1. 闹腾的小朋友挨在一起的话就会出现打闹行为导致游戏无法进行故每个闹腾的小朋友两边必须是安静的小朋友 (选择参加游戏的小朋友必须满足安静小朋友的人数>或=闹腾小朋友人数 ...
3w最简单led灯电路图_led灯驱动电源电路图大全（六款模拟电路设计原理图详解）...
led灯驱动电源电路图(一) 电路工作原理 LED楼道灯的电路如下图所示.电路由电容降压电路.整流电路.LED发光电路和光电控制电路等部分组成. 220V交流电经电容C1.R1降压限流后在A.B两点的 ...

一款html拼图游戏详解

一款html拼图游戏详解相关推荐

最新文章

热门文章