这是我参与11月更文挑战的第18天，活动详情查看：2021最后一次更文挑战」
临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大？网页要求的总数量太多？HTML网页作业无从下手？没有合适的模板？等等一系列问题。你想要解决的问题，在这里常见网页设计作业题材有 个人、 美食、 公司、体育、 化妆品、 物流、 环保、 书籍、 婚纱、 军事、 游戏、 节日、 戒烟、 电影、 摄影 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈、 动漫、 明星、 服装、 文化、 家乡、 鲜花、 礼品、 汽车、 其他等网页设计题目, A+水平作业, 可满足大学生网页大作业网页设计需求都能满足你的需求。原始HTML+CSS+JS页面设计, web大学生网页设计作业源码，这是一个不错的美女拼图游戏，画面精明，非常适合初学者学习使用。主页Java李杨勇 获取源码
效果演示：
代码目录：
主要代码实现：
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 admin on 2021/11/10.
*/
(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>
复制代码备注：部分作品来自于网络收集、侵权立删
获取源码：
大家点赞、收藏、关注、评论啦 、查看作者主页：Java李杨勇 获取联系
打卡 文章 更新 107/ 365天