一款html拼图游戏详解
查看: 3934|
评论: 0|来自: 爱编程
摘要: 这篇文章是献给web游戏开发者用简单的开发工具开发一款游戏。此文介绍了用html、css、javascript只需简单和几个步骤开发一款2d游戏。在这里，我要呈现给大家如何创建一款拼图游戏，在这个游戏中你可以拖动小图块来拼 ...
　　游戏介绍　　这篇文章是献给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浏览器，可以完美运行。　　游戏改进　　好了。这篇文章是用简单的代码给开发者介绍这款拼图游戏的开发。在游戏的改进方面我们可以添加一些音乐和一些动画效果使得我们的游戏更加有活力。作为开发者的你，也可想一想改进的方案，比如说加入游戏完成所用的时间统计功能。就到这里吧。祝你玩游戏愉快。　　原文链接：　　英文原文：Image Puzzle: A Html Game　　翻译作者：爱编程- 拎壶充
上一篇：下一篇：
Powered by当前位置：
儿童拼图游戏
专题介绍:本专题专门收集了各种各样的拼图游戏，让宝宝根据需要和喜好，任意选择自己喜欢的拼图游戏，这里集合了各个年龄段的拼图小游戏，不仅能开发宝宝的智力，还能培养宝宝对形状的认识，让宝宝变得爱思考，肯动脑的好习惯，让宝宝在小游戏中找到乐趣，在快乐中成长。
亲宝儿歌手机版
亲宝儿歌手机版，手机也能听儿歌，随时随地听儿歌，android、ipad、iphone三个版本总有一个适合你，下载到桌面直接***到手机就能听哦！
友情链接：页面没有找到当前位置：&&&拼图游戏
拼图游戏非常好玩的拼图游戏
单机游戏排行榜排名：792(总榜)热度值：5
总评：6.7分
共497人评分
为你推荐：
非常好玩的游戏，界面简单、容易上手。支持BMP和JPG两种图片格式，可以自已调整难度和拼图大小。自带打印功能，可以自己定义背景(MID和MP3)和音效。还可以通过它生成一个单个图片的拼图游戏送给朋友。是送MM的极品游戏。
好玩的拼图类单机游戏合集
拼图游戏是一个老少皆宜的益智类游戏，将一张图片分成不同的部分，玩家需要靠自己的观察以及脑中生成的印象将其还原成一个完整的图片，从简单的4*4，到后来复杂多变的拼图，拼图游戏带给玩家无数的欢乐，小编将这些好玩的拼图游戏汇总，喜欢的玩家可以下载。...
提示：强烈建议使用迅雷，旋风，网盘下载，享受十倍超高速下载速度！
只解决游戏不能玩的问题时间:09:00-18:00(节假日除外)
玩家粉丝群：
类型：角色扮演评分：9.9分
大小：2.89MB[休闲类]
大小：6.73MB[休闲类]
大小：46.27MB[休闲类]
大小：243.08MB[休闲类]
大小：7.12MB[休闲类]
大小：116.30MB[休闲类]
大小：9.49MB[休闲类]
大小：5.94MB[休闲类]
大小：0.67MB[休闲类]
大小：27.86MB[休闲类]
玩游戏网 Corporation, All Rights Reserved 湘ICP备号-3