脑残拼图游戏程序代码
近来在温故《javascript高级程序设计》这本好书，新生一点感触：如果说jquery是一个美丽的地方，而原生语言是我的朴实的故乡的话，我真是离开故乡好远了！回到故乡了么总得做点事吧，于是写了一个简单的用原生程序写的拼图游戏。不怎么考虑DOM性能问题。
<div class="gameWrap"> <div class="header"> <div class="begin">开始拼图</div> </div> <div class="body"> <div class="sample"><img src="images/dog&cat.jpg"></div> <div class="gameBody" id="container"> <div class="dogcat_1"></div> <div class="dogcat_2"></div> <div class="dogcat_3"></div> <div class="dogcat_4"></div> <div class="dogcat_5"></div> <div class="dogcat_6"></div> <div class="dogcat_7"></div> <div class="dogcat_8"></div> <div class="dogcat_9"></div> <div class="dogcat_10"></div> <div class="dogcat_11"></div> <div class="dogcat_12"></div> <div class="dogcat_13"></div> <div class="dogcat_14"></div> <div class="dogcat_15"></div> </div> </div> </div>
.gameWrap{ margin:0 auto; } .begin{ width:150px; height:30px; background:#f27b04; text-align:center; line-height:30px; color:#fff; margin:10px auto; } .sample{ width:300px; height:169px; float:left; margin-right:10px; } .sample img{ width:300px; height:169px; } .gameBody{ width:900px; float:left; position:relative; border:1px solid red; } .gameBody div{ width:180px; height:169px; float:left; } .gameBody div img{ width:180px; height:169px; } /*各个图片背景*/ .dogcat_1{ background:url('images/dog&cat_01.png'); } .dogcat_2{ background:url('images/dog&cat_02.png'); } .dogcat_3{ background:url('images/dog&cat_03.png'); } .dogcat_4{ background:url('images/dog&cat_04.png'); } .dogcat_5{ background:url('images/dog&cat_05.png'); } .dogcat_6{ background:url('images/dog&cat_06.png'); } .dogcat_7{ background:url('images/dog&cat_07.png'); } .dogcat_8{ background:url('images/dog&cat_08.png'); } .dogcat_9{ background:url('images/dog&cat_09.png'); } .dogcat_10{ background:url('images/dog&cat_10.png'); } .dogcat_11{ background:url('images/dog&cat_11.png'); } .dogcat_12{ background:url('images/dog&cat_12.png'); } .dogcat_13{ background:url('images/dog&cat_13.png'); } .dogcat_14{ background:url('images/dog&cat_14.png'); } .dogcat_15{ background:url('images/dog&cat_15.png'); }
document.querySelectorAll( '.begin' )[0].onclick = function() {
//一个空数组，你要拼图，那你是不是得把很多张图片都打乱的呀，我这边有15张图片，于是我需要一个包含15个1-15的随机数的数组
var indexArray = [];
(function() {
//不到15个随机数组誓不罢休 ，while就做到了
while( indexArray.length < 15 ) {
//随机产生1-15的一个数
v = Math.floor( Math.random() * 15 + 1 );
//如果这个新数组里面不包含新产生的随机数，那就把新随机数放进数组里面
var ifRepeat = indexArray.every( function( item , index , array ) {
return v != item;
} );
if( ifRepeat ) {
indexArray.push( v );
}
}
})();
// 15张图片的DIV们
var $pictures = document.querySelectorAll( '.gameBody div' );
// contain是游戏主要界面div
var container = document.getElementById( 'container' );
// fromEle是你移动的那张图片，toEle是你想放上去的那张图片
var fromEle = null;
var var
toEle = null;
// 在以下这个for循环中，初始化了游戏界面，并绑定了一些事件
for( var i = 0 ; i < $pictures.length ; i ++ ) {
// 这里应用上了刚才产生随机数的数组
$pictures[i].className = "dogcat_" + indexArray[i];
// 当点击了图片的时候
$pictures[i].onmousedown = function( e ) {
fromEle = this;
// 复制当前这个dom元素，用它来移动，而被点击的元素停留在原来的位置
var clone = this.cloneNode( true );
container.appendChild( clone );
clone.setAttribute( 'moving' , 'true' );
clone.style.opacity = 0.8;
clone.style.position = "absolute";
// 让复制出来的元素停留在被点击元素的周围，用各种数据测了一下，400 和 100这个两个数字可用
clone.style.left = e.pageX - 400 + "px";
clone.style.top = e.pageY - 100 + "px";
clone.onmousemove = function( e ) {
if( this.getAttribute( 'moving' ) == 'true' ) {
// 每一个clone元素都在相对于#container这个div绝对定位的，container他自己就是大约距离顶部100，距离左边400的样子，所以e.pageX-400就相当于
// clone元素相对于#container元素的左边的距离，那么顶部也是一样的道理。对于简单的页面是这样的
clone.style.left = e.pageX - 400 + "px";
clone.style.top = e.pageY - 100 + "px";
// 在拖动图片的过程中，你得判断用户想把clone放在哪个目标图片上吧，建议你先自己想想看。我这边的实现呢是这样：获取鼠标相对于#contain的位置，然后遍历
// 获取每一个div相对于#container的位移，每一个div的宽度和高度分别是180px/169px，如果mouseX和mouseY的值分别大于div的X位移并且小于X+180，
// 再加上对Y位移的判断，可以认为鼠标在某一个div上面
var mouseX = e.pageX - container.offsetLeft;//鼠标距离container左边框的距离
var mouseY = e.pageY - container.offsetTop;//鼠标距离container顶边框的距离
for( var i = 0 ; i < $pictures.length ; i ++ ) {
var offLeft = $pictures[i].offsetLeft;
var offTop = $pictures[i].offsetTop;
if( mouseX > offLeft && mouseX < offLeft + 180 && mouseY > offTop && mouseY < offTop + 169 ) {
// 当找到目标元素的时候，给他加一个边框
$pictures[i].style.border = "6px solid #f27b04";
$pictures[i].style.width = "168px";
$pictures[i].style.height = "157px";
$pictures[i].setAttribute( "ifmovehere" , 'true' );
toEle = $pictures[i];
} else {
$pictures[i].style.border = "0px";
$pictures[i].style.width = "180px";
$pictures[i].style.height = "169px";
$pictures[i].title = "";
$pictures[i].setAttribute( "ifmovehere" , 'false' );
}
}
}
}
clone.onmousedown = function() {
this.setAttribute( 'moving' , 'true' );
}
clone.onmouseup = function() {
this.setAttribute( 'moving' , 'false' );
var fromEleClass = fromEle.className;
fromEle.className = toEle.className;
toEle.className = fromEleClass;
container.removeChild( clone );
toEle.style.border = "0px";
toEle.style.width = "180px";
toEle.style.height = "169px";
}
}
}
// 显示一个倒计时，不解释了
var leftTime = 60;
var inter = setInterval( function() {
document.querySelectorAll( '.begin' )[0].innerText = "剩余时间:" + leftTime + "秒";
leftTime --;
if( leftTime == 0 ) {
clearInterval( inter );
}
} , 1000 );
}
好了，一个简易的拼图游戏制作好了，因为简单也就不考虑dom性能问题了。bug有好几个，但主要的代码都在了。不知道你看到这里有没有想到一个很重要的问题：如何判断拼凑完成啊？呵呵，我没写，昨晚一粗心就落下了，但也刚好，可以给你一个完善的空间。有些也想写一个拼图游戏的童鞋可能对PS裁图很陌生，不知道如何制作15张大小一样的图片，我好人做到底再写一点怎么裁图的方法：
1.打开一张大图，放到ps里面。
2.找到切片工具，用切片工具把整张图片作为一个切片。
3.右击切片，你会看到一个 划分切片 的选项，点击进去以后，你会看到一个水平划分和垂直划分，你应该懂得如何填写数字了吧
4.填好数字以后按 ctrl shift alt s,也就是 存储为web和设备所用的格式。点完成就在你的桌面上生成一个包含很多张图片的文件夹了。
好，希望各位同仁们早日踏入大神之列！
