欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS 拼圖游戲 面向?qū)ο螅⑨屚暾?/h1>
 更新時(shí)間：2009年06月18日 21:38:23   作者：  
原創(chuàng)的JS拼圖游戲，面向?qū)ο螅⑨屚暾Ｗ髡?sunxing007
在線演示 http://img.jb51.net/online/pintu/pintu.htm
復(fù)制代碼 代碼如下:

<html>
<head>
<title>JS拼圖游戲</title>
<style>
    body{
        font-size:9pt;
    }
table{
border-collapse: collapse;
}
input{
    width:20px;
}
</style>
</head>
<body>
    JS原創(chuàng)作品：JS拼圖游戲<br>
    注釋完整， 面向?qū)ο?lt;br>
    轉(zhuǎn)載請注明來自<a >http://blog.csdn.net/sunxing007</a><br>
    <input type="text" id="lines" value='3'/>行<input type="text" id="cols" value='3'/>列 &nbsp;&nbsp; <button id="start"> 開 始 </button><br>
<table id="board" border=1 cellspacing=0 cellpadding=0>
        <tr><td></td><td></td><td></td></tr>
        <tr><td></td><td></td><td></td></tr>
</table>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<img id='img' src="http://img.jb51.net/online/pintu/dog.jpg" style="" /><br>
轉(zhuǎn)載請注明來自<a >http://blog.csdn.net/sunxing007</a><br>
</body>
</html>
<script>
//ie7以下默認(rèn)不緩存背景圖像，造成延遲和閃爍，修正此bug.
//（csdn網(wǎng)友wtcsy提供http://blog.csdn.net/wtcsy/）
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){alert(e)};
    //輔助函數(shù)
    function $(id){return document.getElementById(id)};
    /*************************************************
    * js拼圖游戲 v1.6
    * 作者 sunxing007
    * 轉(zhuǎn)載請注明來自http://blog.csdn.net/sunxing007
    **************************************************/
    var PicGame = {
            //行數(shù)
            x: 3,
            //列數(shù)
            y: 3,
            //圖片源
            img: $('img'),
            //單元格高度
            cellHeight: 0,
            //單元格寬度
            cellWidth: 0,
            //本游戲最主要的對象：表格，每個(gè)td對應(yīng)著一個(gè)可以移動(dòng)的小格子
            board: $('board'),
            //初始函數(shù)
            init: function(){
                        //確定拼圖游戲的行數(shù)和列數(shù)
                        this.x = $('lines').value>1?$('lines').value : 3;
                        this.y = $('cols').value>1?$('cols').value : 3;
                        //刪除board原有的行
                        while(this.board.rows.length>0){
                                this.board.deleteRow(0);
                        }
                        //按照行數(shù)和列數(shù)重新構(gòu)造board
                        for(var i=0; i<this.x; i++){
                                var tr = this.board.insertRow(-1);
                                for(var j=0; j<this.y; j++){
                                        var td=tr.insertCell(-1);
                                }
                        }
                        //計(jì)算單元格高度和寬度
                        this.cellHeight = this.img.height/this.x;
                        this.cellWidth = this.img.width/this.y;
                        //獲取所有的td
                        var tds = this.board.getElementsByTagName('td');
                        //對每個(gè)td， 設(shè)置樣式
                     for(var i=0; i<tds.length-1; i++){
                             tds[i].style.width = this.cellWidth;
                             tds[i].style.height = this.cellHeight;
                             tds[i].style.background = "url(" + this.img.src + ")";
                             tds[i].style.border = "solid #ccc 1px";
                             var currLine = parseInt(i/this.y);
                             var currCol = i%this.y;
                             //這里最重要，計(jì)算每個(gè)單元格的背景圖的位置，使他們看起來像一幅圖像
                             tds[i].style.backgroundPositionX = -this.cellWidth * currCol;
                             tds[i].style.backgroundPositionY = -this.cellHeight * currLine;
                     }
                     /** begin: 打亂排序*******************/
                     /**
                     *    打亂排序的算法是這樣的：比如我當(dāng)前是3*3布局，
                     * 則我為每一個(gè)td產(chǎn)生一個(gè)目標(biāo)位置，這些目標(biāo)位置小于9且各不相同，
                     * 然后把它們替換到那個(gè)地方。
                     **/

                     //目標(biāo)位置序列
                     var index = [];
                     index[0] = Math.floor(Math.random()*(this.x*this.y));
                     while(index.length<(this.x*this.y)){
                     var num = Math.floor(Math.random()*(this.x*this.y));
                     for(var i=0; i<index.length; i++){
                     if(index[i]==num){
                     break;
                     }
                     }
                     if(i==index.length){
                     index[index.length] = num;
                     }
                     //window.status = index;
                     }
                     var cloneTds = [];
                     //把每個(gè)td克隆， 然后依據(jù)目標(biāo)位置序列index，替換到目標(biāo)位置
                     for(var i=0; i<tds.length; i++){
                     cloneTds.push(tds[i].cloneNode(true));
                     }
                     for(var i=0; i<index.length; i++){
                     tds[i].parentNode.replaceChild(cloneTds[index[i]],tds[i]);
                     }
                     /** end: 打亂排序*********************/

                     //為每個(gè)td添加onclick事件。
                     tds = this.board.getElementsByTagName('td');
                     for(var i=0; i<tds.length; i++){
                             tds[i].onclick = function(){
                             //被點(diǎn)擊對象的坐標(biāo)
                         var row = this.parentNode.rowIndex;
                         var col = this.cellIndex;
                         //window.status = "row:" + row + " col:" + col;
                         //空白方塊的坐標(biāo)
                         var rowBlank = 0;
                         var colBlank = 0;
                         //reachable表示當(dāng)前被點(diǎn)擊的方塊是否可移動(dòng)
                         var reachable = false;
                         if(row+1<PicGame.x && PicGame.board.rows[row+1].cells[col].style.background == ''){
                         rowBlank = row + 1;
                         colBlank = col;
                         reachable = true;
                         //window.status +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
                         }
                         else if(row-1>=0 && PicGame.board.rows[row-1].cells[col].style.background == ''){
                         rowBlank = row - 1;
                         colBlank = col;
                         reachable = true;
                         //window.status +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
                         }
                         else if(col+1<PicGame.y && PicGame.board.rows[row].cells[col+1].style.background == ''){
                         rowBlank = row;
                         colBlank = col + 1;
                         reachable = true;
                         //window.status +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
                         }
                         else if(col-1>=0 && PicGame.board.rows[row].cells[col-1].style.background == ''){
                         rowBlank = row;
                         colBlank = col - 1;
                         reachable = true;
                         //window.status +=" reachable! rowBlank: " + rowBlank + " colBlank:" + colBlank;
                         }
                         else{
                         //window.status +=" unreachable!";
                         reachable = false;
                         }
                         //如果可移動(dòng)，則把當(dāng)前方塊和空白方塊交換
                         if(reachable){
                         var tmpBlankNode = PicGame.board.rows[rowBlank].cells[colBlank].cloneNode(true);
                         //需要注意的是克隆對象丟失了onclick方法，所以要補(bǔ)上
                         tmpBlankNode.onclick = arguments.callee;
                         var tmpCurrNode = PicGame.board.rows[row].cells[col].cloneNode(true);
                         tmpCurrNode.onclick = arguments.callee;
                         PicGame.board.rows[rowBlank].cells[colBlank].parentNode.replaceChild(tmpCurrNode,PicGame.board.rows[rowBlank].cells[colBlank]);
                         PicGame.board.rows[row].cells[col].parentNode.replaceChild(tmpBlankNode, PicGame.board.rows[row].cells[col]);
                         }
                         }
                     }
            }
    };
PicGame.init();
$('start').onclick = function(){
        PicGame.init();
}
</script>

相關(guān)文章

  • javascript inneHTML的地雷

    javascript inneHTML的地雷

    大家都喜歡用innerHTML添加內(nèi)容，但是innerHTML這東西在兩大陣營中有許多不同。
    2010-02-02
  • JavaScript判斷瀏覽器版本的方法

    JavaScript判斷瀏覽器版本的方法

    這篇文章主要介紹了JavaScript判斷瀏覽器版本的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2019-11-11
  • 解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法

    解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法

    今天小編就為大家分享一篇解決Layui選擇全部,換頁checkbox復(fù)選框重新勾選的問題方法，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-08-08
  • JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼

    JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼

    這篇文章主要介紹了JavaScript輸入郵箱自動(dòng)提示實(shí)例代碼，有需要的朋友可以參考一下
    2014-01-01
  • 使用JavaScript制作待辦事項(xiàng)列表的示例代碼

    使用JavaScript制作待辦事項(xiàng)列表的示例代碼

    這篇文章主要介紹了如何使用 JavaScript創(chuàng)建待辦事項(xiàng)列表HTML的完整信息和教程，文中但是示例代碼講解詳細(xì)，感興趣的同學(xué)可以動(dòng)手試一試
    2022-01-01
  • table insertRow、deleteRow定義和用法總結(jié)

    table insertRow、deleteRow定義和用法總結(jié)

    這篇文章主要對table insertRow、deleteRow定義和用法做下總結(jié),需要的朋友可以參考下
    2014-05-05
  • JavaScript實(shí)現(xiàn)下拉菜單的顯示隱藏

    JavaScript實(shí)現(xiàn)下拉菜單的顯示隱藏

    這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)下拉菜單的顯示隱藏，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
    2021-09-09
  • js中window.location.href的用法大全

    js中window.location.href的用法大全

    window.location.href是前端開發(fā)中一個(gè)非常重要且常用的屬性,它為我們提供了獲取和操作頁面URL的便捷手段,本文主要介紹了js中window.location.href的用法大全,感興趣的可以
    2023-12-12

    • 最新評論