Web前端项目-拼图游戏【附源码】

拼图游戏

拼图游戏是一种经典的益智游戏，通过HTML、CSS和JavaScript等前端技术的综合运用来实现；拼图游戏可以锻炼玩家的观察能力、空间认知能力和逻辑思维能力。游戏开始时，一张图片会被切割成多个小块，并以随机顺序排列在游戏区域内。玩家需要通过点击并拖拽小块来移动它们的位置，以恢复原始图片

运行效果：

一：`index.html`

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>拼图</title>
<link type="text/css" rel="stylesheet" href="css/mgame2.css" />
<script src="js/jquery.js"></script>
<script src="js/mgame2.js"></script>
</head><body>
<div class="cover"><div class="cover_bg"></div><div class="cover_inner"><p style="margin-bottom: 10px;"><button class="startGame">开始游戏</button></p><p class="choice-level"><select><option value="3">简单</option><option value="4">中等难度</option><option value="5">高难</option><option value="6">令人发疯的</option><option value="7">使人癫狂的</option></select></p></div>
</div>
<div class="piece_container" points="1">
</div>
<div class="rule-description"><p>在10秒内完成拼图会有奖励的哦</p><p>移动<span class="over-step">0</span>步</p><p>用时<span class="over-time">0</span>秒</p><p><button>恢复</button></p>
</div>
</body>
</html>

二：`mgame2.css`

@charset "utf-8";
* {margin: 0;padding: 0;
}body {font-family: "微软雅黑", "宋体", "黑体";font-size: 13px;
}.piece_container {width: 320px;height: 310px;margin: auto;text-align: center;overflow: hidden;
}
.piece_container div {float: left;margin: 1px;
}.cover {position: relative;z-index: 998;
}.cover_bg {position: absolute;width: 100%;opacity: 0.7;z-index: 999;background: #000;
}
.cover_inner {position: absolute;z-index: 1000;
}.rule-description {text-align: center;
}
.rule-description .over-time {color: red;
}
.rule-description p {text-align: center;margin: auto;
}
.rule-description .over-step {color: green;
}

三：`mgame2.js`

var points = 1,timeCount = 0,//设置起始游戏时间timer = null,stepCount = 0,level = 3;//规定拼图的方块数3*3或者4*4
var puzzleGame = function(){var square,sort=0;for(var i = 0; i < level; i++){for(var j = 0; j < level; j++){square = document.createElement("div");$(square).css({"width": 300/level,"height": 300/level,"background": "url(img/1.gif) no-repeat","backgroundPosition": -j*300/level +"px "+(-i)*300/level + "px"})sort++;$(square).attr({"sort": sort//给各个小方格加上正确的顺序})$(".piece_container").append(square);}}init();
}
init = function(){var pageLeft = 0,pageTop = 0,getStartX = 0,getStartY = 0,floatLayer = "",getSort = "",getBkP="",nextCheck = "<button class='nextcheck'>下一关</button>",playAgain = "<button class='playagain'>再来一次</button>";//按下方格触发方法$("div[sort]").on("touchstart mousedown",function(e){e.preventDefault();if(floatLayer != ""){floatLayer.remove();}var getEvent = window.event || arguments.callee.caller.arguments[0];//获取触发事件的元素thisE = getEvent.target;//获取鼠标按下时的方格if(getEvent.changedTouches){//手机情况下if(getEvent.changedTouches.length == 1){var thisElement = getEvent.target;getSort = $(thisElement).attr("sort");//获取触摸时的元素的sortgetBkP = $(thisElement).css("backgroundPosition");var getBkImg = $(thisElement).css("backgroundImage");var getPoints = parseInt($(thisElement).parents(".piece_container").attr("points"));floatLayer = $(document.createElement("div")).attr({"sort": getSort}).css({"backgroundPosition":getBkP, "backgroundImage": getBkImg, "position": "fixed", "width": 300/level,"height": 300/level});//创建浮层并加上样式//取得手指相对于文档的边距getStartX = getEvent.changedTouches[0].pageX;getStartY =  getEvent.changedTouches[0].pageY;pageLeft = $(thisElement).offset().left;pageTop = $(thisElement).offset().top;floatLayer.css({top: pageTop+1, left: pageLeft+1});floatLayer.appendTo("body");}}else {//电脑情况下var thisElement = getEvent.target;getSort = $(thisElement).attr("sort");//获取点击时的元素的sortgetBkP = $(thisElement).css("backgroundPosition");var getBkImg = $(thisElement).css("backgroundImage");var getPoints = parseInt($(thisElement).parents(".piece_container").attr("points"));floatLayer = $(document.createElement("div")).attr({"sort": getSort}).css({"backgroundPosition":getBkP, "backgroundImage": getBkImg, "position": "fixed", "width": 300/level,"height": 300/level});//创建浮层并加上样式//取得手指相对于文档的边距getStartX = getEvent.pageX;getStartY =  getEvent.pageY;pageLeft = $(thisElement).offset().left;pageTop = $(thisElement).offset().top;floatLayer.css({top: pageTop+1, left: pageLeft+1});floatLayer.appendTo("body");}return true;})//移动手指或鼠标触发事件$(document).on("touchmove mousemove",function(e){e.preventDefault();//获取触发touchmove的对象var getEvent = window.event || arguments.callee.caller.arguments[0];if(getEvent.changedTouches){if(getEvent.changedTouches.length == 1){//确保只有一个手指//获取手指的位置var getCurrentX = getEvent.changedTouches[0].pageX;var getCurrentY = getEvent.changedTouches[0].pageY;}}else{//获取鼠标的位置var getCurrentX = getEvent.pageX;var getCurrentY = getEvent.pageY;}if(floatLayer){floatLayer.css({top: getCurrentY - (getStartY - pageTop), left: getCurrentX - (getStartX - pageLeft)});//决定图层的样式}})//手指离开触发事件$(document).on("touchend mouseup",function(e){e.preventDefault();var getEvent = window.event || arguments.callee.caller.arguments[0];//获取触发事件的元素if(floatLayer){//取得浮层的位置var getLayerX = floatLayer.offset().left;var getLayerY = floatLayer.offset().top;var layerValX = parseInt(getLayerX);var layerValY = parseInt(getLayerY);var layerCenterX = layerValX + floatLayer.width()/2;var layerCenterY = layerValY + floatLayer.height()/2;floatLayer.remove();//删除浮层var piece = $("div[sort]");for(var i=0; i<piece.length; i++){//取得每一个小方格的位置var getPieceX = $(piece[i]).offset().left;var getPieceY = $(piece[i]).offset().top;var pieceValX = parseInt(getPieceX);var pieceValY = parseInt(getPieceY);var pieceEndX = pieceValX+$(thisE).width();var pieceEndY = pieceValY+$(thisE).height();if(stepCount <= 40){//限制最多移动的步数if((pieceValX < layerCenterX && pieceValY < layerCenterY) && (pieceEndX > layerCenterX && pieceEndY > layerCenterY)){var getEndSort = $(piece[i]).attr("sort");//手指或鼠标松开时所在的方格var getEndBkP = $(piece[i]).css("backgroundPosition");if(getEndSort != getSort){//确定把浮层移动到了另外一个方格stepCount++;$(thisE).attr("sort",getEndSort).css("backgroundPosition",getEndBkP);$(piece[i]).attr("sort",getSort).css("backgroundPosition",getBkP);$(".over-step").text(stepCount);}}}else{$("p.choice-level").remove();//移除选择关卡$(".cover").find("button").remove();$(".cover .cover_inner").prepend(playAgain);$(".cover").show().css("opacity",1);alert("真笨！都N步了，还弄不完？？？");clearInterval(timer);break;}}pageLeft = 0;pageTop = 0;getStartX = 0;getStartY = 0;floatLayer = "";getSort = "";getBkP = "";for(var i=0; i < piece.length; i++){//如果排序正确，继续往下执行！否则返回var getSortVal = parseInt($(piece[i]).attr("sort"));var number = i+1;if(getSortVal == number){continue;}else{return;}}if(timeCount <= 70){alert("♡♡♡♡♡♡大神！用时" + $(".rule-description .over-time").text() +"秒 "+"♡♡♡♡♡♡！我好崇拜你啊！");$(".cover").find("button.startGame").text("再来一次");$(".cover_inner button.startGame").remove();//移除开始游戏按钮$("p.choice-level").remove();//移除选择关卡//下一关if($(".nextcheck").length == 0){//如果没有下一关按钮，就加上一个$(".cover .cover_inner").prepend(nextCheck);}if($(".playagain").length == 0){$(".cover .cover_inner").prepend(playAgain);}$(".cover_inner button.playagain").one("touchstart click", function(){//再来一次timeCount = 0;stepCount = 0;$(".rule-description .over-time").text(timeCount);$(".rule-description .over-step").text(stepCount);$(this).parents(".cover").animate({"opacity": 0},2000,function(){$(this).hide();});setTimeout(upsetPiece, 2000);})if(!$._data($(".cover_inner button.nextcheck")[0], "events")){//判断是否绑定了事件，如果绑定了，就不再继续绑定$(".cover_inner button.nextcheck").one("touchstart click", function(){if(points == 10){//设定通关的关数alert("你已经通关了。这个世界已经没有什么可以阻止你了！去做任何你想做的事情吧！");return;}$(this).parents(".cover").animate({"opacity": 0},2000,function(){$(this).hide()});points++;timeCount = 0;stepCount = 0;$(".rule-description .over-time").text(timeCount);$(".rule-description .over-step").text(stepCount);$(".piece_container").attr("points", points);$(".piece_container div[sort]").css("backgroundImage","url(img/" + points + ".gif)");//去掉上一关卡的样式，加上本关卡的样式var cover2 = "<div id='white-cover' style='width: 100%; height: 100%; position: fixed; top: 0; left: 0; text-align: center'><h1 style='margin-top: 120px; opacity: 0.6; background: #fff; padding: 8px;'>请记住这张图，点击屏幕任意位置开始游戏</h1></div>"$("body").append(cover2);$("#white-cover").on("touchstart click", function(){$(this).remove();upsetPiece();})$(this).off("touchstart click");//解除点击事件，防止冒泡})}$(".cover").show().css("opacity",1);}else{//时间过长则不能进入下一关alert("用这么长时间？太慢了！！等得我花都谢了！");$("p.choice-level").remove();$(".cover").find("button").remove();$(".cover .cover_inner").prepend(playAgain);$(".cover").show().css("opacity",1);}clearInterval(timer);}else{return;}})
}//创建一个没有重复数字的随机数组，并打乱方格的顺序
function upsetPiece(){if(timeCount >= 0){timer = setInterval(setTime,1000);}var pieceArr = $(".piece_container div[sort]"),randomArr = [],//创建一个随机数数组bkPArr = [];//创建一个数组，用来存储每个方格背景的定位！//取得每个方格的背景元素的定位for(var i=0; i< pieceArr.length; i++){bkPArr.push($(pieceArr[i]).css("backgroundPosition"));}for(var i=0; i< pieceArr.length; i++){var random = Math.floor(Math.random()*(level*level+1));if(random != 0){if(randomArr.length == 0){randomArr.push(random);}else{var la = 0;for(var j=0; j < randomArr.length; j++){if(randomArr[j] == random){i--;break;}la++;}if(la == randomArr.length){randomArr.push(random);}}}else{i--;continue;}}//打乱方格的顺序for(var i=0; i<randomArr.length; i++){$(pieceArr[i]).css("backgroundPosition",bkPArr[parseInt(randomArr[i])-1]);$(pieceArr[i]).attr("sort",randomArr[i]);}
}//倒计时方法
function setTime(){timeCount++;$(".rule-description .over-time").text(timeCount);
}$(document).ready(function(){$(".cover_bg").css("height",$(document).height());//黑色背景高度$(".cover_inner").css({//将按钮放在屏幕中央"left": $(document).width()/2 - $(".cover_inner").width()/2,"top": $(document).height()/2 - $(".cover_inner").height()/2});//点击 开始按钮$(".cover_inner button.startGame").on("touchstart click", function(e){level = $(".choice-level").find("option:selected").val();puzzleGame();clearInterval(timer);$(this).parents(".cover").animate({"opacity": 0},2000,function(){$(this).hide();});var cover2 = "<div id='white-cover' style='width: 100%; height: 100%; position: fixed; top: 0; left: 0; text-align: center'><h1 style='margin-top: 120px; opacity: 0.5; background: #fff; padding: 8px;'>请记住这张图，点击屏幕任意位置开始游戏</h1></div>"$("body").append(cover2);$("#white-cover").on("touchstart click", function(){$(this).remove();upsetPiece();})})//恢复按钮$(".rule-description button").on("touchstart click",function(){clearInterval(timer);upsetPiece();timeCount = 0;stepCount = 0;$(".rule-description .over-time").text(timeCount);$(".rule-description .over-step").text(stepCount);})
})