Goalkeeper
How do I make an goalkeeper?
What is a goalkeeper? How do you make a goalkeeper? This script and codes were developed by Yang Li on 13 July 2022, Wednesday.
Goalkeeper - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Goalkeeper</title> <link href="https://fonts.googleapis.com/css?family=Droid+Serif" rel="stylesheet"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="game"> <img id="goal" src="http://cmd-ks.biz/wp-content/uploads/bestbackyardsoccergoals_0399433001452386091.jpg" alt="" /> <img id="goalie" src="http://www.seriousgoalkeeping.net/images/RandomKeeper09.png" alt="" /> <img id="ball" src="http://vignette1.wikia.nocookie.net/micronations/images/a/a8/Soccerball.png/revision/latest?cb=20090820034753" alt="" />
</div>
<div id="controls"> <button id="L">LEFT</button> <button id="M">MID</button> <button id="R">RIGHT</button> <button id="N">RESET</button>
</div>
<div id="score"> <h2>Score:  </h2> <h2 id="scoreNum">0</h2>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Goalkeeper - Script Codes CSS Codes
* { font-family: 'Droid Serif', serif;
}
#game { width: 100%; position: relative;
}
#goal{ width: 100%;
}
#goalie{ width: 16%; position: absolute; top: 40%; left: 45%;
}
#ball{ width: 10%; position: absolute; top: 80%; left: 45%;
}
#controls { display: flex; justify-content: space-around;
}
#controls button { width: 20%; height: 50px; font-size: 100%;
}
#score { display: flex; justify-content: center;
}
Goalkeeper - Script Codes JS Codes
var randNum;
var score = 0;
function pickRandom() { randNum = Math.floor(Math.random() * 3);
}
function ballLeft() { $("#ball").animate({left: "19%", top: "50%", width: "7%"})
}
function ballMid() { $("#ball").animate({left: "45%", top: "50%", width: "7%"})
}
function ballRight() { $("#ball").animate({left: "78%", top: "50%", width: "7%"})
}
function goalieLeft() { $("#goalie").animate({left: "15%", top: "40%"})
}
function goalieRight() { $("#goalie").animate({left: "70%", top: "40%"})
}
function reset() { $("#ball").animate({left: "45%", top: "80%", width: "10%"}) $("#goalie").animate({left: "45%", top: "40%"})
}
$("#L").click(function(){ pickRandom(); ballLeft(); if (randNum == 0) { goalieLeft(); } else if (randNum == 1) { goalieRight(); } else { return; } if (randNum == 0) { return; } else { score++; } $("#scoreNum").text(score);
});
$("#M").click(function(){ pickRandom(); ballMid(); if (randNum == 0) { goalieLeft(); } else if (randNum == 1) { goalieRight(); } else { return; } if (randNum == 2) { return; } else { score++; } $("#scoreNum").text(score);
});
$("#R").click(function(){ pickRandom(); ballRight(); if (randNum == 0) { goalieLeft(); } else if (randNum == 1) { goalieRight(); } else { return; } if (randNum == 1) { return; } else { score++; } $("#scoreNum").text(score);
});
$("#N").click(function(){ reset();
});
Developer | Yang Li |
Username | aussieyang |
Uploaded | July 13, 2022 |
Rating | 3 |
Size | 2,373 Kb |
Views | 44,528 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Battleships | 2,879 Kb |
Click Me, Name Me | 2,113 Kb |
Mac Bar | 2,204 Kb |
Battleships Starter | 2,429 Kb |
Simple Hamburger Menu | 2,099 Kb |
Googly Eye | 2,468 Kb |
Birthday Party Starter | 1,629 Kb |
Responding Boxes | 1,943 Kb |
PokemonJourney | 2,688 Kb |
Fellowship of the Ring | 2,639 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Iron Man SVG Loading Animation | Andythayer | 3,069 Kb |
A Pen by Sooba | Sooba | 2,516 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Hexagons | Ashmind | 4,360 Kb |
Experiments with Vertical Centering | KatieK2 | 3,924 Kb |
Javascript Welcome | Peterlewicki | 1,573 Kb |
Cloudy Spiral CSS animation | Hakimel | 6,587 Kb |
Image grid with captions | Mchernin34 | 2,222 Kb |
Dribbble Template | ExtremelyGinger | 2,204 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!