Dog Clicker

by ChrisWong

HTML

<!DOCTYPE html>
  <html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <title>Dog Clicker</title>
    <link href="DC.css" rel="stylesheet"/>
  </head>
  <body>

    <script>
      function play() {
        var audio = document.getElementById("audio");
        audio.play();
      }
    </script>

  <div id="store" class="overlay2">
  <a href="javascript:void(0)" class="closebtn2" onclick="closeNav2()">&times;</a>
  <div class="overlay-content2">
    <div class="sign"><h1>Skins</h1></div>
    <button class="reset" onclick="reset()"><h3>Reset skin</h3></button>
    <img class="hatdog" src="https://i.ibb.co/pxxpSbm/hatdog.png">
    <h2 class="hatdogt">Hat Dog</h2>
    <button class="hatdogbut" onclick="buydog()"><h3>Cost: 5000 dogs</h3></button>
    <img class="sleepdog" src="https://i.ibb.co/w4Fz1wf/sleepdog.gif">
    <h2 class="sleepdogt">Sleep Dog</h2>
    <button class="sleepdogbut" onclick="buydog2()"><h3>Cost: 10000 dogs</h3></button>
    <img class="realdog" src="https://www.pngmart.com/files/1/Dog-PNG-File.png">
    <h2 class="realdogt">Real Dog</h2>
    <button class="realdogbut" onclick="buydog3()"><h3>Cost: 20000 dogs</h3></button>
  </div>
  </div>

  <span style="font-size:30px;cursor:pointer" class="storeicon" onclick="openNav2()"><img src="https://www.iconpacks.net/icons/2/free-store-icon-2017-thumb.png" height="128" width="128"></span>

    <div onclick="codeinput()" class="codebox"></div>
    <div class="Home"><a href="index.html">Home</a></div>
    <div class="version">v1.0</div>
    <center>
    <div class="texty" style="font-size: 50px" id="var">Dogs: 0</div>
    <br>
    
    <input type="image" src="https://i.redd.it/6ivfrfgpkdn41.png" width="310" height="360" ondblclick="play()" onclick="myfunction()" class="dogpic" id="dog">
    <audio id="audio" src="dog.mp3"></audio>

    </center>
    <h1>Upgrades!</h1>
    
    <button class="buybox inline"...

CSS

html {
    background-color:  #1294DA;
    color: #1294DA;
  }

  body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  font-size: 20px;
  }

  .codebox {
    position: absolute;
    right: 10px;
    bottom: 10px;
    height: 40px;
    width: 40px;
    border: 1px;
    background-color: #1294DA;
  }

  .testy {
    position: absolute;
    font-size: 12px;
    left: 10px;
    top: 35px;
      
  } 

  .texty {
    color: #1294DA;
  }

  .version {
    text-align: left;
  }

  .buybox {
    height: 20px;
    width: 40px;
    border-radius: 10%;
    border: 1px solid;
    background-color: rgb(255, 255, 255);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.24);
    
  }

  .inline {
    display: inline-block;
    vertical-align: middle;
  }

  html {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-user-drag: none;
  }

  .music {
  display: none;
  }

  .source {
  font-size: 1px;
  color:#2073a0;
  }

  .dogpic {
  position: absolute;
  right: 41.5%;
  }

  .dogpic:hover {
  animation-name: spin;
  animation-duration: 900ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear; 
  }

  @keyframes spin {
  from {
      transform:rotate(0deg);
  }
  to {
      transform:rotate(360deg);
  }
  }

  .storeicon {
  position: absolute;
  margin-left: 90%;
  margin-top: 20%
  }

  .overlay2 {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
   background-image: url(https://i.ibb.co/7xfw7F1/shopbg.png);
   -webkit-background-size: cover;
   -moz-background-size: cover;
   -o-background-size: cover;
   background-size: cover;
    overflow-x: hidden;
   transition: 0.5s;
    }

  .overlay-content2 {
    position: relative;
    top: 25%;
   width: 100%;
  ...

JavaScript

var e =  localStorage.getItem('dogs') || 0;
  e = parseInt(e);
  document.getElementById("var").innerHTML = "Dogs: " + e;
	var upg = 0;
	var upg2 = 0;
	var upg3 = 0;
	var upg4 = 0;
	var upg5 = 0;
	var upg6 = 0;
	var clickval = 0;
	var clickval1 = 0;
	var clickval3 = 0;
  var clickval4 = 0;
	var clickval6 = 0;
	var speed = 1010;
	var cost = 10;
	var cost2 = 100;
	var cost3 = 1000;
	var cost4 = 75;
	var cost5 = 5000;
	var cost6 = 10000;
	var hatdogcost = 5000;
	var sleepdogcost = 10000;
	var realdogcost = 20000;
	var buttonvalue = 1;
	var hide = document.getElementById("hiddentest");
	var cst2 = document.getElementById("cost2");
	var up = document.getElementById("ultra");
	var hide2 = document.getElementById("hide2");
	var cst3 = document.getElementById("cost3");
	var omgc = document.getElementById("omega");
	var cst4 = document.getElementById("cost4");
	var up4 = document.getElementById("buttonupgrade");
	var hide3 = document.getElementById("hide3");
	var hype = document.getElementById("hype");
	var cst5 = document.getElementById("cost5");
	var hide4 = document.getElementById("hide4");
	var nukc = document.getElementById("nukee");
	var cst6 = document.getElementById("cost6");
	var upgbuy2 = false;
	var check = false;
	var check1 = false;
	var check3 = false;
	var check4 = false;
	var check6 = false;
	var checkhatdog = false;
	var checksleepdog = false;
	var checkrealdog = false;
	var upgbuy3 = false;
	var upgbuy4 = false;
	var upgbuy6 = false;
	var upgbuy = false;
	var hiddenoof = false;
	var hatdog = false;
	var sleepdog = false;
	var realdog = false;
	var mtl = "you dont have enough dogs for a ";
	
	function codeinput() {
    avariable = prompt("What's the password?");
    if (avariable === "dev") {
        inpt2 = prompt("how many dogs do you want?");
        e += parseInt(inpt2);
        updac();
    }
    else {
        alert("\ nope\!")
    }
	}

	hide2.style.visibility = 'hidden';
  hide3.style.visibility = 'hidden';
	hide4.style.visibility =...