 |
| Coin Flip Game using html css javascript |
In this article, we given a Coin Flip Game using html css javascript a project. Coin Flip Game is the unique project where the coin is flipped as per the random value in head or tail form. In this project, we added html for structure, css for styling and design, js for flipping functionality and images of head and tail. It is a common game that we mostly played which aims to fun.
So, Must try this project for practice and use in vs code to check how it works. We have given a complete source code of Coin Flip Game using html css javascript. Let's go and check the source code as given below -
To add this project in vs code, follow the given process :-
1) Create a New folder in file manager name as - Coin-flip-game.
2) Open the folder in VS code.
3) Add file name as - index.html and copy the html code as given.
4) Add another file name as - style.css and copy the css code as given.
5) Add next file name as - script.js and copy the javascript code as given.
6) Add head and tail images in the folder.
7) Then run the code or check the preview with code preview extension in vs code.
Coin Flip Game using html css javascript source code
Here we given a html, css and js source code with head and tail image of Coin Flip Game project as given -
HTML
In HTML, we linked a css and js file for styling and functionality. Added a container, heading, image, button and result. Copy the given html code and paste it into index.html file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Coin Flip Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>Coin Flip Game</h1>
<div class="coin">
<img id="coin-face" src="head-coin.png" alt="Coin Face">
</div>
<button id="flip-btn">Flip Coin</button>
<p id="result"></p>
</div>
<script src="script.js"></script>
</body>
</html>CSS
In css, we styled a container of the game. Added a animation and responsiveness for better look. Added a flipping effect animation to flip the coin at the time when user click on button. Copy the given css code and paste it into style.css file.
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(135deg, #74ebd5, #acb6e5);
}
.container {
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 15px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
max-width: 90%;
width: 400px;
position: relative;
transition: transform 0.3s ease;
}
.container:hover {
transform: scale(1.02);
}
h1 {
margin-bottom: 20px;
font-size: 2em;
color: #333;
}
.coin {
margin-bottom: 20px;
perspective: 1000px;
}
.coin img {
width: 100%;
max-width: 200px;
height: auto;
display: block;
margin: 0 auto;
transition: transform 0.8s;
}
.flipping {
animation: flip 0.8s forwards;
@keyframes flip {
0% {
transform: rotateY(0deg);
}
50% {
transform: rotateY(180deg);
}
100% {
transform: rotateY(360deg);
}
}
}
button {
padding: 12px 24px;
font-size: 1.1em;
cursor: pointer;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 8px;
transition: background-color 0.3s, transform 0.2s;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
button:active {
background-color: #004494;
transform: scale(1);
}
#result {
font-size: 1.3em;
font-weight: bold;
color: #333;
}
@media (max-width: 600px) {
.container {
padding: 15px;
width: 90%;
}
h1 {
font-size: 1.5em;
}
button {
font-size: 1em;
padding: 10px 20px;
}
#result {
font-size: 1.1em;
}
}
@media (max-width: 400px) {
.container {
padding: 10px;
width: 95%;
}
h1 {
font-size: 1.2em;
}
button {
font-size: 0.9em;
padding: 8px 16px;
}
#result {
font-size: 1em;
}
}Javascript
In javascript, we added a functionality to flip the head and tail coin with random function. After flipping, it shows the result as its head or tail. Copy the given javascript code and paste it into script.js file.
document.addEventListener('DOMContentLoaded', () => {
const flipButton = document.getElementById('flip-btn');
const resultText = document.getElementById('result');
const coinFace = document.getElementById('coin-face');
flipButton.addEventListener('click', () => {
coinFace.classList.add('flipping');
setTimeout(() => {
const flipResult = Math.random() < 0.5 ? 'heads' : 'tails';
if (flipResult === 'heads') {
coinFace.src = 'head-coin.png';
resultText.textContent = 'It\'s Heads!';
} else {
coinFace.src = 'Tail-coin.png';
resultText.textContent = 'It\'s Tails!';
}
coinFace.addEventListener('animationend', () => {
coinFace.classList.remove('flipping');
}, { once: true });
}, 400);
});
});Images (Head and tail coin)
Click on the button and download images of the head and tail. After downloading, add this images in folder without changing name -
Output
Check this output of Coin Flip Game project -
Also see this -
Hope this helps you to know about Coin Flip Game using html css javascript with source code. If you have any confusion or query then you can contact us on our coding community.
Checkout others projects and information on our website for more and join our coding community on telegram to get knowledge about coding with proper material such as notes, tutorials, projects and more.
Tags:
projects