HTML+CSS+JS实现 ❤️美女拼图游戏❤️
Posted java李杨勇
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML+CSS+JS实现 ❤️美女拼图游戏❤️相关的知识，希望对你有一定的参考价值。
🍅 作者主页：Java李杨勇
🍅 简介：Java领域优质创作者🏆、【java李杨勇】公号作者✌ 简历模板、学习资料、面试题库、技术互助【关注我，都给你】
🍅 欢迎点赞 👍 收藏 ⭐留言 📝
效果演示： 文末获取源码
代码目录：
主要代码实现：
CSS样式：
html
padding: 0px;
margin: 0px;
background: #eee;
#gameDiv
width: 460px;
height: 460px;
margin: 20px auto;
background: #F9F9F9;
padding: 1px 1px;
position: relative;
#maskBox
opacity: 0.5;
display: block;
JavaScript代码 :
<script>
/**
* Created by jsonpeter on 2015/8/13.
*/
(function($g)
//游戏配置
setting =
gameConfig:
url: "345.jpg",
id: "gameDiv",
//生成规格横4 纵4
size: "4*4",
//每个元素的间隔
margin: 1,
//拖动时候块透明度
opacity: 0.8
,
setElement:
type: "div",
id: "",
float: "",
display: "",
margin: "",
background: "",
width: "",
height: "",
left: "",
top: "",
position: "", //absolute
opacity: 0.4,
animate: 0.8
;
//元素生成参数
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.top=w*_i+"px";
//_st.left=h*_s+"px";
_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());
// console.log( (_w*_i)+"px "+(_h*_s)+"px ");
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;
);
//排序后的带dom的素组
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();
//元素类型div
_st.type = "span";
_st.id = "maskBox";
_st.width = this.offsetWidth + "px";
_st.height = this.offsetHeight + "px";
_st.position = "absolute";
_st.background = "";
//_st.opacity=_sg.opacity;
_st.left = this.offsetLeft + "px";
_st.top = this.offsetTop + "px";
,
mouseup: function(ev)
ev = ev || ev.event;
//var _e=t.setElement;
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";
//生成可移动的div
var _newObj = that.addElement();
_sg.boxObj.appendChild(_newObj);
_newObj.style.opacity = _sg.opacity;
//移动位置
_newObj.onmousemove = function(e)
m.mousemove.call(_newObj, e);
// console.log("____"+this.offsetLeft);
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;
);
//删除浮动div
m.mouseup.call(_newObj, e);
//计算是否完成拼图
if (that.gameCheck())
alert("O(∩_∩)O哈哈~");
, false);
, false);
)(i++);
//随机数
function randomsort(a, b)
return Math.random() > .5 ? -1 : 1; //用Math.random()函数生成0~1之间的随机数与0.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>上面的图片可以自己替换成喜欢
源码获取
大家可以点赞、收藏、关注、评论我啦 、查看博主主页或下方微信公众号获取更多~！
打卡 文章 更新 50 / 100天
精彩推荐更新中：
以上是关于HTML+CSS+JS实现 ❤️美女拼图游戏❤️的主要内容，如果未能解决你的问题，请参考以下文章
HTML+CSS+JS实现 ❤️鼠标悬停性感美女图片特效❤️