//to the Summit..😤💩😎 // Your web app's Firebase configuration var firebaseConfig = { apiKey: "AIzaSyCVIQipoXSa1SDGusaDwUB7zdVzEu4cklU", authDomain: "a0te-database.firebaseapp.com", databaseURL: "https://a0te-database.firebaseio.com", projectId: "a0te-database", storageBucket: "a0te-database.appspot.com", messagingSenderId: "75219048985", appId: "1:75219048985:web:a98d96e7bf1faf0e12e888", measurementId: "G-GNHRYLB7GB" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); window.onload = function(){ let box; // will be used later for Mission Content... let Posts; // will be for chats...and activities in the /*activity menu*/ box = document.createElement('div'); document.body.appendChild(box); Posts = document.createElement("div"); Posts.style.background= "lightblue"; Posts.style.position = "absolute" Posts.style.left = "11.5%"; Posts.style.marginBottom = "3%"; Posts.style.marginTop = "3%"; Posts.style.borderRadius= "0.5rem"; Posts.style.width = "75%"; Posts.style.boxShadow = "0px 3px 7px black," + "inset 0px 3px 5px black"; Posts.style.textAlign = "center"; Post = document.createElement("div"); Post.style.background= "lightblue"; Post.style.position = "absolute" Post.style.left = "11.5%"; Post.style.marginBottom = "3%"; Post.style.marginTop = "3%"; Post.style.borderRadius= "0.5rem"; Post.style.width = "75%"; Post.style.boxShadow = "0px 3px 7px black," + "inset 0px 3px 5px black"; Post.style.textAlign = "center"; n_page.appendChild(Post); /*******/ // to notify you.... n_page.style.width = '90%'; n_page.style.height = "90%"; n_page.style.background = '#ffffff'; n_page.style.border = '4px inset lightblue'; n_page.style.position = "fixed"; n_page.style.zIndex = 100; n_page.style.top = "0%"; n_page.style.left = "3.5vh"; n_page.style.borderRadius= '.5rem'; n_page.style.overflow = "scroll"; n_page.style.overflowX = "hidden"; n_page.style.boxShadow = "0px 3px 5px 0.5px " + "#000000," + ' inset 0px 3px 5px black'; n_page.style.filter = "opacity(90%)"; firebase.database().ref("Notify").push().set({ sender: Name, notification : " has started playing the game!" }); firebase.database().ref("Notify").on('child_added', function(sd){ Post.innerHTML += ''+sd.val().sender+'' + sd.val().notification + '

'; }); text = document.createElement('p'); //the mission //content.... proceed = document.createElement('input'); //start mission proceed.type = "button"; proceed.value= 'proceed'; proceed.style.boxShadow= '0px 2px 5px 0.5px black'; proceed.style.position= "absolute"; proceed.style.top = "80%"; proceed.style.left= "40%"; proceed.style.display = "none"; proceed.style.borderRadius= '0.5rem'; proceed.style.background= "#000000"; proceed.style.color = 'white'; cancel= document.createElement('input'); //end mission cancel.type = "button"; cancel.value= '❌'; cancel.style.boxShadow= '0px 2px 5px 0.5px black'; cancel.style.position= "absolute"; cancel.style.top = "80%"; cancel.style.left= "70%"; cancel.style.display = "none"; cancel.style.borderRadius= '0.5rem'; cancel.style.background= "#000000"; cancel.style.color = 'white'; box.appendChild(proceed); box.appendChild(cancel); destination = document.createElement("div"); destination.style.background = 'red'; destination.style.width = "1em"; destination.style.height = '1em'; destination.style.position = 'absolute'; destination.style.display = '/*none*/none' destination.style.zIndex = 1; destination.style.animationName= "blink"; destination.style.animationDuration= "1.5s"; destination.style.animationIterationCount= "infinite"; destination.style.borderRadius = '50%'; World.appendChild(destination); //all your expressions... let STATUS = ["😎", "😳", "😵", "🤠", "😒", "😡"]; let PEOPLE = ['🧒', '👧', '🧑', '👨', '👩', '👮', '💂'] // your guns... let pistol = document.createElement('img'); pistol.src = ' https://i.ibb.co/5Ttjr6Q/1599241282277.png' let desert_gun = document.createElement('img'); desert_gun.src= 'https://i.ibb.co/cNswDQq/1599239361713.png' let MP5 = document.createElement('img'); MP5.src = ' https://i.ibb.co/zx1CN8r/1599241733691.png'; let UZI = document.createElement('img'); UZI.src = 'https://i.ibb.co/8r4hTkn/1599242981690.png'; let AK47 = document.createElement('img'); AK47.src = ' https://i.ibb.co/DLcNkr8/1599242058223.png '; let Laser_Gun = document.createElement('img'); Laser_Gun.src = 'https://i.ibb.co/zHk38ts/1599292246031.png' let Machine_Gun = document.createElement('img'); Machine_Gun.src = 'https://i.ibb.co/t3gQ1y3/machine-gun-PNG49.png'; let RPG = document.createElement('div'); RPG.src = ''; // to move anywhere..🤔🤔 let t = you.offsetTop; let l = you.offsetLeft ; n =() => { t -= 1 you.style.top = t + '%'; you.style.transform = "rotate(180deg)"; s = () => { t += 1 you.style.top = t + '%'; you.style.transform = "rotate(360deg)"; w =() =>{ l -= 1 you.style.left = l + "% "; you.style.transform = "rotate(90deg)"; e =() =>{ l += 1 you.style.left = l + "%"; you.style.transform = "rotate(270deg)"; if(you.style.top == "5%" && you.style.left == "5%") {alert("You are in your house🙄"); you.innerHTML = STATUS[0];}; if( (you.style.top > "3%" && you.style.top < '7%') && (you.style.left > "58%" && you.style.left < "62%") ) {alert("Neighbour: Heyyy " + Name + ' Are you a thief??😲 get out of' + " my house!!! now! before i call the cops..."); you.innerHTML = STATUS[1];} if ( (you.style.top >= "3%" && you.style.top <= "7%" ) && (you.style.left >= "67%" && you.style.left <= "72%") ) { alert("This is your Neigbours house...😮");} //Main Road Missions.... if( ( you.style.top >= "5%" && you.style.top <= '75%') && (you.style.left >= "36%" && you.style.left <= "40%") ) { Mission_Box(); Mission_Box_road(); box.style.display= 'block/*block*/'; box.appendChild(cancel); cancel.addEventListener('click', function(){box.style.display = "none"; cancel.removeEventListener("click", function(){})}); proceed.addEventListener('click', function() { car = document.createElement('div'); car.innerHTML = '🚘'; car.style.fontSize = '2em'; car.style.position = "absolute"; car.style.top = "37%"; car.style.left = '3%'; car.addEventListener('click', function() {let com = confirm("Do you want to enter This car?"); if(com == true){you.innerHTML= '🚘'; you.style.fontSize = '2em'; you.style.top = '37%'; you.style.left = '3%'; car.style.display = "none"; /* if( (you.style.top >='93.3%' && you.style.top <='97%' ) && (you.style.left >= "51.7% " && you.style.top <='55.7%') ) {alert('x');} i dont know why hovering is not working.. */ setTimeout( function() {Mission_Box(); box.style.display = "block"; proceed.style.display = "block"; cancel.style.display = 'block'; box.innerHTML = '

Mission Complete!

' + 'you have recieved 10xp and a pistol'; you.innerHTML = STATUS[3] you.style.fontSize = "1.24em"; destination.style.display = "none"; setTimeout(function(){box.style.display = "none"},5000)} ,20000) firebase.database().ref("Notify").push().set({ name : Name, notification: "has completed the mission " + 'De delivery driver...🚘 ' }); firebase.database().ref("Notify").on('child_added', function(d_d){ Post.innerHTML += "" + d_d.val().name + " " + d_d.val().notification + "
" + '
' + "

"; }); } // end off if function.. else{ alert('Please enter your car to carry out this' + ' mission...')} destination.style.top = '95.3%'; destination.style.left = "53.7%"; destination.style.display = "block"; }); World.appendChild(car); box.style.display = "none"; } ) } // sinking in ocean and dieing... if( you.style.top < "102%" && you.style.left > "102%") { Power_bar.value -= 10; alert('x')} }; //end of eastward motion.. }; //end of westward motion.. }; //end of southward motion.. };//end of northward motion.. n_w = () => { t -= 1 l -= 1 you.style.left = l + "%"; you.style.top = t + "%"; you.style.transform = "rotate(120deg)";} s_e = () => { t += 1 l += 1 you.style.left = l + "%"; you.style.top = t + "%"; you.style.transform = "rotate(300deg)";} s_w = () => { t += 1 l -= 1 you.style.left = l + "%"; you.style.top = t + "%"; you.style.transform = "rotate(30deg)";} n_e = () => { t -= 1 l += 1 you.style.left = l + "%"; you.style.top = t + "%"; you.style.transform = "rotate(210deg)";} // the activity section...... activity.addEventListener('click', function() { activity_page.style.width = '90%'; activity_page.style.height = "90%"; activity_page.style.background = '#ffffff'; activity_page.style.border = '4px inset lightblue'; activity_page.style.position = "fixed"; activity_page.style.zIndex = 100; activity_page.style.top = "0%"; activity_page.style.left = "3.5vh"; activity_page.style.borderRadius= '.5rem'; activity_page.style.overflow = "scroll"; activity_page.style.overflowX = "hidden"; activity_page.style.boxShadow = "0px 3px 5px 0.5px " + "#000000," + ' inset 0px 3px 5px black'; activity_page.style.filter = "opacity(90%)"; /********/ let message = document.createElement('input'); let send = document.createElement('input'); send.type = "submit"; message.type = "search"; message.style.position = "fixed"; send.style.position = "fixed"; message.style.zIndex = 110; send.style.zIndex = 110; send.value = "send"; send.style.textAlign = "center"; send.style.fontSize = "110%" send.style.top = "93%"; send.style.left = "70%"; message.style.top = "93%"; message.style.left = "20%"; message.style.width = "14em"; message.style.height = "2.5em" send.style.height = "7%"; send.style.background = "#000000"; send.style.color = "white"; send.style.borderRadius= "0.5rem"; message.style.color = '#rgba(0,0,0,0.6)'; message.style.fontWeight= "900"; message.style.boxShadow= "0px 3px 5px black," + " inset 0px 3px 5px black"; message.style.borderRadius= "0.5rem"; document.body.appendChild(message); document.body.appendChild(send); //now to send things.... send.addEventListener('click', function() { if (message.value != "" ) { firebase.database().ref('Name').push().set({ sender : Name, sender_post :message.value }); } else{} return false; }) //end of send.... firebase.database().ref('Name').on("child_added", function(e) { send.addEventListener('click', function(){}) activity_page.appendChild(Posts) Posts.innerHTML +=e.val().sender +":"+ e.val().sender_post + "

" + "

" message.value = ""; }); if (activity_page.style.display == "block") {activity_page.style.display = "none"; message.style.display = 'none'; send.style.display = "none"; n_page.style.display = "none"; } else {activity_page.style.display = "block"; message.style.display = "block"; send.style.display = "block"; n_page.style.display = "none"; } }); //end of activity page... /**************/ notification.addEventListener('click', function(){ if (n_page.style.display == "block") {n_page.style.display = "none"; activity_page.style.display = "none"; table_page.style.display = "none";} else {n_page.style.display = "block"; activity_page.style.display = "none"; table_page.style.display = "none"} }); // end of the notifications... //all buildings....stuffs ..🤓 //your house vertical wall..... var y_h_w_o = document.createElement("div"); y_h_w_o.style.background = "rgb(180, 20, 10)"; y_h_w_o.style.width = "0.5em"; y_h_w_o.style.height = "7.0em" y_h_w_o.style.position = "absolute"; y_h_w_o.style.left = "25%"; y_h_w_o.style.boxShadow = "-4px 0px 5px black"; y_h_w_o.style.zIndex = "2"; y_h_w_o.style.top = "0%"; World.appendChild(y_h_w_o); //your house horizontal wall..... var y_h_w_t = document.createElement("div"); y_h_w_t.style.background= "rgb(180, 20, 10 )" y_h_w_t.style.transform = "rotate(90deg)"; y_h_w_t.style.position = "absolute" y_h_w_t.style.height = "9.7em"; y_h_w_t.style.width = "0.5em"; y_h_w_t.style.left = "3.6%"; y_h_w_t.style.top = "15.2%"; y_h_w_t.style.boxShadow = "0px -4px 5px black," + 'inset 0px 3px 5px black'; y_h_w_t.style.zIndex = "2"; World.appendChild(y_h_w_t ); // your house floor... var y_h_f = document.createElement("div"); y_h_f.style.background = "yellow"; y_h_f.style.position = "absolute"; y_h_f.style.width = "5.99em"; y_h_f.style.height = "8.9855em"; y_h_f.style.zIndex = "1"; y_h_f.style.top = '0%' World.appendChild(y_h_f); //neigbouring Buildings... var n_b_l = document.createElement("div"); n_b_l.style.background = "#10ff20"; n_b_l.style.height = "6em"; n_b_l.style.width = "10em"; n_b_l.style.position = "absolute"; n_b_l.style.left = "12em"; n_b_l.style.top = '0%'; n_b_l.style.boxShadow = "inset 0px 4px 5px white" World.appendChild(n_b_l); let n_b_w_o = document.createElement("div"); n_b_w_o.style.background = "rgb(75, 205, 200)"; n_b_w_o.style.position= "absolute"; n_b_w_o.style.left = "12em"; n_b_w_o.style.top = "0em" n_b_w_o.style.height = '6.0rem'; n_b_w_o.style.width = '0.5rem'; n_b_w_o.style.boxShadow= "-2px 0px 5px 0.5px black," + 'inset 2px 0px 5px white' World.appendChild(n_b_w_o ); let n_b_w_t = document.createElement('div'); n_b_w_t.style.background = 'rgb(75,205,202)'; n_b_w_t.style.width= "0.5rem"; n_b_w_t.style.height = "7em"; n_b_w_t.style.left = "18.35em"; n_b_w_t.style.top = '2.25em'; n_b_w_t.style.position = "absolute"; n_b_w_t.style.transform= 'rotateZ(90deg)'; n_b_w_t.style.boxShadow = '2px 0px 5px 0.5px black, ' + "inset 2px 0px 5px white"; World.appendChild(n_b_w_t ); let n_b_w_th = document.createElement("div"); n_b_w_th.style.width = "0.5rem"; n_b_w_th.style.background= 'rgb(75, 205, 202)'; n_b_w_th.style.height= "6.00em"; n_b_w_th.style.left = '21.77em'; n_b_w_th.style.top = '0vmax'; n_b_w_th.style.position = "absolute"; n_b_w_th.style.boxShadow= "-2px 0px 5px 0.5px black," + 'inset 2px 0px 5px white' World.appendChild(n_b_w_th) // the city ocean.... ocean = document.createElement('img'); ocean.src = "https://i.ibb.co/x80sn1X/Happy-Great-Grosbeak-small.gif"; ocean.style.position = "absolute"; ocean.style.left = "104%"; ocean.style.width = "130%"; ocean.style.top = "2.5%"; ocean.style.borderRadius = "0.5rem"; ocean.style.border= "5px solid brown"; ocean.style.boxShadow= "inset 6px 10px 20px 0.5px black" World.appendChild(ocean); //main road... let road = document.createElement("div"); road.style.background = "#000100"; road.style.position = "absolute"; road.style.width = "10%"; road.style.height = "22.4em"; road.style.left = "34.1%"; road.style.top = "0%"; road.style.borderRight= "3px inset rgb(225,225,225)" road.style.borderTop= "3px inset rgb(225,225, 225)" World.appendChild(road); let road_o = document.createElement("div"); road_o.style.background = "#000100"; road_o.style.position = "absolute"; road_o.style.width = "10%"; road_o.style.height = "22.4em"; road_o.style.left = "34.1%"; road_o.style.transform = 'rotate(90deg)'; road_o.style.top = "40%"; road_o.style.borderRight= "3px inset rgb(225,225,225)" road_o.style.borderTop= "3px inset rgb(225,225, 225)"; road_o.style.borderRadius= "0.5rem"; World.appendChild(road_o); let road_t = document.createElement("div"); road_t.style.background = "#000100"; road_t.style.position = "absolute"; road_t.style.width = "10%"; road_t.style.height = "22.4em"; road_t.style.left = "80.1%"; road_t.style.transform = 'rotate(0deg)'; road_t.style.top = '75%'; road_t.style.borderRight= "3px inset rgb(225,225,225)" road_t.style.borderTop= "3px inset rgb(225,225, 225)"; road_t.style.borderRadius = "0.5rem"; World.appendChild(road_t); let road_th = document.createElement("div"); road_th.style.background = "#000100"; road_th.style.position = "absolute"; road_th.style.width = "10%"; road_th.style.height = "22.4em"; road_th.style.left = "134.1%"; road_th.style.transform = 'rotate(90deg)'; road_th.style.top = '75%'; road_th.style.borderRight= "3px inset rgb(225,225,225)" road_th.style.borderTop= "3px inset rgb(225,225, 225)"; road_th.style.borderRadius = "0.5rem"; World.appendChild(road_th); let road_f = document.createElement("div"); road_f.style.background = "#000100"; road_f.style.position = "absolute"; road_f.style.width = "10%"; road_f.style.height = "22.4em"; road_f.style.left = "176.9%"; road_f.style.transform = 'rotate(180deg)'; road_f.style.top = '118%'; road_f.style.borderRight= "3px inset rgb(225,225,225)" road_f.style.borderTop= "3px inset rgb(225,225, 225)"; road_f.style.borderRadius = "0.5rem"; World.appendChild(road_f); let road_fi = document.createElement("div"); road_fi.style.background = "#000100"; road_fi.style.position = "absolute"; road_fi.style.width = "10%"; road_fi.style.height = "22.4em"; road_fi.style.left = "220.9%"; road_fi.style.transform = 'rotate(90deg)'; road_fi.style.top = '153%'; road_fi.style.borderRight= "3px inset rgb(225,225,225)" road_fi.style.borderTop= "3px inset rgb(225,225, 225)"; road_fi.style.borderRadius = "0.5rem"; World.appendChild(road_fi); // buildings....... let a_house = document.createElement('div'); a_house.style.background = "green"; a_house.style.width = "40%"; a_house.style.height = "20%"; a_house.style.position = "absolute"; a_house.style.border ="5px solid rgb(20, 156, 190)"; a_house.style.top = '87%'; a_house.style.left = "34%"; a_house.style.borderRadius = "0.5rem"; a_house.style.boxShadow = 'inset 0px 2px 5px black'; World.appendChild(a_house); let a_house_o = document.createElement('div'); a_house_o.style.background = "cyan"; a_house_o.style.width = "40%"; a_house_o.style.height = "20%"; a_house_o.style.position = "absolute"; a_house_o.style.border ="5px solid rgb(20, 12,100)"; a_house_o.style.top = '127%'; a_house_o.style.left = "85.97474684746574838465%"; a_house_o.style.borderRadius = "0.5rem"; a_house_o.style.boxShadow = 'inset 0px 2px 5px black'; a_house_o.style.transform = 'rotate(90deg)'; World.appendChild(a_house_o); let Warehouse = document.createElement('img'); Warehouse.src = "https://i.ibb.co/64LCQQS/1599509935822.png"; Warehouse.style.width = "40%"; Warehouse.style.position = "absolute"; Warehouse.style.top = "200%"; Warehouse.style.left= "200%"; Warehouse.style.boxShadow = "2px 3px 7px black, " + 'inset 3px 3px 7px black'; Warehouse.style.border = "5px solid gold"; World.appendChild(Warehouse); // THE GUN SHOP..... gun_shop = document.createElement('img'); gun_shop.src= 'https://i.ibb.co/mF2SFJ4/images-25.jpg'; gun_shop.style.width = '50%'; gun_shop.style.position = "absolute"; gun_shop.style.top = "300%"; gun_shop.style.left = "300%"; World.appendChild(gun_shop); gun_shop_wall_one= document.createElement('div'); gun_shop_wall_one.style.width = '0.5em'; gun_shop_wall_one.style.height = '11.21em'; gun_shop_wall_one.style.position = "absolute"; gun_shop_wall_one.style.background = 'rgb(70, 70, 70)'; gun_shop_wall_one.style.top = '300%'; gun_shop_wall_one.style.left = '300%'; gun_shop_wall_one.style.boxShadow = "2px 0px 5px 0.5px"; World.appendChild(gun_shop_wall_one); gun_shop_wall_two= document.createElement('div'); gun_shop_wall_two.style.width = '0.5em'; gun_shop_wall_two.style.height = '8.5em'; gun_shop_wall_two.style.position = "absolute"; gun_shop_wall_two.style.background = 'rgb(70, 70, 70)'; gun_shop_wall_two.style.top = '286%'; gun_shop_wall_two.style.left = '330%'; gun_shop_wall_two.style.boxShadow = "2px 0px 5px " + "0.5px"; gun_shop_wall_two.style.transform = 'rotate(90deg)'; World.appendChild(gun_shop_wall_two); /*******************/ /***/ /****/ /* this is your css style...*/ /****/ you.style.position = 'absolute'; /**/ you.style.zIndex = ' 3'; /**/ you.style.fontSize = "1.24em"; /**/ you.style.top = "5%"; /***/ you.style.left = "5%"; /***/ /*****/ /**/ /*********************************/ let Pick_PEOPLE = Math.round(Math.random()*6) switch (Pick_PEOPLE) { case 0 : you.innerHTML =PEOPLE[0]; break; case 1: you.innerHTML = PEOPLE[1]; case 2 : you.innerHTML =PEOPLE[2]; break; case 3 : you.innerHTML = PEOPLE[3]; break; case 4 : you.innerHTML =PEOPLE[4]; break; case 5 : you.innerHTML = PEOPLE[5]; break; case 6 : you.innerHTML = PEOPLE[6]; break; } /*********************section 2...************************/ let life_bar = document.createElement('progress'); life_bar.min = 0; life_bar.max = 100; life_bar.value = 100; life_bar.style.zIndex = 10; life_bar.style.position = "fixed"; life_bar.style.background= 'white'; life_bar.style.borderRadius= '0.5rem'; life_bar.style.boxShadow = "0px 3px 5px black, inset 2px 3px 3px black"; life_bar.style.left= "59%"; life_bar.style.top = "1%"; life_bar.id= "life"; document.body.appendChild(life_bar); let Power_bar = document.createElement('progress'); Power_bar.min = 0; Power_bar.max = 100; Power_bar.value = 50; Power_bar.style.zIndex = 10; Power_bar.style.position = "fixed"; Power_bar.style.background= 'white'; Power_bar.style.borderRadius= '0.5rem'; Power_bar.style.boxShadow = "0px 3px 5px black, inset 2px 3px 3px black"; Power_bar.style.right= "59%"; Power_bar.style.top = "1%"; Power_bar.id= "Power"; document.body.appendChild(Power_bar); Mission_Box =()=> { box.style.width = '60%'; box.style.height = "0%"; //must be 30 percent.. box.style.background = '#ffffff'; box.style.border = '4px inset lightblue'; box.style.position = "absolute"; box.style.zIndex = 30; box.style.top = "0%"; box.style.left = "13vh"; box.style.borderRadius= '.5rem'; box.style.boxShadow = "0px 3px 5px 0.5px #000000," + ' inset 0px 3px 5px black'; box.style.display = '/**none**/'; box.style.filter = "opacity(90%)"; you.style.left =Math.floor(Math.random()*30)+"%" you.style.top =Math.floor(Math.random()*30)+'%' let top = 0 ; let Open = setInterval( function() { if (top >= 30 ) {clearInterval(); proceed.style.display= "block"; cancel.style.display = 'block';} else { top += 1; box.style.height = top + '%' } } ,10) /* end of the mission box....*/ }; Mission_Box_road= ()=> { text.innerHTML = " New Mission : De delivery driver " + '

' + " " + 'Description: ' + "" + Name + ' Take a car and drive to sunset street' + '
' + "rewards:" + 'pistol and 10xp' + ' ' + ' '; box.appendChild(text); } Mission_Box_road(); }; //end of the game..🤓🤓

Adventure of the Emojis...😊😎😉