Hot!Ajax

数字拼图游戏（jquery应用）

Friday, 21 September 2007

这是一个基于浏览器的数字拼图游戏。你可以花些时间研究怎样利用jquery库创建javascript应用程序。这个小游戏由游戏数据及UI组成，它仅仅包含26行的代码及jquery库。

预览：

点击小方块移动。

游戏代码：

 <style type="text/css">

#game15   {

width: 255px; height: 290px; border: 1px solid   gray;

}

#game15-controls {

margin: 10px;

height:   25px;

}

<!--本文转载自http://www.hotajax.org -->
#game15-field {

width: 240px;

height: 240px;

margin: 10px   0px 10px 10px;

}

.game-cell {

width: 55px;

height: 55px;

border:   1px solid gray;

text-align: center;

line-height: 55px;

color:   #aaa;

font-family: arial;

font-weight: bold;

font-size:   30px;

background: white;

position: absolute;

overflow:   hidden;

}

</style>

<script   type="text/javascript">

jQuery(function () {

// Game model   object

var field = new (function () {

this.moves = 0;

this.cells = [   [0,0,0,0], [0,0,0,0], [0,0,0,0], [0,0,0,0] ];

this.isFree = function (row,   col) {

return -1 < col && 4 > col && -1 < row   && 4 > row && 16 ==   this.cells[row][col];

};

this.isSolved = function () {

for (var i = 15;   i > -1; i--) {

if ((i + 1) != this.cells[(i - (i % 4)) / 4][i % 4])   {

return false;

}

}

return true;

};

this.move = function (p)   {

var d = [[-1, 0], [1, 0], [0, -1], [0, 1]];

if (16 !=   this.cells[p.row][p.col]) {

for (var k in d) {

if (this.isFree(p.row +   d[k][1], p.col + d[k][0])) {

this.cells[p.row + d[k][1]][p.col + d[k][0]] =   this.cells[p.row][p.col];

this.cells[p.row][p.col] = 16;

p.col +=   d[k][0];

p.row += d[k][1];

return ++this.moves;

}

}

}

return   false;

};

this.reset = function () {

var i = 16, values = [0, 1, 2, 3,   4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15];

while (i--) {

this.cells[(i -   (i % 4)) / 4][i % 4] = (1

+ parseInt(values.splice(Math.floor(Math.random() *   values.length), 1)));

}

this.moves = 0;

<!--本文转载自http://www.hotajax.org -->
};

})();

// View with   jQuery

var lock = false;

$('#shuffle').click(function () {

if (lock)   return;

field.reset();

$('#moves').html('0');

$('#game15-field').empty();

for   (var col = 0; col < 4; col++) {

for (var row = 0; row < 4; row++)   {

!field.isFree(row, col) &&   ($('#game15-field').get(0).appendChild(

$("<div class='game-cell'>" +   field.cells[row][col] + "</div>")

.css({ 'left' : col * 60 + 10, 'top'   : row * 60 + 45})

.click(function () {

if (!lock &&   field.move(this._p)) {

lock = true;

$('#moves').html('' +   field.moves);

$(this).animate(

{'left' : this._p.col * 60 + 10, 'top' :   this._p.row * 60 + 45},

300, '', function () {

field.isSolved() &&   alert('You win!');

lock = false;

});

}

}).get(0))._p = {'row': row,   'col': col});

}

}

}).click();

});

</script>

<div   id="game15">

<div id="game15-controls">

<button   id="shuffle">Shuffle</button>&nbsp;&nbsp;Moves: <span   id="moves"></span>&nbsp;&nbsp;<a   href="
http://www.alexatnet.com/node/68">Alex @   Net</a>

</div>

<div   id="game15-field"></div>

</div>

如果你喜欢这个游戏你可以通过以下代码将它加入到你的网站

<p><iframe frameborder="0" style="width:   280px; height: 300px;" </p>
<p>src="
http://www.hotajax.org/download/jquery/Fifteen puzzle.htm"></iframe></p>

转载自http://www.alexatnet.com/files/n68.Game.html

Set as favorite

Bookmark

Email This

Comments (1) add comment