Create slote machine game using Javascript and Html
Create slot machine game using Javascript and Html
In this post we will create a simple slot machine game using javascript and Html.
How it work
Simple slot machine game created with javascript and html.
It work base on the random number generator and We set time
Interval
- It will give you 100 coin at the begining
- At each roll it will cut 10 coin from yours coin
- If all the number are same then you will get 100 coin
- If the numbers are not same then you will get the fail message
Enjoy the game rate my game out of 10.
If you have any problem regarding to any thing in javascript and html
or you have some ideas then tell us in the command box.
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
.game-area {
padding :10px;
margin :5px;
background :transparent ;
box-shadow :0 0 8px 8px rgba(0,0,0,0.2);
border-radius :10px;
}
.info-box
{
height :50px;
text-align :center ;
border-bottom :1px solid #ddd ;
}
.current-coin
{
float :left;
}
.fee{
margin-right :5px;
}
.reward {
float :right ;
}
.game{
text-align :center ;
height :100px;
line-height :100px;
}
.wheel{
padding :15px 10px 15px 10px;
background:transparent ;
border-radius :8px;
font-size :20px;
border :1px solid #ddd ;
}
.btn
{
padding :10px 20px 10px 20px;
background :teal;
color :#fff ;
border-radius :5px;
outline:0;
border:0;
}
.loader
{
width :100%;
height :20px;
border :1px solid #ddd;
margin:0;
padding :0;
}
.bar
{
height :100%;
width :0;
background :teal;
color :#fff;
}
</style>
</head>
<body>
<div class="game-area">
<div class="info-box">
<span id="cc" class="current-coin">Coin : 100</span>
<span id="fee" class="fee">Fee : 10</span>
<span class="rew" class="reward">Reward : 100</span>
</div>
<div class="game">
<span id="w1" class="wheel">0</span>
<span id="w2" class="wheel">0</span>
<span id="w3" class="wheel">0</span>
</div>
<div class="loader">
<div id="bar" class="bar"></div>
</div>
</div>
<br><br>
<button id="but" class="btn" onclick="roll()">Roll</button>
<script type="text/javascript">
var cc = document.getElementById("cc");
var fee = document.getElementById("fee");
var rew = document.getElementById("rew");
var w1 = document.getElementById("w1");
var w2 = document.getElementById("w2");
var w3 = document.getElementById("w3");
var but = document.getElementById("but");
var bar = document.getElementById("bar");
//
var ccoin=100;
var fees=10;
var reward=100;
var wl1=0, wl2=0, wl3=0;
var time;
var c1, c2, c3;
var counter=0;
function roll(){
if(checkCoin()==false){
alert("You have less money");
}else{
ccoin=ccoin-fees;
cc.innerHTML ="Coin : "+ccoin ;
but.disabled=true ;
bar.innerHTML ="";
bar.style.background ="teal";
playGame();
}
}
function checkCoin(){
if(ccoin<10){
return false;
}else{
return true;
}
}
function playGame(){
function stop(){
clearInterval(time);
but.disabled =false ;
bar.style.width ="100%";
counter =0;
if(c1==c2&&c2==c3&&c3==c1){
bar.innerHTML ="You won 100 coin.";
ccoin =ccoin+reward;
cc.innerHTML = "Coin : "+ccoin ;
bar.style.background ="green";
}else{
bar.style.background = "red";
bar.innerHTML ="You loose. ";
}
}
setTimeout(stop, 5000);
function generate(){
c1 = Math.floor(Math.random()*6);
c2 = Math.floor(Math.random()*6);
c3 = Math.floor(Math.random()*6);
w1.innerHTML = c1;
w2.innerHTML = c2;
w3.innerHTML = c3;
counter+=10;
var per = (counter/4910)*100;
bar.style.width= per+"%";
}
time = setInterval(generate, 10);
}
</script>
</body>
</html>
Comments
Post a Comment