alert("Do not exit until the stars appear! 🙏") var time = 100; var satop = 90; var skytop = 0; var darkness = 0; var brightness = 0; var nstars = 40; var mystars = []; var starsloc = []; var count = 0; window.onload = function() { var boat = document.getElementById("boat"); var catch2 = document.getElementById("catch2"); var catch3 = document.getElementById("catch3"); var sun = document.getElementById("sun"); var sea = document.getElementById("sea"); var sky = document.getElementById("sky"); var fish1 = document.getElementById("fish1"); document.getElementById("bird1").style.top = Math.random()*100+50 + "px"; document.getElementById("bird2").style.top = Math.random()*100+50 + "px"; document.getElementById("bird1").style.left = Math.random()*-50 + "px"; document.getElementById("bird2").style.left = Math.random()*-50 + "px"; var body = document.getElementsByTagName("body")[0]; for (let i = 0; i < nstars; i++) { body.innerHTML += "

"; document.getElementsByClassName("star")[i].style.animation = `staranim ${Math.random()+1}s linear ${10+Math.random()*2}s infinite`; } }; for (let i = 0; i < nstars;i++) { starsloc[i] = [Math.random()*100,Math.random()*45]; } setTimeout(function(){ sun.style.top = "100%"; },time*1000); var t1 = setInterval(function(){ darkness++; },time*10); function seaanim() { if (darkness > 80) { clearInterval(t1); } var a = 187 - darkness; var b = 255 - darkness; sea.style.background = `-webkit-radial-gradient(15% ${satop}%,circle,rgb(${a},${a},${b}),rgb(${a-55-darkness*1.5},${a-55-darkness*1.5},${b-4-darkness*1.5}))`; satop--; sky.style.background = `-webkit-radial-gradient(10% ${skytop}%, circle,rgb(${b},${a},${a}),rgb(${b-34},${a-85},${a-85}) 40%,rgb(${b-34},${a-85},${a-85}) ${70-darkness/2}%,rgb(${204-2*darkness},${102-2*darkness},${221-2*darkness}))`; skytop++; if (skytop > 150) { clearInterval(t); var t3 = setInterval(nightsky,100); } } var t = setInterval(seaanim,time/3*10); var u = 150; var v = 50; function nightsky() { sky.style.background = sky.style.background.substring(0,28)+u+sky.style.background.substring(31); var value = v.toString().length+29; sea.style.background = sea.style.background.substring(0,29)+v+sea.style.background.substring(value); if (u < 500){ u++; } if (v < 100) { v++; } if (v == 99) { var t8 = setInterval(shift,100); } } var mytop = 0; function shift() { sea.style.top = mytop + "%"; if (mytop > -50) {mytop--;} } function stars() { for (let i = 0; i < nstars; i++) { mystars[i] = document.getElementsByTagName("p")[i]; mystars[i].style.height = brightness+"px"; mystars[i].style.width = brightness+"px"; mystars[i].style.top = starsloc[i][1]+"%"; mystars[i].style.left = starsloc[i][0]+"%"; } count++; if (count > 50) { brightness+=0.4; } if (brightness > 3) { clearInterval(t2); } } var t2 = setInterval(stars,time*9); // --------------- BIRD MOVEMENT ---------------- // var ychange = [(Math.random()-0.5)*5,(Math.random()-0.5)*5]; var xchange = [Math.random()*6+3,Math.random()*6+3]; function birdmovement() { for (let i = 0; i < 2; i++) { document.getElementsByClassName("birds")[i].style.left = +document.getElementsByClassName("birds")[i].style.left.substring(0,document.getElementsByClassName("birds")[i].style.left.length-2) + xchange[i]+"px"; document.getElementsByClassName("birds")[i].style.top = +document.getElementsByClassName("birds")[i].style.top.substring(0,document.getElementsByClassName("birds")[i].style.top.length-2) + ychange[i]+"px"; if (parseInt(document.getElementsByClassName("birds")[i].style.left) > document.documentElement.clientWidth) { document.getElementsByClassName("birds")[i].style.left = Math.random()*-500 + "px"; document.getElementsByClassName("birds")[i].style.top = Math.random()*100+50 + "px"; document.getElementsByClassName("part1")[i].style.background = "black"; document.getElementsByClassName("part2")[i].style.background = "black"; } } } function changes() { for (let i = 0 ; i < 2; i++) { if (parseInt(document.getElementsByClassName("birds")[i].style.top) > 180) ychange[i] = (Math.random()-1)*4; else if (parseInt(document.getElementsByClassName("birds")[i].style.top) < 10) ychange[i] = Math.random()*4; else ychange[i] = (Math.random()-0.5)*5; xchange[i] = Math.random()*6+3; } } var t5 = setInterval(birdmovement,100); var t6 = setInterval(changes,800); // ----------- BOAT MOVEMENT ----------- // var xc = -4; var yc = (Math.random()-0.5)*4; var bx = 10; var by = 20; var t9 = setInterval(boatmovement, 100) var t10 = setInterval(bmchange,1000); function boatmovement() { boat.style.left = `calc(100% + ${bx}px)`; boat.style.top = `calc(60% + ${by}px)`; bx+=xc; by+=yc; if (bx == -142) { clearInterval(t10); xc = -0.001; yc = 0; var t11 = setInterval(stopping,50) } } function bmchange() { xc = -4; yc = (Math.random()-0.5)*3; if (by < 10) {yc = 0.5;} if (by > 30) {yc = -0.5;} } var catch2h = 2; var c2hchange = 3; var countstop = 0; function stopping() { catch2.style.height = catch2h + "px" catch2h+=c2hchange; if (catch2h > 80) { catch3.style.display = "block"; } if (catch2h > 100 && countstop <= 40) { c2hchange = 0; countstop++; } if (catch2h == 50 && c2hchange == -1) { catch3.style.display = "none"; } if (catch2h < 2 && c2hchange == -1) { c2hchange = 0; //document.getElementById("fish1").style.display = "none"; clearInterval(t12) var t13 = setInterval(takingfish, 100); var t10 = setInterval(bmchange, 1000); } if (catch2h > 100 && countstop > 40) { c2hchange = -1; document.getElementById("fish1").style.display = "block"; } } // -------------- FISH MOVEMENT ------------- // function fish1movement() { fish1.style.top = `calc(${boat.style.top} + ${catch2h}px - 60px)`; fish1.style.left = `calc(${boat.style.left})`; } var t12 = setInterval(fish1movement, 10); var takingcount = 0; var rot = 0; var size = 1; function takingfish() { fish1.style.top = `calc(${fish1.style.top} + 1.4px)`; fish1.style.left = `calc(${fish1.style.left} + 1.6px)`; fish1.style.transform = `rotate(${rot}deg) scale(${size})`; rot+=3; size-= 0.05; takingcount++; if (takingcount > 14) { fish1.style.display = "none"; } }

SEA🌊 [CONTEST by Justin and Alex] 🙌