学习坐标【javascript】拼图小游戏 -java教程

发一下牢骚和主题无关：

兴致才是学习的力动源泉。始终欢喜游戏类的编程，因为得觉好玩。。。

周末这2天预备写个拼图的小游戏，只为学习面向对象，虽然对面向对象里的很多西东还不太熟悉。

昨天（星期六）开始写了面界，写着写着，感到困了就睡觉去了^ ^,明天早上起来把它完成了，顺便在博客里记载下来，下次不懒的时候，再加点动画效果。

上面是HTML分部，用了一个bg.jpg的图片。

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title></title>
<style type="text/css">
*{margin:0;padding:0;}
#box{width:480px;height:480px;border:5px solid #ccc;position:relative;margin:20px auto 0;}
#box div{background:url(bg.jpg) no-repeat;width:158px;height:158px;border:1px dashed #fafafa;position:absolute;}
#box .on{width:158px;height:158px;border:1px solid #ff0;}
#box img{position:absolute;top:0;left:0;width:480px;height:480px;display:none;}
#box span{position:absolute;top:420px;left:490px;background:#ccc;width:60px;height:30px;color:#000;line-height:30px;text-align:center;cursor:pointer;}
</style>
</head>
<body>
<div id="box"><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><img src="bg.jpg" alt="" /><span>view</span>
</div>
<script type="text/javascript" src="effect.js"></script>
</body>
</html>

每日一道理
如果你们是蓝天，我愿做衬托的白云；如果你们是鲜花，我愿做陪伴的小草；如果你们是大树，我愿做点缀的绿叶……我真诚地希望我能成为你生活中一个欢乐的音符，为你的每一分钟带去祝福。

上面是现实功能的Javascript码代

/**************
Author:Jason Yu
Date:2012-11-24
**************/
var oBox = document.getElementById("box");
var aBoxDiv = oBox.getElementsByTagName("div");
var oBoxSpan = oBox.getElementsByTagName("span")[0];
var oBoxImg = oBox.getElementsByTagName("img")[0];
var iBoxDivSize = 160;
var iStatic = true;
var arr = [];  //div坐标
var arr2 = [];   //背景坐标
var arrBox1=null;
var arrBox2=null;
var len = aBoxDiv.length;function Box(){}
Box.prototype = {reset:function(){arr = [];  arr2 = [];  len = aBoxDiv.length;for(var i=0; i<3; i++){for(var j=0; j<3; j++){arr.push([iBoxDivSize*i,iBoxDivSize*j]);arr2.push([iBoxDivSize*i,iBoxDivSize*j]);}}for(var i=0, l=aBoxDiv.length; i<l; i++){var a = Math.floor(Math.random()*len);aBoxDiv[i].style.left = arr[a][0] + "px";aBoxDiv[i].style.top = arr[a][1] + "px";aBoxDiv[i].style.backgroundPosition= "-" + (arr2[i][0]+1) + "px" + " " + "-" + (arr2[i][1]+1) + "px"; arr.splice(a,1);len--;var that = this;aBoxDiv[i].index = i;aBoxDiv[i].onclick = function(){that.move(this);}}},move:function(obj){for(var j=0, l=aBoxDiv.length; j<l; j++){aBoxDiv[j].className = "";}if(iStatic){obj.className = "on";arrBox1 = [parseInt(obj.style.left), parseInt(obj.style.top), obj.index];}else{arrBox2 = [parseInt(obj.style.left), parseInt(obj.style.top), obj.index];if(arrBox1[0]-arrBox2[0]==0 && Math.abs(arrBox1[1]-arrBox2[1])==iBoxDivSize){aBoxDiv[arrBox1[2]].style.top = arrBox2[1]+"px";aBoxDiv[arrBox2[2]].style.top = arrBox1[1]+"px";}else if(arrBox1[1]-arrBox2[1]==0 && Math.abs(arrBox1[0]-arrBox2[0])==iBoxDivSize){aBoxDiv[arrBox1[2]].style.left = arrBox2[0]+"px";aBoxDiv[arrBox2[2]].style.left = arrBox1[0]+"px";}}iStatic = !iStatic;this.judge();},judge:function(){var iCan = false;for(var i=0, l=aBoxDiv.length; i<l; i++){if(parseInt(aBoxDiv[i].style.left)==arr2[i][0] && parseInt(aBoxDiv[i].style.top)==arr2[i][1]){iCan = true;}else{iCan = false;break;}}if(iCan){if(confirm("喜恭您拼图胜利！重来？")){this.reset();}}},viewimg:function(){oBoxImg.style.display = "block";},hideimg:function(){oBoxImg.style.display = "none";}
}
var iBox = new Box();
iBox.reset();
oBoxSpan.onmousedown = function(){iBox.viewimg();}
oBoxSpan.onmouseup = function(){iBox.hideimg();}