Skip to content

Instantly share code, notes, and snippets.

@Morzh7771

Morzh7771/Code

Created December 5, 2019 14:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Morzh7771/4e0f233c7a360a84790e0a91f36e30f2 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Morzh7771/4e0f233c7a360a84790e0a91f36e30f2 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Code
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<style>
html,
body {
height: 100%;
margin: 0;
background-color: #C0C0C0;
background-size: 100%;
}
#hero {
height: 300px;
width: 300px;
position: absolute;
top: calc(50% - 150px);
left: calc(50% - 150px);
background-size: 100% 100%;
border: solid 4px gold;
border-radius: 50%;
padding: 10px;
}
#hero:active {
height: 310px;
width: 310px;
}
#hp {
height: 45px;
width: 10px;
background-color: lime;
position: absolute;
top: calc(0% + 2px);
left: calc(50% - 157px);
border-radius: 5px;
border: solid 2px black;
}
#pointsTxt {
font-size: 80px;
font-family:Arial;
position:absolute;
top: calc(50% - 410px);
left: calc(50% - 80px);
}
#shop {
height: 175px;
width: 800px;
background-color: maroon;
position: absolute;
border-radius: 5px;
border: solid 2px black;
bottom: 0px;
right: calc(50% - 400px);
}
#shopIcon {
height: 100px;
position: absolute;
right: 50px;
bottom: 50px;
}
#d1 {
color: white;
font-size: 25pt;
position: absolute;
right: 75px;
bottom: 0px;
}
#d2{
color: white;
font-size: 25pt;
position: absolute;
right: 75px;
bottom: 140px;
}
#shopIcon:active {
height: 130px;
}
#shopIcon2 {
height: 100px;
position: absolute;
right: 200px;
bottom: 50px;
}
#d7 {
color: white;
font-size: 25pt;
position: absolute;
right: 230px;
bottom: 0px;
}
#d3 {
color: white;
font-size: 25pt;
position: absolute;
right: 230px;
bottom: 140px;
}
#shopIcon2:active {
height: 130px;
}
#shopIcon3 {
height: 100px;
position: absolute;
right: 350px;
bottom: 50px;
}
#d10 {
color: white;
font-size: 25pt;
position: absolute;
right: 370px;
bottom: 0px;
}
#d4 {
color: white;
font-size: 25pt;
position: absolute;
right: 370px;
bottom: 140px;
}
#shopIcon3:active {
height: 130px;
}
#shopIcon4 {
height: 100px;
position: absolute;
right: 500px;
bottom: 50px;
}
#d25 {
color: white;
font-size: 25pt;
position: absolute;
right: 525px;
bottom: 0px;
}
#d5 {
color: white;
font-size: 25pt;
position: absolute;
right: 525px;
bottom: 140px;
}
#shopIcon4:active {
height: 130px;
}
#shopIcon5 {
height: 100px;
position: absolute;
right: 650px;
bottom: 50px;
}
#d50 {
color: white;
font-size: 25pt;
position: absolute;
right: 675px;
bottom: 0px;
}
#d6 {
color: white;
font-size: 25pt;
position: absolute;
right: 675px;
bottom: 140px;
}
#shopIcon5:active {
height: 130px;
}
#img1 {
position: absolute;
top: calc(50% - 405px);
right: calc(50% - 150px);
font-size: 50px;
font-family:Arial;
border: solid 3px black;
border-radius:5px;
width: 300px;
height: 70px;
background-color:gray;
padding: 2px;
}
#img1 { z-index: 2; }
#pointsTxt { z-index: 3; }
#hp { z-index: 5; }
#hp2 { z-index: 4; }
#d1111 { z-index: 7; }
#DDD2 { z-index: 6; }
#ghgh { z-index: 10; }
#hp2 {
height: 45px;
width: 500px;
background-color: silver;
position: absolute;
top: calc(0%);
left: calc(50% - 160px);
border-radius: 5px;
border: solid 4px black ;
}
#d1111{
font-size: 50px;
font-family:Arial;
position:absolute;
top: calc(0% + 30px );
left: calc(0% + 5px)
}
#DDD2{
position:absolute;
top: calc(0%);
left: calc(0%);
border: solid 3px black ;
background-color: silver;
height: 75px;
width: 200px;
font-family:Arial;
font-size: 30px;
}
#ghgh{
font-size: 35px;
text-align:center;
font-family:Arial;
height: 50px;
width: 50px;
color:red;
margin-left: 5px;
}
</style>
</head>
<body id='body'>
<div id='hero'></div>
<div id='hp'><div id='ghgh'></div></div>
<div id='hp2'></div>
<div>
<div id='img1'><img src='http://pngimg.com/uploads/coin/coin_PNG36944.png' width="70" height="70">
</div> <div id='pointsTxt'>0
</div>
</div>
<div id='shop'>
<img id='shopIcon' src='https://cdn0.iconfinder.com/data/icons/video-game-items-concepts/128/anvil-hammer-512.png'>
<b id='d1'>+2</b><b id='d2'>-10p</b>
<img id='shopIcon2' src='https://cdn0.iconfinder.com/data/icons/video-game-items-concepts/128/anvil-hammer-512.png'>
<b id='d7'>+4</b><b id='d3'>-20p</b>
<img id='shopIcon3' src='https://cdn0.iconfinder.com/data/icons/video-game-items-concepts/128/anvil-hammer-512.png'>
<b id='d10'>+8</b><b id='d4'>-40p</b>
<img id='shopIcon4' src='https://cdn0.iconfinder.com/data/icons/video-game-items-concepts/128/anvil-hammer-512.png'>
<b id='d25'>+16</b><b id='d5'>-80p</b></b>
<img id='shopIcon5' src='https://cdn0.iconfinder.com/data/icons/video-game-items-concepts/128/anvil-hammer-512.png'>
<b id='d50'>+32</b><b id='d6'>-160p</b>
</div>
<div id='d1111'>2</div>
<div id='DDD2'>Click Damage:</div>
<script>
let dmg = 1;
let hero_hp = null;
let points = 0;
let dead = 0;
lvl0()
function lvl0() {
hero_hp = 1;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://previews.123rf.com/images/sarahdesign/sarahdesign1506/sarahdesign150604583/41445499-start-button.jpg)';
}
function lvl1(){
hero_hp = 10;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://24smi.org/public/media/person/2017/12/28/wz9qr34jnj54-shrek.jpg)';
}
function lvl2(){
hero_hp = 26;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://gorod-druzei.ru/wp-content/uploads/2019/02/feya-Vinks-v-Gorode-druzej.jpg)';
}
function lvl3(){
hero_hp = 46;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://image.freepik.com/free-photo/_77749-58.jpg)';
}
function lvl4(){
hero_hp = 66;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://dota2.ru/img/heroes/pudge/portrait.jpg)';
}
function lvl5(){
hero_hp = 250;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://starpri.ru/wp-content/uploads/2019/02/strimer-Papich.jpg)';
}
function lvl6(){
hero_hp = 86;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://pbs.twimg.com/profile_images/922788091475189760/i4hct5BA_400x400.jpg)';
}
function lvl7(){
hero_hp = 106;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://www.meme-arsenal.com/memes/8d5c6bdf376fa49c678e7272cc8428cb.jpg)';
}
function lvl8(){
hero_hp = 126;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://i.ytimg.com/vi/D-YCoeAIvjk/maxresdefault.jpg)';
}
function lvl9(){
hero_hp = 146;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://memepedia.ru/wp-content/uploads/2018/06/unnamed-768x768.jpg)';
}
function lvl10(){
hero_hp = 1000;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://gordonua.com/img/article/14714/99_tn.jpg)';
document.getElementById('body').style.backgroundImage='url(https://newwind64.ru/wp-content/uploads/2018/10/%D0%A4%D0%BB%D0%B0%D0%B3-%D0%A0%D0%A4.jpg)';
hero.style.border = "solid 2px blue"
}
function lvl11(){
hero_hp = 166;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://assets.htmlacademy.ru/img/blog/111/[email protected])';
hero.style.border = "solid 2px gold"
document.body.style.background = '#C0C0C0'
}
function lvl12(){
hero_hp = 186;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://images.wallpaperscraft.ru/image/dark_seer_dota_2_portrait_simple_art_93905_225x300.jpg)';
}
function lvl13(){
hero_hp = 206;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl14(){
hero_hp = 226;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl15(){
hero_hp = 246;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl16(){
hero_hp = 266;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl17(){
hero_hp = 286;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl18(){
hero_hp = 220;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl19(){
hero_hp = 240;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl20(){
hero_hp = 1500;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://s1.1zoom.ru/big3/786/DOTA_2_Vector_Graphics_507925.jpg)';
}
function lvl2222(){
hero_hp = 50000000000000;
hp2.style.width = hero_hp + 2 +'px';
hp.style.width = hero_hp + 'px';
hero.style.backgroundImage = 'url(https://img.gazeta.ru/files3/220/12787220/RTX75BU8-pic905-895x505-99055.jpg)'
document.getElementById('body').style.backgroundImage='url(https://newwind64.ru/wp-content/uploads/2018/10/%D0%A4%D0%BB%D0%B0%D0%B3-%D0%A0%D0%A4.jpg)';
hero.style.border = "solid 2px blue"
}
hero.addEventListener('click',hit);
function hit(){
hero_hp = hero_hp - dmg;
hp.style.width = hero_hp + 'px';
d1111.textContent = dmg;
ghgh.textContent = hero_hp;
console.log(hero_hp)
console.log(dmg)
if(hero_hp <= 0){
pointsTxt.textContent = points;
dead = dead + 1;
if(dead == 1){
pointsTxt.textContent = points;
points = points + 0;
pointsTxt.textContent = points;
lvl1();
}
if(dead == 2){
pointsTxt.textContent = points;
points = points + 10;
pointsTxt.textContent = points;
lvl2();
}
if(dead == 3){
pointsTxt.textContent = points;
points = points + 10;
pointsTxt.textContent = points;
lvl3();
}
if(dead == 4){
pointsTxt.textContent = points;
points = points + 10;
pointsTxt.textContent = points;
lvl4();
}
if(dead == 5){
pointsTxt.textContent = points;
points = points + 10;
pointsTxt.textContent = points;
lvl5();
}
if(dead == 6){
pointsTxt.textContent = points;
points = points + 46;
pointsTxt.textContent = points;
lvl6();
}
if(dead == 7){
pointsTxt.textContent = points;
points = points + 10;
pointsTxt.textContent = points;
lvl7();
}
if(dead == 8){
pointsTxt.textContent = points;
points = points + 12;
pointsTxt.textContent = points;
lvl8();
}
if(dead == 9){
pointsTxt.textContent = points;
points = points + 14;
pointsTxt.textContent = points;
lvl9();
}
if(dead == 10){
pointsTxt.textContent = points;
points = points + 16;
pointsTxt.textContent = points;
lvl10();
}
if(dead == 11){
pointsTxt.textContent = points;
points = points + 92;
pointsTxt.textContent = points;
lvl11();
}
if(dead == 12){
pointsTxt.textContent = points;
points = points + 20;
pointsTxt.textContent = points;
lvl12();
}
if(dead == 13){
pointsTxt.textContent = points;
points = points + 26;
pointsTxt.textContent = points;
lvl13();
}
if(dead == 14){
pointsTxt.textContent = points;
points = points + 36;
pointsTxt.textContent = points;
lvl14();
}
if(dead == 15){
pointsTxt.textContent = points;
points = points + 46;
pointsTxt.textContent = points;
lvl15();
}
if(dead == 16){
pointsTxt.textContent = points;
points = points + 150;
pointsTxt.textContent = points;
lvl16();
}
if(dead == 17){
pointsTxt.textContent = points;
points = points + 60;
pointsTxt.textContent = points;
lvl17();
}
if(dead == 18){
pointsTxt.textContent = points;
points = points + 70;
pointsTxt.textContent = points;
lvl18();
}
if(dead == 19){
pointsTxt.textContent = points;
points = points + 80;
pointsTxt.textContent = points;
lvl19();
}
if(dead == 20){
pointsTxt.textContent = points;
points = points + 90;
pointsTxt.textContent = points;
lvl20();
}
if(dead == 21){
pointsTxt.textContent = points;
points = points + 200;
pointsTxt.textContent = points;
dead = dead - 22;
lvl1();
}
}
}
//shop+2
function shop(){
if (points >= 10){
dmg = dmg + 2;
points = points - 10;
pointsTxt.textContent = points;
console.log(dmg)
}
}
shopIcon.addEventListener('click',shop);
//shop +4
function shop2(){
if (points >= 20){
dmg = dmg + 4;
points = points - 20;
pointsTxt.textContent = points;
console.log(dmg)
}
}
shopIcon2.addEventListener('click',shop2);
//shop +8
function shop3(){
if (points >= 40){
dmg = dmg + 8;
points = points - 40;
pointsTxt.textContent = points;
console.log(dmg)
}
}
shopIcon3.addEventListener('click',shop3);
//shop +16
function shop4(){
if (points >= 80){
dmg = dmg + 16;
points = points - 80;
pointsTxt.textContent = points;
console.log(dmg)
}
}
shopIcon4.addEventListener('click',shop4);
//shop +32
function shop5(){
if (points >= 160){
dmg = dmg + 32;
points = points - 160;
pointsTxt.textContent = points;
console.log(dmg)
}
}
shopIcon5.addEventListener('click',shop5);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment