javascript拼图,js拼接图片

如何使用javascript制作拼图游戏？

给你个思路吧 先用ps把一张大图分割成比如9种小图 命名是pic1 ... pic9然后用随机的办法把这九张图摆在网页上 可利用div order="1" style="..."img src="pic1" //div这种形式 每一行摆三张图 然后开始让用户进行操作 这里还需要对用户的操作落位进行判断 比如把1拖到9上面 那么就用程序把1和9的div交换 每一步操作 都要检查 如果网页的HTML代码已经按照1-9的顺序排好 那么就完成的这个游戏 并终止程序

创新互联主要从事成都网站建设、网站建设、网页设计、企业做网站、公司建网站等业务。立足成都服务东乌珠穆沁,十年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:18980820575

用JS如何判断拼图成功

假如是按9宫格做的拼图，给每个格子分配一个id，同时给每个图片分配一个id，如果id全部相等就是成功了

javascript如何写16格拼图游戏

很简单的嘛，分步走：

第一步 切图 这个用background就能实现，就是把一张图，在不同的格，利用背景的位置就行了，

并记录图片的顺序，比如 01，02，03.。。16，也就是把你切好的图作一个标记

第二步：分格，把指定的区域也就是拼图区。分成17分，16格是放图片，有一格是空白。。

第三步：随机把切好的图 显示到相应的位置上

第四步：当点击非空白的格子的时候，判断上下左右是否有空格，如果有，两者替换位置。判断当前的顺序是否跟记录的顺序一样了。如果一相，图拼好了。如果不一样，重复

javascript数字拼图

把以下代码保存成 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

用javascript怎么怎么制作一个拼图游戏？

拼图的游戏 重在思路.如果你基础过关的话...

下面我给你个游戏思路吧...

拼图这个

一,游戏思路是很简单的...

每个碎片都有一个有序号.每移动一次都检测一下所有的碎片是否都按有序号排列.是就过关...原理就这么简单...

打个比方: 我把一张图 打散成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,打乱.这个也很简单,执行一次随机 随机地把它们的位置调换就行了...

作为一个游戏,我只能为你提供思路到这了...一整套的思路