JS實現(xiàn)拼圖游戲
更新時間：2021年01月29日 10:46:12 作者：一頁北城’
這篇文章主要為大家詳細介紹了JS實現(xiàn)拼圖游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
使用JS制作了一款拼圖游戲供大家參考。
原理分析：
1.鼠標的點擊和松開事件
2.顯示原圖作為參考
3.方塊的移動替換
4.是否完成拼圖的判斷
5.完成之后會彈窗提示
效果演示
代碼展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>拼圖游戲</title>
</head>
<style>
body,
html {
padding: 0px;
margin: 0px;
background: #eee;
}
#fangkuai {
width: 460px;
height: 460px;
margin: 20px auto;
background: #F9F9F9;
padding: 1px 1px;
position: relative;
}
#maskBox {
opacity: 0.5;
display: block;
}
#tu img {
width: 120px;
height: 120px;
}
#tu {
width: 130px;
height: 130px;
margin-left: 150px;
}
</style>
<body>
<div style="width:460px;margin:20px auto;text-align:center;line-height:30px;">游戲玩法：點擊選中一個方塊，在點擊放在對應的方塊里。</div>
<div id="tu">
<font>參考原圖</font>
<img src="true.png" />
</div>
<div id="fangkuai"></div>
</body>
<script>
window.onload = function() {
//生成函數(shù)
gameInfo.init();
}
</script>
<script>
(function($g) {
//游戲配置
setting = {
gameConfig: {
url: "true.png",
id: "fangkuai",
//生成規(guī)格橫4 縱4
size: "4*4",
//每個元素的間隔
margin: 1,
//拖動時候塊透明度
opacity: 0.8
},
setElement: {
type: "div",
id: "",
float: "",
display: "",
margin: "",
background: "",
width: "",
height: "",
left: "",
top: "",
position: "",
opacity: 0.4,
animate: 0.8
}
};
//元素生成參數(shù)
var sg = setting.gameConfig;
var st = setting.setElement;
var gameInfo = function() {};
gameInfo.prototype = {
init: function() {
this.creatObj();
this.eventHand();
},
sortObj: {
rightlist: [], //正確的排序
romdlist: [] //打亂后的排序
},
creatObj: function() {
sg.boxObj = document.getElementById(sg.id) || "";
//尺寸自動獲取
var size = sg.size.split('*') || [0, 0];
//計算單個div的高寬
var w = Math.floor(sg.boxObj.offsetWidth / size[0]);
var h = Math.floor(sg.boxObj.offsetHeight / size[1]);
//圖片生成div
var size = sg.size.split('*') || [0, 0];
var wt = size[0],
hg = size[1];
var sortList = [];
for (var a = 0; a < wt * hg; a++) {
sortList.push(a);
}
sortList.sort(randomsort);
this.sortObj.rightlist = sortList;
var _i = 0,
sid = 0;
for (; _i < wt; _i++) {
var _s = 0;
for (; _s < hg; _s++) {
//賦值隨機打散后的id
st.id = sortList[sid++];
st.display = "block";
st.float = "left";
st.margin = sg.margin + "px";
st.background = "url('" + sg.url + "') " + (-w * _s) + "px " + (-h * _i) + "px";
st.width = w - sg.margin * (wt / 2) + "px";
st.height = h - sg.margin * (hg / 2) + "px";
this.sortObj.romdlist.push(this.addElement());
}
}
this.boxSort();
},
boxSort: function() {
var _arrySort = this.sortObj.romdlist;
var _tmp = [],
_n = 0;
eachBox(_arrySort, function(d) {
_tmp.push(parseInt(_arrySort[d].id));
});
_tmp.sort(function(a, b) {
return a > b ? 1 : -1;
});
for (; _n < _tmp.length; _n++) {
var _s = 0;
for (; _s < _arrySort.length; _s++) {
if (_arrySort[_s].id == _tmp[_n]) {
sg.boxObj.appendChild(_arrySort[_s]);
}
}
}
return _tmp;
},
addElement: function() {
var obj = document.createElement(st.type);
obj.id = st.id;
obj.style.display = st.display;
obj.style.float = st.float;
obj.style.margin = st.margin;
obj.style.background = st.background;
obj.style.width = st.width;
obj.style.position = st.position;
obj.style.top = st.top;
obj.style.left = st.left;
obj.style.height = st.height;
return obj;
},
mouseEvent: {
mousedown: function(ev) {
ev = ev || ev.event;
ev.preventDefault();
st.type = "span";
st.id = "maskBox";
st.width = this.offsetWidth + "px";
st.height = this.offsetHeight + "px";
st.position = "absolute";
st.background = "";
st.left = this.offsetLeft + "px";
st.top = this.offsetTop + "px";
},
mouseup: function(ev) {
ev = ev || ev.event;
ev.preventDefault();
var obj = document.getElementById(this.id);
if (obj) {
sg.boxObj.removeChild(obj);
}
},
mousemove: function(ev) {
ev = ev || ev.event;
this.style.left = getX_Y.call(this, "x", ev) + "px";
this.style.top = getX_Y.call(this, "y", ev) + "px";
}
},
gameCheck: function() {
var s = 0,
bols = true;
var _arry = this.sortObj.rightlist;
var _arryRom = this.sortObj.romdlist;
console.log(_arry);
console.log(_arryRom);
for (; s < _arry.length; s++) {
if (_arry[s] != _arryRom[s].id) {
bols = false;
break;
}
}
return bols;
},
eventHand: function() {
var obj = sg.boxObj.getElementsByTagName("div");
var i = 0,
olen = obj.length;
var that = this;
var m = that.mouseEvent;
var box_index = 0;
for (; i < olen;) {
(function(n) {
//按下鼠標
obj[n].addEventListener("mousedown", function(e) {
var _this = this;
m.mousedown.call(_this, e);
st.background = _this.style.background;
_this.style.background = "#FFF";
var _newObj = that.addElement();
sg.boxObj.appendChild(_newObj);
_newObj.style.opacity = sg.opacity;
//移動位置
_newObj.onmousemove = function(e) {
m.mousemove.call(_newObj, e);
var _i = 0;
for (; _i < olen; _i++) {
var _w = parseInt(obj[_i].style.width) / 1.5;
var _h = parseInt(obj[_i].style.height) / 1.5;
var _left = obj[_i].offsetLeft;
var _top = obj[_i].offsetTop;
var _boxX = parseInt(this.style.left);
var _boxY = parseInt(this.style.top);
eachBox(obj, function(d) {
obj[d].style.opacity = 1.0;
});
if (_left + _w > _boxX || _left > _boxX + _w) {
if (_top + _h > _boxY || _top > _boxY + _h) {
box_index = _i;
obj[_i].style.opacity = st.opacity;
break;
}
}
}
};
//鼠標松開
_newObj.addEventListener("mouseup", function(e) {
_newObj.onmousemove = function(e) {};
//獲取當前停留元素的坐標
var tagObj = {
id1: obj[box_index].id,
id2: _this.id,
bg1: obj[box_index].style.background,
bg2: this.style.background
};
//交換位置
_this.id = tagObj.id1;
_this.style.background = tagObj.bg1;
obj[box_index].id = tagObj.id2;
obj[box_index].style.background = tagObj.bg2;
that.sortObj.romdlist = obj;
//還原樣式
eachBox(obj, function(d) {
obj[d].style.opacity = 1.0;
});
m.mouseup.call(_newObj, e);
//判斷是否完成拼圖
if (that.gameCheck()) {
alert("好棒呀?。?！");
}
}, false);
}, false);
})(i++);
}
}
}
//隨機數(shù)
function randomsort(a, b) {
return Math.random() > .5 ? -1 : 1;
}
function eachBox(obj, fn) {
var _s = 0;
for (; _s < obj.length; _s++) {
fn(_s);
}
}
function getX_Y(s, ev) {
var _b = (ev.clientX - this.parentNode.offsetLeft) - (this.offsetWidth / 2);
if (s === "y") {
_b = (ev.clientY - this.parentNode.offsetTop) - (this.offsetHeight / 2);
}
return _b;
}
$g.gameInfo = new gameInfo();
})(window)
</script>
</html>
參考上述代碼趕快去試試吧。
更多關于Js游戲的精彩文章，請查看專題：《JavaScript經典游戲 玩不?！?/a>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
![Array.prototype.concat不是通用方法反駁[譯]](http://img.jbzj.com/images/xgimg/bcimg0.png)
Array.prototype.concat不是通用方法反駁[譯]
ECMAScript 5.1規(guī)范中指出,數(shù)組方法concat是通用的(generic).本文反駁了這一結論,因為實際上并不是這樣的2012-09-09
不得不分享的JavaScript常用方法函數(shù)集（上）
不得不分享的JavaScript常用方法函數(shù)集，幫助大家更好的學習javascript程序設計，有興趣的朋友可以參考一下2015-12-12
選擇表情插入文本域的時候，顯示的是類似[哈哈]這樣的字符串，下面是把表情字符串轉換為圖片表情的一種方法2014-04-04
這篇文章主要為大家介紹了uniapp如何使用定位過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-10-10
有時候我們希望彈出層能夠實現(xiàn)延遲關閉，并且鼠標在彈出層區(qū)域移動的時候能夠保持顯現(xiàn)，下面是具體的實現(xiàn)代碼。2010-04-04
Promise是一個構造函數(shù),我們就可以new Promise()得到一個 Promise的實例,下面這篇文章主要給大家介紹了關于promise和async用法以及區(qū)別的相關資料,需要的朋友可以參考下2023-01-01
這篇文章主要介紹了JavaScript閉包原理與用法,結合實例形式詳細分析了JavaScript閉包相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-05-05
這篇文章主要介紹了微信小程序template模板引入的問題小結,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-07-07
細說JavaScript中的this指向與綁定規(guī)則
本文主要詳細介紹了JavaScript中的this指向與綁定規(guī)則，默認綁定，隱式綁定，顯示綁定，new綁定這四個規(guī)則，文中有相關的代碼示例供大家參考，感興趣的同學可以閱讀下2023-05-05
下面小編就為大家?guī)硪黄獙s中回調函數(shù)的一些看法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-08-08