JS 拼图游戏 面向对象，注释完整。
在线演示 http://img.jb51.net/online/pintu/pintu.htm
代码如下:
<html>
<head>
<title>JS拼图游戏</title>
<style>
body{
font-size:9pt;
}
table{
border-collapse: collapse;
}
input{
width:20px;
}
</style>
</head>
<body>
JS原创作品：JS拼图游戏<br>
注释完整， 面向对象<br>
转载请注明来自<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a><br>
<input type="text" id="lines" value='3'/>行<input type="text" id="cols" value='3'/>列 <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>
转载请注明来自<a href="http://blog.csdn.net/sunxing007">http://blog.csdn.net/sunxing007</a><br>
</body>
</html>
<script>
//ie7以下默认不缓存背景图像，造成延迟和闪烁，修正此bug.
//（csdn网友wtcsy提供http://blog.csdn.net/wtcsy/）
try{
document.execCommand("BackgroundImageCache", false, true);
}catch(e){alert(e)};
//辅助函数
function $(id){return document.getElementById(id)};
/*************************************************
* js拼图游戏 v1.6
* 作者 sunxing007
* 转载请注明来自http://blog.csdn.net/sunxing007
**************************************************/
var PicGame = {
//行数
x: 3,
//列数
y: 3,
//图片源
img: $('img'),
//单元格高度
cellHeight: 0,
//单元格宽度
cellWidth: 0,
//本游戏最主要的对象：表格，每个td对应着一个可以移动的小格子
board: $('board'),
//初始函数
init: function(){
//确定拼图游戏的行数和列数
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);
}
//按照行数和列数重新构造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);
}
}
//计算单元格高度和宽度
this.cellHeight = this.img.height/this.x;
this.cellWidth = this.img.width/this.y;
//获取所有的td
var tds = this.board.getElementsByTagName('td');
//对每个td， 设置样式
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;
//这里最重要，计算每个单元格的背景图的位置，使他们看起来像一幅图像
tds[i].style.backgroundPositionX = -this.cellWidth * currCol;
tds[i].style.backgroundPositionY = -this.cellHeight * currLine;
}
/** begin: 打乱排序*******************/
/**
* 打乱排序的算法是这样的：比如我当前是3*3布局，
* 则我为每一个td产生一个目标位置，这些目标位置小于9且各不相同，
* 然后把它们替换到那个地方。
**/
//目标位置序列
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 = [];
//把每个td克隆， 然后依据目标位置序列index，替换到目标位置
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: 打乱排序*********************/
//为每个td添加onclick事件。
tds = this.board.getElementsByTagName('td');
for(var i=0; i<tds.length; i++){
tds[i].onclick = function(){
//被点击对象的坐标
var row = this.parentNode.rowIndex;
var col = this.cellIndex;
//window.status = "row:" + row + " col:" + col;
//空白方块的坐标
var rowBlank = 0;
var colBlank = 0;
//reachable表示当前被点击的方块是否可移动
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;
}
//如果可移动，则把当前方块和空白方块交换
if(reachable){
var tmpBlankNode = PicGame.board.rows[rowBlank].cells[colBlank].cloneNode(true);
//需要注意的是克隆对象丢失了onclick方法，所以要补上
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猜数字小游戏的简单实现代码
复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="
-
node.js适合游戏后台开发吗？
网站服务器和游戏服务器是怎么样联系到一起的? 1. 游戏分很多种,咱们先来看看MMORPG. 再怎么简单的RPG服务器都免不了处理多人交互的情形,上百人在同一个场景里面,每个客户端都需要收到其他所有人的操作信息. 其次,用户的操作是非常频繁的,一般的服务器倾向于持有长连接.而且这些链接的是频繁交互的,没有明显的持久的分区策略,所以限制了服务器的横向扩展,同一个场景往往只能放在一个物理机上面运行. 再次,端游通常是不敢把逻辑运算放客户端的,用户分分钟给你破解掉,改改金币,刷两件装备再常见不过了.所
-
纯JS实现五子棋游戏兼容各浏览器(附源码)
纯JS五子棋(各浏览器兼容) 效果图: 代码下载 HTML代码 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html;"> <title>五子棋</title> <link rel="stylesheet" type="text/
-
原生JavaScript实现连连看游戏(附源码)
向大家推荐一款原生JavaScript版连连看游戏,源码下载,首页如下图所示: 首先看一下html的布局方式在index.html文件中: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head>
-
JavaScript仿微信打飞机游戏
首先实现微信打飞机游戏,首先会有自己和敌机,采用canvas绘图来生成自己和敌人. 1.生成自己,且可以通过左右键来进行左右移动. //生成自己,且可以左右移动 //控制飞机向右移动的函数 function moveRight(event){ context.clearRect(aligh,100,47,47); //防止飞机移除背景外 if(aligh < 260){ var img = new Image(); img.src = "../images/self.png";
-
JavaScript 打地鼠游戏代码说明
演示地址:http://demo.jb51.net/js/mouse/index.html打包下载地址 http://www.jb51.net/jiaoben/32434.html这个是我无聊的时候写的,先看看效果(UI做得比较丑): 说明:红色的点击得分100,蓝色的点击扣分100. 只是想用js来写个小游戏,顺便练练js的代码. 先看html部分: html 复制代码 代码如下: <style> #panel{height:300px;width:300px;background:#cc
-
js实现大转盘抽奖游戏实例
本文实例讲述了js实现大转盘抽奖游戏.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea
-
JS写的贪吃蛇游戏(个人练习)
JS贪吃蛇游戏,个人练习之用,放在这备份一下, 复制代码 代码如下: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>JS贪吃蛇-练习</t
-
javascript 模拟坦克大战游戏(html5版)附源码下载
一.总结关键点和遇到的问题 1.javascript中的继承,最好父类只提供方法共享,属性写到各自子类中,避免父类和子类的构造函数混杂. 2.prototype模拟继承的代码,应写在所有方法定义之前,否则原型对象被改变,方法就变成了未定义,如: 复制代码 代码如下: Hero.prototype = new Tank (0, 0, 0); Hero.prototype.constructor = Hero; Hero.prototype.addLife = function(){ this.li
-
javascript 制作坦克大战游戏初步 图片与代码
学了一阵子的javascript,该做点东西,虽然东西还是东拼西凑,见笑.方向键控制坦克移动,回车键发射炸弹.其他的功能敌方坦克那些还没写. javascript坦克游戏初步|阿会楠练习作品 body{ background:black; } #tanke{ position:absolute; left:500px; top:200px; } var i = 0; var bombLeftArray = new Array(100);//存放炸弹信息x var bombTopArray = n