<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/5.4.0/bootbox.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
td{border:3px solid orange}
#newGame{box-sizing:border-box;border: 3px solid #8B2A16;color:yellow;z-index:1;animation: MotionScale 7s alternate linear infinite;position:absolute;top:45%;left:45%;}
body{background-color:#8B2A16}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
@keyframes MotionScale {
from {
/*
Identity matrix is used as basis here.
The matrix below describes the
following transformations:
Translates every X point by +50px
Translates every Y point by +100px
Translates every Z point by 0
Scales down by 10%
*/
transform: matrix3d( 1, .45, 0, 0, 1.75, 2.5, 0, 0, 0, .0, 1, 0, 50, 100, 0, 1.1 );
}
50% {
transform: matrix3d( 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0.9 );
}
to {
transform: matrix3d( 1, -.45, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 50, 100, 0, 1.1 )
}
}
</style>
</head>
<body>
<button onclick="beginWithUncleJourney()">Apes</button>
<div style="box-sizing:border-box;border:3px solid green; height:1500px; width:1500px; position:absolute; top: 45%; left: 45%;background-image:url('../Media/chessBoard1.png')" id="postulatedDiv"></div>
<div id="newGame"><h1><a style="color:yellow" onclick="testTheUnits()">Uncle Units First Round</a></h1></div>
</body>
<script>
function testTheUnits(){document.body.style.backgroundColor="#742818";setTimeout(function(){document.body.style.backgroundColor="#522015"},1000);setTimeout(function(){document.body.style.backgroundColor="#2C120D"},2000);setTimeout(function(){document.body.style.backgroundColor="#160907"},3000);setTimeout(function(){document.body.style.backgroundColor="#060302"},4000);setTimeout(function(){let theMoonSvg = document.createElementNS("http://www.w3.org/2000/svg", "svg");theMoonSvg.setAttribute('id', 'theMoonSvg');theMoonSvg.setAttribute('height', '500');theMoonSvg.setAttribute('width', '500');theMoonSvg.setAttribute('style', 'z-index:1;position:absolute;top:1%;left:7%;transition:transform 3s');document.body.appendChild(theMoonSvg);let theMoon = document.createElementNS("http://www.w3.org/2000/svg", "circle");theMoon.setAttribute('id', 'theMoon');theMoon.setAttribute('cx', '225');theMoon.setAttribute('cy', '225');theMoon.setAttribute('r', '225');theMoon.setAttribute('fill', 'blue');theMoon.setAttribute('stroke', 'yellow');theMoon.setAttribute('stroke-width', '4');document.querySelector("#theMoonSvg").appendChild(theMoon);theMoon.setAttribute("onmouseover","increaseMoonAndStartGame()");theMoon.setAttribute("style","z-index-1");let theMoonText = document.createElementNS("http://www.w3.org/2000/svg", "text");theMoonText.setAttribute('id', 'theMoonText');theMoonText.setAttribute('x', '115');theMoonText.setAttribute('y', '225');theMoonText.setAttribute('style', 'z-index:1');theMoonSvg.appendChild(theMoonText);theMoonText.innerHTML="hover to begin";theMoonText.setAttribute("fill","yellow");theMoonText.setAttribute("font-size","3em")},5000);}
function increaseMoonAndStartGame(){document.querySelector("#theMoonSvg").style.transform="matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,300,175,0,.65)";setTimeout(function(){document.querySelector("#theMoonText").innerHTML="Begin";},3000);
setTimeout(function(){document.querySelector("#theMoonSvg").remove();document.body.style.backgroundColor="green";document.body.innerHTML='<table style="color:orange;border:3px solid black"><thead><tr><td>Pick Your Uncle</td></tr></thead><tbody><tr><td><h1><a style="color:orange" onclick="uncleOne()">Uncle who plays mario for atleast One hundred goldStars, reads magazines, and drinks Yuengling</a></h1></td><td><h1><a style="color:orange" onclick="uncleTwo()">Uncle who makes his own bug spray, doesn\'t use a wallet and listens to country music</a></h1></td><td><h1><a style="color:orange" onclick="uncleThree()">Uncle who has velcro instead of shoe laces, keeps up with conspiracy theroies and eats more nuts than doughnuts</a></h1></td></tr></tbody></table>'},3500)}
var whatIsTheUnclesName;
function uncleOne(){bootbox.prompt({
className:'uncleName',
title: "Name Your Uncle",
centerVertical: true,
callback: function(result){ whatIsTheUnclesName=result;
if(result===null){alert("try again?");bootbox.hideAll();location.reload()}
else{bootbox.alert("Your uncle\'s name is:" + result,function(){testUncleStart()})}
}});uncleStart="uncleOne";}
function uncleTwo(){bootbox.prompt({
className:'uncleName',
title: "Name Your Uncle",
centerVertical: true,
callback: function(result){ whatIsTheUnclesName=result;
if(result===null){alert("try again?");bootbox.hideAll();location.reload()}
else{bootbox.alert("Your uncle\'s name is:" + result,function(){testUncleStart()})}
}});uncleStart="uncleTwo";}
function uncleThree(){bootbox.prompt({
className:'uncleName',
title: "Name Your Uncle",
centerVertical: true,
callback: function(result){ whatIsTheUnclesName=result;
if(result===null){alert("try again?");bootbox.hideAll();location.reload()}
else{bootbox.alert("Your uncle\'s name is:" + result,function(){testUncleStart()})}
}});uncleStart="uncleThree";}
function testUncleStart(){if(uncleStart=="uncleOne"){bootbox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who plays mario for atleast One hundred goldStars, reads magazines, and drinks Yuengling", function(){setTimeout(function(){beginWithUncleJourney()},1000)} )}else if(uncleStart=="uncleTwo"){bootbox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who makes his own bug spray, doesn\'t use a wallet and listens to country music", function(){setTimeout(function(){beginWithUncleJourney()},1000)} )}else if(uncleStart=="uncleThree"){bootbox.alert("you chose:" + whatIsTheUnclesName + ":: Attributes: Uncle who has velcro instead of shoe laces, keeps up with conspiracy theroies and eats more nuts than doughnuts", function(){setTimeout(function(){beginWithUncleJourney()},1000)} )}}
function beginWithUncleJourney(){document.body.innerHTML="<h1><a style=\"color:orange\" onclick=\"freckleMeTonsForBurnCooknessOntheGrillSet()\">Begin with "+whatIsTheUnclesName+"</a></h1>"}
var uncleStart;;
var timerBoxInterval;
var shrimpGrill;
var shrimp;
var shrimp02;
var shrimp03;
var shrimp04;
var shrimp05;
var shrimp06;
var pane;
var x=0;
var ace;
var time01 = 0;
var time02 = 0;
var time03 = 0;
var time04 = 0;
var time05 = 0;
var time06 = 0;
var plated01;
function platedTemper01(){shrimp = document.createElement("div"); document.body.appendChild(shrimp);shrimp.setAttribute("id","shrimpCook01");shrimp.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:80%;left:1%;color:orange;z-index:-1";shrimp.innerHTML=time01;if(time01>0&&time01<200){alert("that is food")}else{alert("send it back")}}
function platedTemper02(){shrimp02 = document.createElement("div"); document.body.appendChild(shrimp02);shrimp02.setAttribute("id","shrimpCook02");shrimp02.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:80%;left:1%;color:orange;z-index:-1";shrimp02.innerHTML=time02;if(time02>0&&time02<200){alert("that is food")}else{alert("send it back")}}
function freckleMeTonsForBurnCooknessOntheGrillSet(){
document.body.innerHTML="";var timerBox = document.createElement("div");document.body.appendChild(timerBox);timerBox.setAttribute("id","timerBox");timerBox.style="box-sizing:border-box;position:absolute;top:1%;left:55%;background-color:green;height:225px;width:225px;z-index:-1";timerBoxInterval = setInterval(function(){timerBox.innerHTML=time01},1000);
setInterval(function() {
const height01 = document.querySelector("#shrimpCook01").style.top.split('px')[0];
const width01 = document.querySelector("#shrimpCook01").style.left.split('px')[0];
if(Number(width01) > 400 && Number(height01) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp);platedTemper01()} else if ( Number(height01) > 400){time01++} else if( Number(height01) <= 400){time01--} else{}shrimp.innerHTML=time01;
}, 1000);
setInterval(function() {
const height02 = document.querySelector("#shrimpCook02").style.top.split('px')[0];
const width02 = document.querySelector("#shrimpCook02").style.left.split('px')[0];
if(Number(width02) > 400 && Number(height02) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp02);platedTemper02()} else if ( Number(height02) > 400){time02++} else if( Number(height02) <= 400){time02--} else{}shrimp02.innerHTML=time02;
}, 1000);
shrimpGrill = document.createElement("div");document.body.appendChild(shrimpGrill);shrimpGrill.setAttribute("id","shrimpCookGrill");shrimpGrill.style="box-sizing:border-box;position:relative;background-color:black;height:500px;width:500px;z-index:1";
shrimp = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp);shrimp.setAttribute("id","shrimpCook01");shrimp.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:1%;left:1%;color:orange;z-index:-1";
shrimp02 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp02);shrimp02.setAttribute("id","shrimpCook02");shrimp02.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:11%;left:1%;color:orange;z-index:-1";
shrimp03 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp03);shrimp03.setAttribute("id","shrimpCook03");shrimp03.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:21%;left:1%;color:orange;z-index:-1";
shrimp04 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp04);shrimp04.setAttribute("id","shrimpCook04");shrimp04.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:31%;left:1%;color:orange;z-index:-1";
shrimp05 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp05);shrimp05.setAttribute("id","shrimpCook05");shrimp05.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:41%;left:1%;color:orange;z-index:-1";
shrimp06 = document.createElement("div"); document.querySelector("#shrimpCookGrill").appendChild(shrimp06);shrimp06.setAttribute("id","shrimpCook06");shrimp06.style="box-sizing:border-box;position:absolute;background-color:green;height:50px;width:50px;top:51%;left:1%;color:orange;z-index:-1";
pane = $('#shrimpCookGrill'),
box = $('#shrimpCook01'),
w = pane.width() - box.width(),
d = {},
x = 3;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39); },
top: function(i,v) { return newv(v, 38, 40); }
});
}, 20);
}
function toggleDiv(){pane = $('#shrimpCookGrill'),
box = $('#shrimpCook0'+i),
w = pane.width() - box.width(),
d = {},
x = 1;
function newv(v,a,b) {
var n = parseInt(v, 10) - (d[a] ? x : 0) + (d[b] ? x : 0);
return n < 0 ? 0 : n > w ? w : n;
}
$(window).keydown(function(e) { d[e.which] = true; });
$(window).keyup(function(e) { d[e.which] = false; });
setInterval(function() {
box.css({
left: function(i,v) { return newv(v, 37, 39);},
top: function(i,v) { return newv(v, 38, 40); }
});
}, 200);
}
function togglep(){toggleDiv();
}
document.body.onkeydown = function(event){
event = event || window.event;
var keycode = event.charCode || event.keyCode;
if(keycode === 81){
togglep();i++;if(i>6){i=1;console.log(i)}
}
}
var i = 1;
</script>
</html>setInterval(function() {
const height01 = document.querySelector("#shrimpCook01").style.top.split('px')[0]; const width01 = document.querySelector("#shrimpCook01").style.left.split('px')[0];
if(Number(width01) > 400 && Number(height01) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp);platedTemper01()} else if ( Number(height01) > 400){time01++} else if( Number(height01) <= 400){time01--} else{}shrimp.innerHTML=time01; }, 1000);
setInterval(function() {
const height02 = document.querySelector("#shrimpCook02").style.top.split('px')[0]; const width02 = document.querySelector("#shrimpCook02").style.left.split('px')[0];
if(Number(width02) > 400 && Number(height02) < 100){document.querySelector("#shrimpCookGrill").removeChild(shrimp02);platedTemper02()} else if ( Number(height02) > 400){time02++} else if( Number(height02) <= 400){time02--} else{}shrimp02.innerHTML=time02; }, 1000);
Click apes, then click begin with undefined.Ive used 2 different intervals to express two different sets of time but only the first div's clock starts, if I move the second div with my arrow keys, then the clock starts but I want it to start off the bat. I can move the divs with the left,right,up, and down arrow keys, and switch divs by pressing the q button
Aucun commentaire:
Enregistrer un commentaire