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)載請(qǐng)注明來(lái)自<a >http://blog.csdn.net/sunxing007</a><br>
<input type="text" id="lines" value='3'/>行<input type="text" id="cols" value='3'/>列 <button id="start"> 開(kāi) 始 </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)載請(qǐng)注明來(lái)自<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)載請(qǐng)注明來(lái)自http://blog.csdn.net/sunxing007
**************************************************/
var PicGame = {
//行數(shù)
x: 3,
//列數(shù)
y: 3,
//圖片源
img: $('img'),
//單元格高度
cellHeight: 0,
//單元格寬度
cellWidth: 0,
//本游戲最主要的對(duì)象：表格，每個(gè)td對(duì)應(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');
//對(duì)每個(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è)單元格的背景圖的位置，使他們看起來(lái)像一幅圖像
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)擊對(duì)象的坐標(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);
//需要注意的是克隆對(duì)象丟失了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>
您可能感興趣的文章:- JS快速實(shí)現(xiàn)移動(dòng)端拼圖游戲
- js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
- JS實(shí)現(xiàn)拼圖游戲
- jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
- 基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
- 基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
- 利用原生的JavaScript實(shí)現(xiàn)簡(jiǎn)單拼圖游戲
- javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
- 基于JS實(shí)現(xiàn)簡(jiǎn)單滑塊拼圖游戲
- 使用js編寫(xiě)實(shí)現(xiàn)拼圖游戲
相關(guān)文章
-
javascript實(shí)現(xiàn)div的顯示和隱藏的小例子
這篇文章介紹了在JS中實(shí)現(xiàn)DIV顯示和隱藏的實(shí)例，需要的朋友可以參考一下 2013-06-06
-
這篇文章主要為大家詳細(xì)介紹了通過(guò)JS調(diào)用某段SQL語(yǔ)句的相關(guān)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下 2016-10-10
-
jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)
JSONP原理就是動(dòng)態(tài)插入帶有跨域url的script標(biāo)簽,然后調(diào)用回調(diào)函數(shù),把我們需要的json數(shù)據(jù)作為參數(shù)傳入,通過(guò)一些邏輯把數(shù)據(jù)顯示在頁(yè)面上,這篇文章主要給大家介紹了關(guān)于jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)的相關(guān)資料,需要的朋友可以參考下 2022-01-01
-
JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript裝飾者模式的原理、定義及應(yīng)用方法,需要的朋友可以參考下 2018-07-07
-
js不同客戶(hù)端顯示不同廣告(pc端+移動(dòng)端+微信端)
這篇文章主要介紹了js不同客戶(hù)端顯示不同廣告(pc端+移動(dòng)端+微信端),比較適合自適應(yīng)網(wǎng)站的廣告，需要的朋友可以參考下 2023-02-02
-
這篇文章主要介紹了javascript框架設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下 2021-09-09
-
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下 2016-03-03
-
這篇文章主要介紹了JavaScript AOP編程,實(shí)例分析了javascript實(shí)現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下 2015-06-06
-
現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語(yǔ)句將無(wú)法注入~~感覺(jué)這樣的防注入系統(tǒng)不錯(cuò)，但防注入系統(tǒng)沒(méi)有注意到 Cookies 的問(wèn)題！所以就有了Cookies注入~~ 2009-04-04
-
腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦
[紅色]腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦... 2007-04-04
最新評(píng)論
復(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)載請(qǐng)注明來(lái)自<a >http://blog.csdn.net/sunxing007</a><br>
<input type="text" id="lines" value='3'/>行<input type="text" id="cols" value='3'/>列 <button id="start"> 開(kāi) 始 </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)載請(qǐng)注明來(lái)自<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)載請(qǐng)注明來(lái)自http://blog.csdn.net/sunxing007
**************************************************/
var PicGame = {
//行數(shù)
x: 3,
//列數(shù)
y: 3,
//圖片源
img: $('img'),
//單元格高度
cellHeight: 0,
//單元格寬度
cellWidth: 0,
//本游戲最主要的對(duì)象：表格，每個(gè)td對(duì)應(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');
//對(duì)每個(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è)單元格的背景圖的位置，使他們看起來(lái)像一幅圖像
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)擊對(duì)象的坐標(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);
//需要注意的是克隆對(duì)象丟失了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>
您可能感興趣的文章:
- JS快速實(shí)現(xiàn)移動(dòng)端拼圖游戲
- js+html5實(shí)現(xiàn)可在手機(jī)上玩的拼圖游戲
- JS實(shí)現(xiàn)拼圖游戲
- jQuery+vue.js實(shí)現(xiàn)的九宮格拼圖游戲完整實(shí)例【附源碼下載】
- 基于javascript制作經(jīng)典傳統(tǒng)的拼圖游戲
- 基于Vue.js實(shí)現(xiàn)數(shù)字拼圖游戲
- 利用原生的JavaScript實(shí)現(xiàn)簡(jiǎn)單拼圖游戲
- javascript結(jié)合Flexbox簡(jiǎn)單實(shí)現(xiàn)滑動(dòng)拼圖游戲
- 基于JS實(shí)現(xiàn)簡(jiǎn)單滑塊拼圖游戲
- 使用js編寫(xiě)實(shí)現(xiàn)拼圖游戲
相關(guān)文章
-
javascript實(shí)現(xiàn)div的顯示和隱藏的小例子
這篇文章介紹了在JS中實(shí)現(xiàn)DIV顯示和隱藏的實(shí)例，需要的朋友可以參考一下2013-06-06 - 這篇文章主要為大家詳細(xì)介紹了通過(guò)JS調(diào)用某段SQL語(yǔ)句的相關(guān)方法,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
-
jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)
JSONP原理就是動(dòng)態(tài)插入帶有跨域url的script標(biāo)簽,然后調(diào)用回調(diào)函數(shù),把我們需要的json數(shù)據(jù)作為參數(shù)傳入,通過(guò)一些邏輯把數(shù)據(jù)顯示在頁(yè)面上,這篇文章主要給大家介紹了關(guān)于jsonp的簡(jiǎn)單介紹以及其安全風(fēng)險(xiǎn)的相關(guān)資料,需要的朋友可以參考下2022-01-01 -
JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用示例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之裝飾者模式定義與應(yīng)用,結(jié)合實(shí)例形式分析了JavaScript裝飾者模式的原理、定義及應(yīng)用方法,需要的朋友可以參考下2018-07-07 -
js不同客戶(hù)端顯示不同廣告(pc端+移動(dòng)端+微信端)
這篇文章主要介紹了js不同客戶(hù)端顯示不同廣告(pc端+移動(dòng)端+微信端),比較適合自適應(yīng)網(wǎng)站的廣告，需要的朋友可以參考下2023-02-02 - 這篇文章主要介紹了javascript框架設(shè)計(jì)模式,結(jié)合實(shí)例形式分析了javascript模板方法模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下2021-09-09
-
javascript實(shí)現(xiàn)數(shù)字倒計(jì)時(shí)特效
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁(yè)倒計(jì)時(shí)數(shù)字時(shí)鐘效果，是一款非常實(shí)用的javascript倒計(jì)時(shí)特效,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-03-03 - 這篇文章主要介紹了JavaScript AOP編程,實(shí)例分析了javascript實(shí)現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下2015-06-06
- 現(xiàn)在很多網(wǎng)站都加了防注入系統(tǒng)代碼，你輸入注入語(yǔ)句將無(wú)法注入~~感覺(jué)這樣的防注入系統(tǒng)不錯(cuò)，但防注入系統(tǒng)沒(méi)有注意到 Cookies 的問(wèn)題！所以就有了Cookies注入~~2009-04-04
-
腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦
[紅色]腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦...2007-04-04