I have made this code: its purpose is to press a button and draw cards (5 for me 5 for NPC) whose values of attack and defence are shown in the said fields and then by pressing the Attack or Defence button of player1 the values should be compared with NPC's and show a message as to who is winner. I have searched many posts in this forum but i havent find anything i can use. I am stuck at how i can compare the values that are generated.
PS: game should end after 5 turns and a winner should be declared so i guess a counter should be triggered each time defence or attack button is pressed to save the score.
PS2: first turn is Players1 so i choose if I attack or defend. At second turn NPC should do the same but with random choise. Turn 3 me again and so on...
thank you very much in advance!
//random number 1-50
var arr = []
while(arr.length < 10){
var randomnumber = Math.floor(Math.random()*50) + 1;
if(arr.indexOf(randomnumber) > -1) continue;
arr[arr.length] = randomnumber;
}
//document.write(arr);
$('#input_hidden_field').val(arr);
//random number 1-50
var arr2 = []
while(arr2.length < 10){
var randomnumber2 = Math.floor(Math.random()*50) + 1;
if(arr2.indexOf(randomnumber2) > -1) continue;
arr2[arr2.length] = randomnumber2;
}
//document.write(arr2);
$('#input_hidden_field').val(arr);
var suits = arr;
var numbers = arr2;
var cards = [];
var count = 0;
$(document).ready(function() {
var order = [];
$("#shuffle").click(function() {
count = 0
cards = [];
$("#cards").html("");
for(s in suits) {
var suit = suits[s];
for(n in numbers) {
var num = numbers[n]
var card = {
suit: suit,
number: num,
order: Math.floor(Math.random() * 2500) + 1
};
cards.push(card);
}
}
cards = cards.sort(function(a,b) {
return (a.order < b.order ? -1 : 1)
});
for(var i = 0;i < 1;i++) {
count++;
dispCard(i)
}
return false;
});
$("#draw").click(function() {
if(count < 10 ) {
if(count % 2 == 0 ){
dispCard(count);
count++;
}
if(count % 2 == 1 ){
dispCard2(count);
count++;
}
}
else {alert("You Drew Your 5 Cards");}
});
});
function dispCard(cardNum) {
var i = cardNum
var count = cardNum + 1;
var card = cards[i];
$("#cards").append(count + "-" +"Attack " + card.number + ", Defence " + card.suit + "<br/>");
var attack_value = card.number;
var defence_value = card.suit;
document.getElementById('attackdiv1').innerHTML="Attack Power: " + attack_value;
document.getElementById('defencediv1').innerHTML="Defence Power: " + defence_value;
}
function dispCard2(cardNum2) {
var i = cardNum2
var count = cardNum2 + 1;
var card = cards[i];
$("#cards").append(count + "-" +" NPC: THIS IS MINE " + "<br/>");
var attack_value = card.number;
var defence_value = card.suit;
document.getElementById('attackdiv2').innerHTML="Attack Power: " + attack_value;
document.getElementById('defencediv2').innerHTML="Defence Power: " + defence_value;
}
#bot {
border-style: double;
border-width: 2px;
border-color: #ff794d;
margin: auto;
position: top;
background-color: #bf00ff;
float: left;
height: 25%;
width: 50%;
clear: left;
}
#player1 {
border-style: double;
border-width: 2px;
border-color: #ff794d;
margin: auto;
position: top;
background-color: #0080ff;
float: left;
height: 50%;
width: 50%;
clear: left;
}
#playersbox {
border-style: double;
border-width: 2px;
border-color: #ff794d;
margin: auto;
background-color: #0080ff;
float: right;
height: 50%;
width: 50%;
position: top;
}
#botsbox {
border-style: double;
border-width: 2px;
border-color: #ff794d;
margin: auto;
background-color: #bf00ff;
position: top;
float: right;
height: 25%;
width: 50%;
}
#attackdiv1, #attackdiv2 {
border-radius: 8px;
background-color: #66cc00;
border: 2px solid #66cc00;
color: white;
height: 50%;
width: 40%;
}
#defencediv1, #defencediv2 {
border-radius: 8px;
background-color: #ffc61a;
border: 2px solid #ffc61a;
height: 50%;
width: 40%;
}
img{
float: left;
width: 150px;
height: 150px;
}
h2{
color: #e6ac00;
}
#attack1 , #attack2 {
border-radius: 8px;
background-color: #66cc00;
border: 2px solid #66cc00;
color: white;
}
#defence1, #defence2 {
border-radius: 8px;
background-color: #ffc61a;
border: 2px solid #ffc61a;
}
#drawb, #shuffle {
border-radius: 8px;
background-color: #85a3e0;
border: 2px solid #85a3e0;
color: white;
}
#draw{
margin: auto;
height: auto;
width: auto;
position: bottom;
float: left;
border: 2px solid #cc6600;
color: red;
font-weight: 800;
background-color: black;
background-position: center;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Super powers</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="4.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="new.js"></script>
</head>
<body>
<div id="player1" class="container">
<img src="my_images\player1.png">
<h2> Player1 </h2>
</img><br>
<button type="button" id="attack1">Attack</button><br>
<button type="button" id="defence1">Defence</button> <br>
</div>
<div id="playersbox" class="container">
<img src="my_images\playersbox.png"><br>
<div id="attackdiv1">Attack Power: </div>
<div id="defencediv1">Defence Power: </div>
</div>
<div id="bot" class="container">
<img src="my_images\bot.png">
<h2>NPC</h2>
</img><br>
<button type="button" id="attack2">Attack</button><br>
<button type="button" id="defence2">Defence</button> <br>
</div>
<div id="botsbox" class="container">
<img src="my_images\botsbox.png"><br>
<div id="attackdiv2">Attack Power: </div>
<div id="defencediv2">Defence Power: </div>
</div>
<div id="draw">
<button id="shuffle">Shuffle and Draw First Card</button><br>
<button id="drawb">Draw</button><br>
<div id="cards" class="transbox"></div>
</div>
</body>
</html>
Aucun commentaire:
Enregistrer un commentaire