Fragments
<script>generateditem = document.createElement("IMG");
;generateditem.id = `Bottle`;;generateditem.src = `https://cdn0.iconfinder.com/data/icons/cleaning-and-maid-3/500/SingleCartoonCleaningAndMaidYulia_1-512.png` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); }// Make the DIV element draggable:
// find the element that you want to drag.
var box =generateditem
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX -box.offsetWidth/2 + 'px';
box.style.top = touchLocation.pageY -box.offsetHeight/2 + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
//begin nonmobile
dragElement(generateditem);
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
};generateditem.style = `width:` + `25%` + `;height:` + `25%` + `;position:` + `absolute` + `;left:` + `20%` + `;top:` + `70%` + `;color:` + `red` + `;z-index:` + `20` + `;font-size:` + `10vw` + `;`
generateditem = document.createElement("div");
;generateditem.id = `Baby`;;generateditem.innerHTML = `🗡`;;generateditem.style = `width:` + `10vw` + `;height:` + `10vw` + `;position:` + `absolute` + `;left:` + `20%` + `;top:` + `20%` + `;color:` + `red` + `;z-index:` + `2` + `;font-size:` + `12vw` + `;user-select: none` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});;generateditem.contentEditable=`false`;generateditem = document.createElement("div");
;generateditem.id = `txt`;;generateditem.innerHTML = `Clean your weapons of residual debris using your cleaning rag.`;;generateditem.style = `width:` + `100%` + `;height:` + `5em` + `;position:` + `absolute` + `;left:` + `0` + `;top:` + `50%` + `;color:` + `red` + `;user-select: none` + `;z-index:` + `2` + `;text-align:` + `center` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});;generateditem.contentEditable=`false`;;if (typeof variablelist == 'undefined') {
var variablelist = {} };
array_name_here = `CollisionListA`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push(`Baby`);
;if (typeof variablelist == 'undefined') {
var variablelist = {} };
array_name_here = `CollisionListB`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push(`Bottle`);
generateditem = document.createElement("div");
;generateditem.id = `Terry`;;generateditem.innerHTML = `🔫`;;generateditem.style = `width:` + `10vw` + `;height:` + `10vw` + `;position:` + `absolute` + `;left:` + `60%` + `;top:` + `20%` + `;color:` + `red` + `;z-index:` + `2` + `;font-size:` + `10vw` + `;user-select: none` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});;generateditem.contentEditable=`false`;;if (typeof variablelist == 'undefined') {
var variablelist = {} };
array_name_here = `CollisionListA`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push(`Terry`);
;if (typeof variablelist == 'undefined') {
var variablelist = {} };
array_name_here = `CollisionListB`;;if (array_name_here in variablelist){}else{variablelist[array_name_here] = []};
variablelist[array_name_here].push(`Bottle`);
document.documentElement.style.overflow = 'hidden'; // For Firefox and Chrome
document.body.scroll = 'no'; // For IE
generateditem = document.createElement("div");
;generateditem.id = `background`;;generateditem.style = `width:` + `100%` + `;height:` + `100%` + `;position:` + `absolute` + `;left:` + `0` + `;top:` + `0` + `;background-color:` + `#287834` + `;user-select: none` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 10000,
});;generateditem.contentEditable=`false`;;if (`timercounter` in window) {
}else{
timercounter = {};timerexpire = {}
}
;intrafrag_var = `CollisionTimer`;
if('timerexpire' in window){}else{timerexpire = {} }
if('timercounter' in window){}else{timercounter = {} }
timerexpire[intrafrag_var] = -1;
timercounter[intrafrag_var] = setInterval(function() {timerexpire[`CollisionTimer`] =timerexpire[`CollisionTimer`] +1; if ("loop_name_here" in window) {
PriorLoopName = loop_name_here
} else {
PriorLoopName = ``
}
loop_name_here = `CollisionLoop`
try{loop_counter[loop_name_here] = 1}catch(err){var loop_counter = {}
loop_counter[loop_name_here] = 1
}for (loop_counter[loop_name_here] = 0; loop_counter[loop_name_here] < variablelist[`CollisionListA`].length; loop_counter[loop_name_here]++) {;Collision_ID =`Collision1`;;case_A =variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]];;case_B=variablelist[`CollisionListB`][loop_counter[`CollisionLoop`]];aRect = document.getElementById(case_A).getBoundingClientRect();
bRect = document.getElementById(case_B).getBoundingClientRect();
if ( !(
((aRect.top + aRect.height) < (bRect.top)) ||
(aRect.top > (bRect.top + bRect.height)) ||
((aRect.left + aRect.width) < bRect.left) ||
(aRect.left > (bRect.left + bRect.width))
)){
try{collision_counter[Collision_ID] = collision_counter[Collision_ID] + 1} catch(err){ try{collision_counter[Collision_ID] = 0}catch(err) {collision_counter = {};collision_counter[Collision_ID] = 0} collision_counter[Collision_ID] = collision_counter[Collision_ID] + 1 }
;if (variablelist[`CollisionListB`][loop_counter[`CollisionLoop`]]==`Bottle`){;if (variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]]==`Baby`){generateditem = document.createElement("div");
;generateditem.id = `bubbles`;;generateditem.innerHTML = `🫧`;;generateditem.style = `width:` + `5em` + `;height:` + `5em` + `;position:` + `absolute` + `;left:` + [Math.floor(Math.random()*(100 + 1 - 0) + 0),`px`,].join('') + `;top:` + [Math.floor(Math.random()*(100 + 1 - 0) + 0),`px`,].join('') + `;color:` + `red` + `;font-size:` + `2vw` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById(`Baby`).appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([{opacity:`0`,transform: '' + 'scale(' + `2`+ ',' + `2` + `) `,},],{duration: 2000,
fill: `forwards`});;generateditem.contentEditable=`false`;// Make the DIV element draggable:
// find the element that you want to drag.
var box =generateditem
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX -box.offsetWidth/2 + 'px';
box.style.top = touchLocation.pageY -box.offsetHeight/2 + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
//begin nonmobile
dragElement(generateditem);
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
};generateditem = document.getElementById(`txt`);generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});;generateditem.innerHTML = `Happy Birthday Terry
🎵❤️ -Taylor Swift`;}else{};;if (variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]]==`Terry`){generateditem = document.createElement("div");
;generateditem.id = `bubbles`;;generateditem.innerHTML = `✨`;;generateditem.style = `width:` + `5em` + `;height:` + `5em` + `;position:` + `absolute` + `;left:` + [Math.floor(Math.random()*(100 + 1 - 0) + 0),`px`,].join('') + `;top:` + [Math.floor(Math.random()*(100 + 1 - 0) + 0),`px`,].join('') + `;color:` + `red` + `;font-size:` + `2vw` + `;`;generateditem.addEventListener('click', function (e) {});try {
document.getElementById(`Terry`).appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([{opacity:`0`,},],{duration: 300,
fill: `forwards`});;generateditem.contentEditable=`false`;// Make the DIV element draggable:
// find the element that you want to drag.
var box =generateditem
/* listen to the touchMove event,
every time it fires, grab the location
of touch and assign it to box */
box.addEventListener('touchmove', function(e) {
// grab the location of touch
var touchLocation = e.targetTouches[0];
// assign box new coordinates based on the touch.
box.style.left = touchLocation.pageX -box.offsetWidth/2 + 'px';
box.style.top = touchLocation.pageY -box.offsetHeight/2 + 'px';
})
/* record the position of the touch
when released using touchend event.
This will be the drop position. */
box.addEventListener('touchend', function(e) {
// current box position.
var x = parseInt(box.style.left);
var y = parseInt(box.style.top);
})
//begin nonmobile
dragElement(generateditem);
function dragElement(elmnt) {
var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
// otherwise, move the DIV from anywhere inside the DIV:
elmnt.onmousedown = dragMouseDown;
function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();
// get the mouse cursor position at startup:
pos3 = e.clientX;
pos4 = e.clientY;
document.onmouseup = closeDragElement;
// call a function whenever the cursor moves:
document.onmousemove = elementDrag;
}
function elementDrag(e) {
e = e || window.event;
e.preventDefault();
// calculate the new cursor position:
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;
// set the element's new position:
elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
}
function closeDragElement() {
// stop moving when mouse button is released:
document.onmouseup = null;
document.onmousemove = null;
}
};generateditem = document.getElementById(`txt`);generateditem.src = `` ;;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});;generateditem.innerHTML = `Well Done 💘🏀- CC`;}else{};}else{};;if (variablelist[`CollisionListB`][loop_counter[`CollisionLoop`]]==`Meat`){;if (variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]]==`Baby`){;if (`variablelist` in window) {
}else{
variablelist = {};
};
variablelist[`TextData`]= `MERRYN LOVE MEAT`
generateditem = document.createElement("div");
;generateditem.id = `My Div2`;;generateditem.innerHTML = ` `;;generateditem.src = `https://images.emojiterra.com/google/noto-emoji/unicode-15/color/512px/2b50.png` ;;generateditem.style = `width:` + `100%` + `;height:` + `10vw` + `;position:` + `absolute` + `;color:` + `white` + `;font-size:` + `8vw` + `;top:` + `80vh` + `;text-align:` + `center` + `;`;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 8000,
});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };intrafrag_var = `TextTimer`;
if('timerexpire' in window){}else{timerexpire = {} }
if('timercounter' in window){}else{timercounter = {} }
timerexpire[intrafrag_var] = -1;
timercounter[intrafrag_var] = setInterval(function() {timerexpire[`TextTimer`] =timerexpire[`TextTimer`] +1; ;if (timerexpire[`TextTimer`]<=variablelist[`TextData`].length){;generateditem = document.getElementById(`My Div2`);generateditem.src = `` ;;generateditem.innerHTML = variablelist[`TextData`].substring(0,timerexpire[`TextTimer`]);;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});}else{clearInterval(timercounter[`TextTimer`]);};},50);
}else{};;if (variablelist[`CollisionListA`][loop_counter[`CollisionLoop`]]==`Terry`){;if (`variablelist` in window) {
}else{
variablelist = {};
};
variablelist[`TextData`]= `It tastes good.`
generateditem = document.createElement("div");
;generateditem.id = `My Div2`;;generateditem.innerHTML = ` `;;generateditem.src = `https://images.emojiterra.com/google/noto-emoji/unicode-15/color/512px/2b50.png` ;;generateditem.style = `width:` + `100%` + `;height:` + `10vw` + `;position:` + `absolute` + `;color:` + `white` + `;font-size:` + `8vw` + `;top:` + `80vh` + `;text-align:` + `center` + `;`;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 8000,
});try {
document.getElementById().appendChild(generateditem);
} catch (error) {
document.body.appendChild(generateditem); };intrafrag_var = `TextTimer`;
if('timerexpire' in window){}else{timerexpire = {} }
if('timercounter' in window){}else{timercounter = {} }
timerexpire[intrafrag_var] = -1;
timercounter[intrafrag_var] = setInterval(function() {timerexpire[`TextTimer`] =timerexpire[`TextTimer`] +1; ;if (timerexpire[`TextTimer`]<=variablelist[`TextData`].length){;generateditem = document.getElementById(`My Div2`);generateditem.src = `` ;;generateditem.innerHTML = variablelist[`TextData`].substring(0,timerexpire[`TextTimer`]);;generateditem.addEventListener('click', function (e) {;console.log(`My String`)});;generateditem.style.animation = 'none';
generateditem.offsetHeight; /* trigger reflow */
generateditem.style.animation = null;generateditem.animate([],{duration: 5000,
});}else{clearInterval(timercounter[`TextTimer`]);};},50);
}else{};}else{};
}
};loop_name_here = PriorLoopName;},20);