图像拼图:一个Html游戏

分享于 

10分钟阅读

Web开发

  繁體

介绍

这是初学者希望在web中开发游戏开发的一篇文章,并且不使用任何重量工具。 本文提供了使用 html/css和javascript开始 2d 游戏开发的简化步骤。 在这里,我将介绍如何创建一个图像游戏游戏,你可以将图像部件拖放并重新排列。

你可以在这里在线玩游戏: http://www.anuraggandhi.com/imagepuzzle/puzzle.html

规则

游戏的规则很简单。 你只需要把破碎的图像块拖出来交换。 你需要用正确的图像来交换它们。 拖放图像部分所需的步骤数将被计算。 因此,你可能希望考虑并尝试以最小的可能步骤进行。 正确的图像提供给你的参考。

游戏的屏幕如下所示:

Image Puzzle

Image Puzzle: Solved

关于代码

为了理解这一点,我们可以在部分中使用代码。 Html。Css和Javascript部分包含简单的标签来构成游戏的布局。 CSS提供了一些响应性的设计,Javascript部分包含了游戏的主要逻辑。 游戏中的几个重要步骤如下:

破坏图像

对于图像看起来像分成 nxn 不同部分,n 是各部分的数量,nxnli 元素在 ul 中使用。 每个 li的显示属性都设置为内联块,因此它应该像网格一样显示。 每个 li的background 图像都设置为 1/( nxn )的图像部分,并且相应地设置了 background 图像的位置。 每个 li 都分配了 data-value 属性来标识块的索引。

相同外观的代码如下所示:

 setImage: function (images, gridSize) {
 console.log(gridSize);
 gridSize = gridSize || 4; // If gridSize is null or not passed, default it as 4. console.log(gridSize);
 var percentage = 100/(gridSize - 1);
 var image = images[Math.floor(Math.random() * images.length)];
 $('#imgTitle').html(image.title);
 $('#actualImage').attr('src', image.src);
 $('#sortable').empty();
 for (var i = 0; i <gridSize * gridSize; i++) {
 var xpos = (percentage * (i % gridSize)) + '%';
 var ypos = (percentage * Math.floor(i/gridSize)) + '%';
 var li = $('<li class="item" data-value="' + (i) + '"></li>').css({
 'background-image': 'url(' + image.src + ')',
 'background-size': (gridSize * 100) + '%',
 'background-position': xpos + ' ' + ypos,
 'width': 400/gridSize,
 'height': 400/gridSize
 });
 $('#sortable').append(li);
 }
 $('#sortable').randomize();
 }

在这里你可以看到,使用简单的background-imagebackground-position 样式实现了。 在设置了borken图像之后,按照正确的顺序使用随机方法对片段进行随机化。 在游戏中,用户必须安排好Fragment才能形成完整的图像。

gridSize表示图像每一侧( 水平以及垂直) 需要分割多少个部分。 硬编码值 400是框的大小。 请注意,你可能想去掉这个硬编码的值。 我将在下次更新时使用一个变量来更新它。 基于 gridSize,我将拼图的级别分为 3部分: 简单,medium 和硬。易于为 3 x3网格,medium 4 x4和硬 5 x5. 你可以用不同的方式来实现,只需改变相应的单选按钮的值即可。

对损坏的零件进行随机化

在上一代代码 block的最后一行中,可以使用随机方法对碎片进行随机分割。 为此,创建了一个小的通用随机化函数来随机化任何jquery元素集合。

随机化方法的实现如下

$.fn.randomize = function (selector) {
 var $elems = selector? $(this).find(selector) : $(this).children(),
 $parents = $elems.parent();
 $parents.each(function () {
 $(this).children(selector).sort(function () {
 return Math.round(Math.random()) - 0.5;
 }).remove().appendTo(this);
 });
 returnthis;
}; 

这里,我们简单地遍历给定选择器的子元素,并根据随机数改变它的位置。 随机数应该在 0和集合中元素的数目之间。

拖放部分

为了使每个破碎的块可以拖动,使用了 jquery。 请确保页面中包含 jquery-ui.js,以实现可以拖放/droppable功能。

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 元素的数据值属性检查每个片的排序。 如果Fragment被排序,则表示图片已经完成。

设置样式

一个非常简单的css已经被用来简化理解。 使用的css允许页面响应,你可以在平板电脑或者手机上播放游戏。 css没有第三方库,这样你就可以轻松理解原生css样式。

计算步骤

计算步骤或者任何用户动作是任何游戏中最常见的部分。 在这里,它也通过简单的步骤实现。 每次放置后,它检查图片是否已经形成。 如果是,游戏结束,如果没有,将 stepCount 变量增加 1. 然后,使用jquery更新UI中的stepCount

定时器

定时器也是大多数游戏中的重要部分之一。 基于读者提供的反馈,实现了一个基本计时器来检查完成拼图所需的秒数。 计时器开始游戏的开始,并将每秒调用 tick 方法来更新计时器。 in方法被从start方法调用,然后在每秒( 使用javascript方法) 之后调用它本身,并使用JQuery更新用户界面中的时间。 当图片完成 换句话说,游戏结束,final 时间计算并在输出中显示出来。

below 是计时器方法的实现。
 tick: function () {
 var now = new Date().getTime();
 var elapsedTime = parseInt((now - imagePuzzle.startTime)/1000, 10);
 $('#timerPanel').text(elapsedTime);
 timerFunction = setTimeout(imagePuzzle.tick, 1000);
 } 

请注意,getTime() 方法给出自01/01/1970以来经过的milli秒数。 如果你建议在javascript中计算两个 DateTime 之间的时间,我会欢迎你。 我不想依赖 setTimeout() 中的1000秒来增加到 1秒。

色阶

根据用户给出的反馈,游戏中增加了 3个difficluty级别: 1.轻松 2.medium 3。 硬盘中的难题,在 3 x3矩阵中选择,x4矩阵和硬设置为 5 x5矩阵。

浏览器兼容性

为了简单起见,我已经避免使用 Html 5或者 CSS 3,以便它能在大多数浏览器中工作。 这个游戏可能不适用于旧的浏览器 <IE8,因为使用了JQuery版本。 如果你希望在旧的broswer版本中使用这个游戏,你可以简单地将脚本引用替换为旧的JQuery版本( 1.9或者更早版本)。 最新的JQuery版本不支持旧的浏览器。

附加的示例代码应该在大多数最新浏览器中运行。 我已经在 IE 11和 Google Chrome 中测试过了。

以后考虑

这是一篇针对初学者的文章,他们想从游戏开发开始,简单的方法。 以后,我将实现并演示声音效果和一些动画,使之更加动态。 你可能还希望考虑实现计时器和完成图片所需的时间。 现在开始玩游戏吧。 对改善游戏的任何建议都欢迎。

历史记录

  • 年:月: 第一版版本。
  • :: 更新:根据损坏零件的数量增加了难度级别。 根据用户反馈。
  • 收费 12 ,2017: 将项目添加到github和其他次要更新。

图像  GAM  Puzzle