Hi am trying to create a card game. I have to show the cards using text, but i cant find the code to update text when the player change the cards. I used to try using "document.write" but as i learnt its not updateable. Any help?
<!DOCTYPE html>
<html>
<head>
<link rel="icon" type="image/png" href="c://Users/user/Desktop/JavaScript/favicon.png"/>
<title>
MemoryX
</title>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.8.21/jquery-ui.min.js"></script>
<script src="jquery.ui.touch-punch.min.js"></script>
</script>
<script>
var arr1=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
var deck=[1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0,25,1,2,3,4,5,6,7,8,9,0];
var me=[1,1,1,1];
var pc=[1,1,1,1];
var xame=new Array();
var images=new Array("ace.jpg","joker.png","papas.jpg","queenpikk.jpg");
// var me=new Array();
//var pc=new Array();
for (var i=0;i<4;i++)
{
//finds the cards of the real player
var randomnum=Math.floor(Math.random()*53);
me[i]=arr1[randomnum];
}
for (var i=0;i<4;i++)
{
//finds the cards of the pc player
var randomnum=Math.floor(Math.random()*53);
pc[i]=arr1[randomnum];
}
$(document).ready(function(){
//Make element droppable
$("#trapula").draggable({
//cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert back to its initial position
//containment: "document",
helper: "clone",
//cursor: "move"
});
$("#start").click(function () {
$("#1").fadeOut();
$("#2").fadeIn();
//checks the #no to bring the aces
if(me[0]==1){
document.getElementById("first").src = "ace.jpg";
}
if(me[3]==1){
document.getElementById("fourth").src = "ace.jpg";
}
//checks the #no to bring the 2's
if(me[0]==2){
document.getElementById("first").src = "two.png";
}
if(me[3]==2){
document.getElementById("fourth").src = "two.png";
}
if(me[0]==3){
document.getElementById("first").src = "three.jpg";
}
if(me[3]==3){
document.getElementById("fourth").src = "three.jpg";
}
if(me[0]==4){
document.getElementById("first").src = "card_41.png";
}
if(me[3]==4){
document.getElementById("fourth").src = "card_41.png";
}
if(me[0]==5){
document.getElementById("first").src = "card_42.png";
}
if(me[3]==5){
document.getElementById("fourth").src = "card_42.png";
}
//checks the #no to bring the 6's
if(me[0]==6){
document.getElementById("first").src = "six.gif";
}
if(me[3]==6){
document.getElementById("fourth").src = "six.gif";
}
//checks the #no to bring the 7's
if(me[0]==7){
document.getElementById("first").src = "seven.jpg";
}
if(me[3]==7){
document.getElementById("fourth").src = "seven.jpg";
}
//checks the #no to bring the 8's
if(me[0]==8){
document.getElementById("first").src = "eight.jpg";
}
if(me[3]==8){
document.getElementById("fourth").src = "eight.jpg";
}
if(me[0]==9){
document.getElementById("first").src = "card_46.png";
}
if(me[3]==9){
document.getElementById("fourth").src = "card_46.png";
}
//checks the #no to bring the 10's
if(me[0]==0){
document.getElementById("first").src = "ten.jpg";
}
if(me[3]==0){
document.getElementById("fourth").src = "ten.jpg";
}
//checks the #no to bring the jokers
if(me[0]==25){
document.getElementById("first").src = "joker.png";
}
if(me[3]==25){
document.getElementById("fourth").src = "joker.png";
}
//hide visible cards after 4seconds
$("#2").show().delay('4000').hide('fast');
$("#1").show().delay('4000').fadeIn();
//show a set of cards for both players to pull
$("#3").fadeIn();
});
// while deck is pressed once, the players take both a card
// and can replace it with one of their cards optionally
$("#trapula").bind("drag", function(){
for(var i=0;i<53;i++)
//make a deck for players to replace the cards with theirs
{
var randomn=Math.floor(Math.random()*53);
xame[i]=deck[randomn];
}
//loop to show each time different card from deck
for(var i=0;i<53;i++)
{
//shows the cards of deck
if(xame[i]==0){
document.getElementById("trapula").src = "ten.jpg";
}
if(xame[i]==1){
document.getElementById("trapula").src = "ace.jpg";
}
if(xame[i]==2){
document.getElementById("trapula").src = "two.png";
}
if(xame[i]==3){
document.getElementById("trapula").src = "card_14.png";
}
if(xame[i]==4){
document.getElementById("trapula").src = "card_41.png";
}
if(xame[i]==5){
document.getElementById("trapula").src = "card_42.png";
}
if(xame[i]==6){
document.getElementById("trapula").src = "card_43.png";
}
if(xame[i]==7){
document.getElementById("trapula").src = "card_44.png";
}
if(xame[i]==8){
document.getElementById("trapula").src = "eight.jpg";
}
if(xame[i]==9){
document.getElementById("trapula").src = "card_46.png";
}
//checks the #no to bring the jokers
if(xame[i]==25){
document.getElementById("trapula").src = "joker.png";
}
//when the player choose the card position #1 from the deck
// it transfer it to the player
//it doesnt work
$( "#hidden1" ).droppable({
drop: function()
{
alert('The first card changed');
}
});
$( "#hidden2" ).droppable({
drop: function()
{
alert('The 2nd card changed');
}
});
$( "#hidden3" ).droppable({
drop: function()
{
alert('The 3rd card changed');
}
});
$( "#hidden4").droppable({
drop: function()
{
alert('The 4th card changed');
}
});
}
});
$("#stop").click(function () {
$("#2").fadeOut();
$("#1").fadeIn();
});
//show the cards
//$("#deckCard").click(function (){
// for(var i;i<4;i++){
//document.write('My card is:'+me[i]);
//}
});
for (var i=0;i<4;i++)
{
//show the cards
document.write(" My card is: "+me[i]);
document.write("<br/>");
document.write(" Your card is: "+pc[i]);
document.write("<br/>");
}
</script>
</head>
<body>
<button id="start"> Start</button>
<button id="stop"> Stop</button>
<button id="deckCard">New Card</button>
<p id="1" >
<img src="cardb.png" id="hidden1" width="100px" height="100px" />
<img src="cardb.png" id="hidden2" width="100px" height="100px" />
<img src="cardb.png" id="hidden3" width="100px" height="100px" />
<img src="cardb.png" id="hidden4" width="100px" height="100px" />
</p>
<div id="2" style="display: none;">
<img src="papas.jpg" id="first" width="100px" height="100px" />
<img src="cardb.png" id="second" width="100px" height="100px" />
<img src="cardb.png" id="third" width="100px" height="100px" />
<img src="papas.jpg" id="fourth" width="100px" height="100px" />
<img src="joker.png" id="hidden" width="100px" height="100px" style="display:none">
</div>
<div id="3" style="display: none;">
<img src="cardb.png" id="trapula" width="100px" height="100px"/>
</div>
</body>
</html>
