一款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://www.w2bc.com/Article/5898
英文原文:Image Puzzle: A Html Game
翻译作者:爱编程– 拎壶充
一款html拼图游戏详解的更多相关文章
- HTML+Javascript制作拼图小游戏详解(终)
上次我们已经讲解了制作的原理,并且展示了主要代码. 这次我将完整的代码给大家,仅供参考. HTML部分如下: <!DOCTYPE html> <html lang="en& ...
- HTML+Javascript制作拼图小游戏详解(一)
本文章将分享一个来自前端菜鸟突发奇想的拼图游戏制作方法以及实现过程. 话不多说,先上图. 首先我们需要写好网页的基本布局(此处涉及简单的HTML和CSS知识). 网页一共分为三个区域,左侧时间显示区, ...
- HTML+Javascript制作拼图小游戏详解(二)
上一篇我们说了网页的基本布局.接下来将为大家带来具体的实现方法. 拼图通表格来实现,做一个方形的表格,改变其大小使之如图所示. 试想一下如果我们将一张图片剪成6张分别放入对应位置,然后再把它打乱,这样 ...
- jQuery版推箱子游戏详解和源码
前言 偶然间看到很多用js写游戏的感觉很炫酷的样子,所以就想试试,就看了一些资料和某前端站点的视屏.于是乎就自己动手实践了一下,上推箱子截图 感觉很丑陋,但是功能是实现了.再说貌似大多都是这样的吧,这 ...
- java贪吃蛇小游戏详解
https://blog.csdn.net/u011622021/article/details/81162083
- 壁球小游戏详解(附有源码.cpp)
1.在python中安装pygame 2.将下列源码复制过去,运行. #引用 import pygame, sys #初始化 pygame.init() size = width, height = ...
- 爱拼图游戏android源码完整版
这个是一款爱拼图游戏源码完整版,该游戏源码比较完整的,可以支持音乐的播放在游戏的玩的过程中,还可以控制系统的声音等,可以支持多种图片的选择来进行玩的,还可以根据自己的爱好选择不同的难度来的,级别分为: ...
- 爆款AR游戏如何打造?网易杨鹏以《悠梦》为例详解前沿技术
本文来自网易云社区. 7月31日,2018云创大会游戏论坛在杭州国际博览中心103B圆满举行.本场游戏论坛聚焦探讨了可能对游戏行业发展有重大推动的新技术.新实践,如AR.区块链.安全.大数据等. 网易 ...
- 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
[微信小程序项目实践总结]30分钟从陌生到熟悉 前言 我们之前对小程序做了基本学习: 1. 微信小程序开发07-列表页面怎么做 2. 微信小程序开发06-一个业务页面的完成 3. 微信小程序开发05- ...
随机推荐
- SQL Server死锁排查经历 -基于SqlProfiler
提到sql server,想必最让人头疼的当属锁机制了.在默认的read committed隔离模式下,连最基本的select操作都要申请各种粒度的锁,而且在读取数据过程中会不断有锁升级.转化.在非 ...
- 转:基于 linux 平台的 libpcap 源代码分析
libpcap 是 unix/linux 平台下的网络数据包捕获函数包,大多数网络监控软件都以它为基础.Libpcap 可以在绝大多数类 unix 平台下工作,本文分析了 libpcap 在 linu ...
- 【TP3.2】跨库操作和跨域操作
一.跨库操作:(同一服务器,不同的数据库) 假设UserModel对应的数据表在数据库user下面,而InfoModel对应的数据表在数据库info下面,那么我们只需要进行下面的设置即可. class ...
- java中写sql语句的小小细节
来源于:http://www.cnblogs.com/reine98/p/6180472.html 看如下一条sql语句 1 2 3 4 5 6 String sql="SELECT * F ...
- mysql优化利器之explain
一.语法 {EXPLAIN | DESCRIBE | DESC} tbl_name [col_name | wild] {EXPLAIN | DESCRIBE | DESC} [explain_typ ...
- android中完全退出当前应用程序的四种方法
Android程序有很多Activity,比如说主窗口A,调用了子窗口B,如果在B中直接finish(), 接下里显示的是A.在B中如何关闭整个Android应用程序呢?本人总结了几种比较简单的实现方 ...
- Android开发学习之数据存取
Android系统中提供了一种文件读写的方法,可以将一些数据以文件的形式保存在设备中.比如一些word文档,PDF文档,图片,音频,视频文件等. 使用文件读写方法的步骤: 1.调用Context.op ...
- jsp里面实现asp.net的Global文件内容。
Global.java文件: import javax.servlet.ServletContext; import javax.servlet.ServletContextEvent; import ...
- SELECT控件add方法 ie 类型不匹配
s = document.createElement('select'); try{ //for ie8 or earlier s.add(new Option('text','value'),s.o ...
- 使用VUE+iView+.Net Core上传图片
我们直接进入主题,使用VS2017开发工具 首先要创建一个WebApi项目,创建完之后,在wwwroot文件下,创建一个文件夹 名字可以随意起 我这里呢就叫做Upload了 ok ! 然后我们再创建 ...