This is the 18th day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021″
Near the end of the semester, are you still writing an HTML web design class assignment and the teacher’s homework requirements are overwhelming? Is the total number of pages required too high? Don’t know how to do your HTML web homework? Don’t have the right template? And so on. The problem you’re trying to solve, There are personal, food, company, sports, cosmetics, logistics, environmental protection, books, wedding, military, games, festivals, smoking cessation, film, photography school, tourism, e-commerce, pets, electrical appliances, tea, home, hotel, dance, animation, stars, Clothing, culture, hometown, flowers, gifts, cars, other web design topics, A+ level homework, can meet college students web design needs can meet your needs. Original HTML+CSS+JS page design, Web college students web design homework source code, this is a good beauty jigsaw game, picture smart, very suitable for beginners to learn to use. Home Page Java Li Yangyong get the source code
Effect demonstration:
Code directory:
Main code implementation:
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;
}
Copy the codeComplete JavaScript code
<script>
/** * Created by admin on 2021/11/10. */
(function($g) {
// Game configuration
setting = {
gameConfig: {
url: "345.jpg".id: "gameDiv".// Generate specifications 4 horizontal and 4 vertical
size: "4 * 4".// The spacing of each element
margin: 1.// Block transparency when dragging
opacity: 0.8
},
setElement: {
type: "div".id: "".float: "".display: "".margin: "".background: "".width: "".height: "".left: "".top: "".position: "".//absolute
opacity: 0.4.animate: 0.8}};// The element generates arguments
var _sg = setting.gameConfig;
var _st = setting.setElement;
var gameInfo = function() {};
gameInfo.prototype = {
init: function() {
this.creatObj();
this.eventHand();
},
sortObj: {
rightlist: [].// Correct sort
romdlist: [] // Scramble the sort
},
creatObj: function() {
_sg.boxObj = document.getElementById(_sg.id) || "";
// The size is automatically obtained
var _size = _sg.size.split(The '*') | | [0.0];
// Calculate the width and height of a single div
var w = Math.floor(_sg.boxObj.offsetWidth / _size[0]);
var h = Math.floor(_sg.boxObj.offsetHeight / _size[1]);
// Image generates div
var _size = _sg.size.split(The '*') | | [0.0];
var wt = _size[0],
hg = _size[1];
// Create a primitive group and sort it
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++) {
// Assign the randomly shashed 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));
});
// Sort the new array
_tmp.sort(function(a, b) {
return a > b ? 1 : -1;
});
// The sort element group with 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;
},
// Add elements
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();
// Element type 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"; }},// Check to compare two arrays correctly
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) {
// Press the mouse button
_obj[n].addEventListener("mousedown".function(e) {
var _this = this;
m.mousedown.call(_this, e);
_st.background = _this.style.background;
_this.style.background = "#FFF";
// Generate a removable div
var _newObj = that.addElement();
_sg.boxObj.appendChild(_newObj);
_newObj.style.opacity = _sg.opacity;
// Move the position
_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);
// Restore the style
eachBox(_obj, function(d) {
_obj[d].style.opacity = 1.0;
});
// Calculate the drag position
if (_left + _w > _boxX || _left > _boxX + _w) {
if (_top + _h > _boxY || _top > _boxY + _h) {
box_index = _i;
_obj[_i].style.opacity = _st.opacity;
break; }}}};// Release the mouse
_newObj.addEventListener("mouseup".function(e) {
// Delete the movement event
_newObj.onmousemove = function(e) {};
// Get the coordinates of the currently residing element
var tagObj = {
id1: _obj[box_index].id,
id2: _this.id,
bg1: _obj[box_index].style.background,
bg2: this.style.background
};
// Switch places
_this.id = tagObj.id1;
_this.style.background = tagObj.bg1;
_obj[box_index].id = tagObj.id2;
_obj[box_index].style.background = tagObj.bg2;
// Get the drag sort
that.sortObj.romdlist = _obj;
// Restore the style
eachBox(_obj, function(d) {
_obj[d].style.opacity = 1.0;
});
// Delete the floating div
m.mouseup.call(_newObj, e);
// Calculate whether the puzzle is complete
if (that.gameCheck()) {
alert("O (studying studying) O ha ha ~"); }},false);
}, false); })(i++); }}}/ / random number
function randomsort(a, b) {
return Math.random() > . 5 ? -1 : 1; // Use math.random () to generate a random number between 0 and 1 and compare with 0.5, returning -1 or 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 = newgameInfo(); }) (window)
</script>
Copy the codeNote: some works are collected from the network and deleted from infringement
Get the source code:
Everyone likes, favorites, follows, comments, check the author’s homepage: Java Li Yangyong to get contact
Clocked articles updated 107/365 days