Javascript Random Number Game
Learn to easily create a javascript random number game...
Below is the random number game created in javascript
| Roll# | Player 1 | Player 2 | ||
|---|---|---|---|---|
| 1 |
Load Another Game
This javascript game contains 2 player. When player 1 clicks the button, javascript creates a random number and puts it next to player 1 button. Same thing happens for player 1.
The winner is determined by player with the higher number.
You can load more games by clicking on "Load Another Game" button. The max number of games you can play is 5. Once the max game limit is reached, you will have an option to reload (start all over again) the game.
Below it the code for Javascript Random Number Game.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Random Number Game </title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="This ">
<meta name="author" content="Code With Mark">
<meta name="authorUrl" content="http://codewithmark.com">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<script type="text/javascript">
$(document).ready(function()
{
var id = function (argument)
{
return Math.random().toString(36).substr(2);
}
});
</script>
<body>
<div style="padding:10px;"></div>
<div class="container" style="padding:25px;">
<!--[heading > start]-->
<div class="text-center">
<h1 >Javascript Random Number Game</h1>
</div>
<!--[heading > end]-->
<!--[line breaks]-->
<br><br>
<div class=" panel panel-default">
<div class="panel-body">
<table class="table table-hover game_table">
<thead >
<tr>
<th class="text-center">Roll#</th>
<th class="text-center"></th>
<th class="text-center">Player 1</th>
<th class="text-center"></th>
<th class="text-center">Player 2</th>
</tr>
</thead>
<tbody class="game_body">
<tr class="text-center game_row">
<td class="row_num">1</td>
<td><button type="button" class="btn btn-default btn_player_1">Play</button></td>
<td class="player_1_num bg-warning" style="padding:10px;"> </td>
<td><button type="button" class="btn btn-default btn_player_2">Play</button></td>
<td class="player_2_num bg-warning" style="padding:10px;"> </td>
</tr>
</tbody>
</table>
<br>
<div class=" text-center text-primary 1container" style="padding:10px;" >
<span class="multi_game_winner " ></span>
</div>
<br>
<div class="text-center "><span class="btn btn-success btn_play_again">Load Another Game<span></div>
<div class="text-center"><span class="btn btn-primary btn_reload" style="display:none;">Reload Game<span></div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function()
{
var array_rand_num = [];
function player_rand_num ()
{
var d = Math.floor(Math.random() * 10) + 1;
return d;
}
//--->reload game > start
$(document).on('click', '.btn_reload', function(event)
{
event.preventDefault();
$('.game_body').find('tr').each(function(i1, v1)
{
var e1 = $(this);
var r1 = e1.find('.row_num').html();
if(r1 != 1)
{
e1.remove();
}
});
var ele = $('.game_table').find('tr').last();
ele.find('.row_num').html(1);
ele.find('.player_1_num').html('');
ele.find('.player_2_num').html('');
ele.find('.btn_player_1').prop("disabled",false);
ele.find('.btn_player_2').prop("disabled",false);
$(this).hide();
$('.btn_play_again').show();
$('.multi_game_winner').html('');
});
//--->reload game > end
//--->copy table row > start
$(document).on('click', '.btn_play_again', function(event)
{
event.preventDefault();
//allow only this many games to be played
var row_limit = 3;
//get the current row number
var current_row_count = $('.game_table').find('tr').length;
if(current_row_count >= row_limit )
{
//reached game limit
$(this).hide();
$('.btn_reload').show();
}
//copy last row
var d = $('.game_table').find('tr').last().clone();
//add new row at the bottom of table
$('.game_body').append(d);
//update row number
var ele = $('.game_table').find('tr').last();
ele.find('.row_num').html(current_row_count);
ele.find('.player_1_num').html('');
ele.find('.player_2_num').html('');
ele.find('.btn_player_1').prop("disabled",false);
ele.find('.btn_player_2').prop("disabled",false);
});
//--->copy table row > end
//--->player 1 > start
$(document).on('click', '.btn_player_1', function(event)
{
event.preventDefault();
var num = player_rand_num();
var ele = $(this);
ele.closest('tr').find('.player_1_num').html(num);
ele.prop("disabled",true);
var other_player_num = ele.closest('tr').find('.player_2_num').html();
var p1 = 0;
var p2 = 0
//--->this player loop > start
$('.player_1_num').each(function(i1, v1)
{
var e1 = $.trim($(this).html());
if(e1 != '' )
{
p1 = p1 + parseInt(e1);
}
});
//--->this player loop > end
//--->other player loop > start
$('.player_2_num').each(function(i1, v1)
{
var e1 = $.trim($(this).html());
if(e1 != '' )
{
p2 = p2 + parseInt(e1);
}
});
//--->other player loop > end
if(p1 == p2)
{
$('.multi_game_winner').html('No Winner');
}
else if(p1 > p2)
{
$('.multi_game_winner').html('Winner >>> Player 1');
}
else if (p1 < p2)
{
$('.multi_game_winner').html('Winner >>> Player 2');
}
});
//--->player 1 > end
//--->player 2 > start
$(document).on('click', '.btn_player_2', function(event)
{
event.preventDefault();
var num = player_rand_num();
var ele = $(this);
ele.closest('tr').find('.player_2_num').html(num);
ele.prop("disabled",true);
var other_player_num = ele.closest('tr').find('.player_1_num').html();
var p1 = 0;
var p2 = 0
//--->this player loop > start
$('.player_1_num').each(function(i1, v1)
{
var e1 = $.trim($(this).html());
if(e1 != '' )
{
p1 = p1 + parseInt(e1);
}
});
//--->this player loop > end
//--->other player loop > start
$('.player_2_num').each(function(i1, v1)
{
var e1 = $.trim($(this).html());
if(e1 != '' )
{
p2 = p2 + parseInt(e1);
}
});
//--->other player loop > end
if(p1 == p2)
{
$('.multi_game_winner').html('No Winner');
}
else if(p1 > p2)
{
$('.multi_game_winner').html('Winner >>> Player 1');
}
else if (p1 < p2)
{
$('.multi_game_winner').html('Winner >>> Player 2');
}
});
//--->player 2 > end
});
</script>
</body>
</html>
