给你个思路吧 先用ps把一张大图分割成比如9种小图 命名是pic1 ... pic9然后用随机的办法把这九张图摆在网页上 可利用div order="1" style="..."img src="pic1" //div这种形式 每一行摆三张图 然后开始让用户进行操作 这里还需要对用户的操作落位进行判断 比如把1拖到9上面 那么就用程序把1和9的div交换 每一步操作 都要检查 如果网页的HTML代码已经按照1-9的顺序排好 那么就完成的这个游戏 并终止程序
创新互联主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务东乌珠穆沁,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575
假如是按9宫格做的拼图，给每个格子分配一个id，同时给每个图片分配一个id，如果id全部相等就是成功了
很简单的嘛，分步走：
第一步 切图 这个用background就能实现，就是把一张图，在不同的格，利用背景的位置就行了，
并记录图片的顺序，比如 01，02，03.。。16，也就是把你切好的图作一个标记
第二步：分格，把指定的区域也就是拼图区。分成17分，16格是放图片，有一格是空白。。
第三步：随机把切好的图 显示到相应的位置上
第四步：当点击非空白的格子的时候，判断上下左右是否有空格，如果有，两者替换位置。判断当前的顺序是否跟记录的顺序一样了。如果一相，图拼好了。如果不一样，重复
把以下代码保存成 html 文件，然后用浏览器打开，看是不是你要的功能。
html
head
title移动数字/title
style type="text/css"
#grid {
margin-top: 0.2em;
margin-bottom: 1em;
border-collapse: separate;
border-spacing: 2px;
font-size: 26px;
}
#grid td {
border-bottom: solid 1px #B2B2B2;
border-right: solid 1px #B2B2B2;
background: #F3F3F3;
text-align: center;
white-space: nowrap;
cursor: pointer;
padding: 4px;
width: 30px;
empty-cells: show;
}
/style
script type="text/javascript" src=""/script
script type="text/javascript"
$(document).ready(function() {
var sHtml = 'tr';
var trClosed = false;
var MAX = 16;
for(var i=1; i=MAX; i++) {
if(i MAX) {
sHtml += 'td' + i + '/td';
if(i % 4 == 0) {
sHtml += '/trtr';
}
} else {
sHtml += 'td/td';
sHtml += '/tr';
}
}
$('#grid').html(sHtml);
$('#grid td').click(function(e){
$td = $(this);
var idx = $td.prevAll().length;
$left = $td.prev();
$right = $td.next();
$above = $td.parent().prev().children('td:eq(' + idx + ')');
$below = $td.parent().next().children('td:eq(' + idx + ')');
if($left $left.html() == '') {
$left.html($td.html());
$td.html('');
} else if($right $right.html() == '') {
$right.html($td.html());
$td.html('');
} else if($above $above.html() == '') {
$above.html($td.html());
$td.html('');
} else if($below $below.html() == '') {
$below.html($td.html());
$td.html('');
}
});
});
/script
/head
body
center
table id="grid"
/table
/center
/body
/html
拼图的游戏 重在思路.如果你基础过关的话...
下面我给你个游戏思路吧...
拼图这个
一,游戏思路是很简单的...
每个碎片都有一个有序号.每移动一次都检测一下所有的碎片是否都按有序号排列.是就过关...原理就这么简单...
打个比方: 我把一张图 打散成N片....每一片都有一个序号,比如:1,2,3
当用户移动一下 就检测是否所有的碎片已按序号排好,排好就过关...
二,技术思路:(以下我写的是伪代码,比如:(obj.style.width/n),那肯定得不到结果的,因为obj.style.width是个字符串.应该是:parseInt(obj.style.width)/n
1,打散图片,如何打散碎片呢?
这个其实可以用JS做一个FOR循环 ,为正张图片铺上等大小的格子(div).当然你会用(obj.style.width/n)这样计算.每一个格当前的 div[i].obj.offsetTop-img.offsetTop ,div[i].offsetLeft-img.offsetLeft..这时按照这个可以为每一个碎片DIV加上一个background-image:url(xxx);position:x,y;当然 这里的x,y你应该知道是什么了吧..这样就把图片打散到每个格子里了..
2,如何移动.这个不用我说了吧.当然是做DIV碎片的时候 多做一个出来,而且是空白的,也就是没背景的..
3,打乱.这个也很简单,执行一次随机 随机地把它们的位置调换就行了...
作为一个游戏,我只能为你提供思路到这了...一整套的思路
