juego de cartas truco problema al mostrar mazo
Publicado por nicolas (4 intervenciones) el 30/07/2018 02:47:17
hola, estoy haciendo un proyecto que tengo que presentar la idea se basa en copiar el juego de cartas "truco" en con javascript html y css, lo que quiero hacer es que cree 40 cartas con sus respectivos palos del 1 al 7 y del 7 al 12 y que a cada "carta" le corresponda una imagen descargada de internet, yo ya cree 3 formatos de cartas 3 para mi y 3 para el oponente logicamente solo se mostraran dadas vuelta las 3 mias, la idea es que mezcle, que cree 6 numeros al azar dentro de esos numeros, y que me muestre 3 de ellos con sus respectivas imagenes aca les paso el codigo, use un poco de css para acomodar la imagen, no influye en las cartas
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>proyectoimagen2</title>
<!--TEXTO CSS DONDE ESTA LA IMAGEN--><link rel="stylesheet">
<style type="text/css">
body{background: url(https://image.freepik.com/foto-gratis/mesa-de-madera-vacia-con-borrosa-cafe-montaje-de-productos-de-fondo-de-pantalla_1936-7.jpg) no-repeat center fixed;
background-size: 100% 100%;
background-attachment:fixed;
}</style>
</head>
<body>
<div>
<table align="right" height="650px" width="180px" border="1">
<tr>
<td height="100px" valign="top" align="center">JUGADOR 1</td>
<td height="100px" valign="top" align="center">PC</td>
</tr>
<tr>
<td height="10px" align="center"> <input type="button" value="ENVIDO"onclick=""/></td>
<td height="15px" align="center"> <input type="button" value="TRUCO" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="REAL ENVIDO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="RE TRUCO" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="FALTA ENVIDO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="VALE 4" onclick=""/></td>
</tr>
<tr>
<td height="15px" align="center"><input type="button" value="QUIERO" onclick=""/></td>
<td height="15px" align="center"><input type="button" value="NO QUIERO" onclick=""/></td>
</tr>
</table>
</div>
</body>
<head>
<title>crear mazo</title>
<script type="text/javascript">
function carta(palo,figura,valor){
this.palo = palo;
this.figura = figura;
this.valor = valor;
}var palos = new Array("oros", "copas", "espadas", "bastos");
var cartas = new Array("as", "dos", "tres", "cuatro", "cinco", "seis", "siete", "sota", "caballo", "rey");
var tantos = new Array(11, 0, 10, 0, 0, 0, 0, 2, 3, 4);
Array.prototype.crear=function() {
var k = 0;for(i = 0; i < 4; i++){
for(j = 0; j < 10; j++){
this[k]= new carta(palos[i], cartas[j], tantos[j]);
k++;
} } }var baraja=Array(40);
baraja.crear();
function ver(baraja){
for(x = 0; x < 40; x++){
document.write( baraja[x].palo + "=" + baraja[x].valor + "<br/>");
var imagenes = "<img src=“baraja/" + baraja[x].figura + "_de_" + baraja[x].palo + ".png” heigth=“96” width=“63”/>";
} }function barajar(baraja){
for(i = 1; i < baraja.cambios; i++){
var cartaA =parseInt(Math.random() * 40);
do{var cartaB =parseInt(Math.random() * 40);
}while(cartaB == cartaA);
var aux;
aux = baraja[cartaB];
baraja[cartaB] = baraja[cartaA];
baraja[cartaA] = aux;
} }Array.prototype.ordenar = function(){
this.sort(function(a,b){
if(a.figura > b.figura){
return 1;
}if(a.figura < b.figura){
return -1; }});
}ver(baraja);
baraja.ordenar();
ver(baraja);
Array.prototype.cambios = 10;
barajar(baraja);
ver(baraja);
</script>
<style type="text/css">
body {heih: 15em;}
.carta {font-size: 2em; background-color: ; border-radius: .3em; width: 2em; height:3em; font-weight: bold; font-family: arial, verdana, sans-serif; padding: 0.2em; line-height: 1.5em; }
.carta { background: url("https://tarot10.net/wp-content/plugins/pepeTarot/img/carta.png"); height: 3.5em; background-position: 50% 50%; position: absolute; letter-spacing: -0.06em; overflow: hidden; line-height: 1em; }
#naipe0{position: absolute; top: 12.8em; left: 6em; font-size: 40px;}
#naipe1{position: absolute; top: 12.8em; left: 16em; font-size: 40px;}
#naipe2{position: absolute; top: 12.8em; left: 26em;font-size: 40px;}
#naipe3{position: absolute; top: 20em; right: 27em; font-size: 20px;}
#naipe4{position: absolute; top: 20em; left: 20em; font-size: 20px;}
#naipe5{position: absolute; top: 20em; left: 33.2em; font-size: 20px;}
</style>
</head>
<body>
<input type=button value="JUEGA" onclick="">
<div class="carta" id=naipe0>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe1>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe2>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe3 type="button" value="" onclick="face back">
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe4>
<div class="face back"></div>
<div class="face front"></div>
</div>
<div class="carta" id=naipe5>
<div class="face back"></div>
<div class="face front"></div>
</div>
</head>
</html>
Valora esta pregunta
0