如何使用javascript制作拼圖游戲？

給你個思路吧 先用ps把一張大圖分割成比如9種小圖 命名是pic1 ... pic9然后用隨機的辦法把這九張圖擺在網(wǎng)頁上 可利用div order="1" style="..."img src="pic1" //div這種形式 每一行擺三張圖 然后開始讓用戶進行操作 這里還需要對用戶的操作落位進行判斷 比如把1拖到9上面 那么就用程序把1和9的div交換 每一步操作 都要檢查 如果網(wǎng)頁的HTML代碼已經(jīng)按照1-9的順序排好 那么就完成的這個游戲 并終止程序

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)東烏珠穆沁,十年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575

用JS如何判斷拼圖成功

假如是按9宮格做的拼圖，給每個格子分配一個id，同時給每個圖片分配一個id，如果id全部相等就是成功了

javascript如何寫16格拼圖游戲

很簡單的嘛，分步走：

第一步 切圖 這個用background就能實現(xiàn)，就是把一張圖，在不同的格，利用背景的位置就行了，

并記錄圖片的順序，比如 01，02，03.。。16，也就是把你切好的圖作一個標記

第二步：分格，把指定的區(qū)域也就是拼圖區(qū)。分成17分，16格是放圖片，有一格是空白。。

第三步：隨機把切好的圖 顯示到相應(yīng)的位置上

第四步：當(dāng)點擊非空白的格子的時候，判斷上下左右是否有空格，如果有，兩者替換位置。判斷當(dāng)前的順序是否跟記錄的順序一樣了。如果一相，圖拼好了。如果不一樣，重復(fù)

javascript數(shù)字拼圖

把以下代碼保存成 html 文件，然后用瀏覽器打開，看是不是你要的功能。

html

head

title移動數(shù)字/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怎么怎么制作一個拼圖游戲？

拼圖的游戲 重在思路.如果你基礎(chǔ)過關(guān)的話...

下面我給你個游戲思路吧...

拼圖這個

一,游戲思路是很簡單的...

每個碎片都有一個有序號.每移動一次都檢測一下所有的碎片是否都按有序號排列.是就過關(guān)...原理就這么簡單...

打個比方: 我把一張圖 打散成N片....每一片都有一個序號,比如:1,2,3

當(dāng)用戶移動一下 就檢測是否所有的碎片已按序號排好,排好就過關(guān)...

二,技術(shù)思路:(以下我寫的是偽代碼,比如:(obj.style.width/n),那肯定得不到結(jié)果的,因為obj.style.width是個字符串.應(yīng)該是:parseInt(obj.style.width)/n

1,打散圖片,如何打散碎片呢?

這個其實可以用JS做一個FOR循環(huán) ,為正張圖片鋪上等大小的格子(div).當(dāng)然你會用(obj.style.width/n)這樣計算.每一個格當(dāng)前的 div[i].obj.offsetTop-img.offsetTop ,div[i].offsetLeft-img.offsetLeft..這時按照這個可以為每一個碎片DIV加上一個background-image:url(xxx);position:x,y;當(dāng)然 這里的x,y你應(yīng)該知道是什么了吧..這樣就把圖片打散到每個格子里了..

2,如何移動.這個不用我說了吧.當(dāng)然是做DIV碎片的時候 多做一個出來,而且是空白的,也就是沒背景的..

3,打亂.這個也很簡單,執(zhí)行一次隨機 隨機地把它們的位置調(diào)換就行了...

作為一個游戲,我只能為你提供思路到這了...一整套的思路

新聞名稱：javascript拼圖,js拼接圖片
轉(zhuǎn)載來于：http://chinadenli.net/article7/dsihsoj.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計、定制網(wǎng)站、網(wǎng)站營銷、網(wǎng)站策劃、ChatGPT、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)