JavaScript - Los elementos no se cargan como debe

 
Vista:
Imágen de perfil de catyuska85

Los elementos no se cargan como debe

Publicado por catyuska85 (2 intervenciones) el 29/11/2016 17:34:25
Hola a todos, seguramente es una chorradilla lo que voy a preguntar, pero tengo hecho un juego de tetris y dentro de la misma pagina de tetris tengo que agregar un formulario y algunos elementos mas, el problemas es que o se me carga el formulario y el juego no, o al revés...
*Este es el html: con un formulario de prueba

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<body style="background-color:gray;" onload='eventoCargar()' onkeydown="tecla(event)">
    <div id='tetris'></div>
 
<form>
  <select id="mySelect" size="4">
     <option>Apple</option>
     <option>Orange</option>
     <option>Pineapple</option>
     <option>Banana</option>
   </select>
</form>
 
<p>Click the button to display the number of options in the drop-down list.</p>
 
<button onclick="myFunction()">Try it</button>
 
<p id="demo"></p>
 
</body>

* aqui el javascript: Solamente del formulario.

1
2
3
4
function myFunction() {
	var x = document.getElementById("mySelect").options.length;
	document.getElementById("demo").innerHTML = "Found " + x + " options in the list.";
}

Si necesitan algo más de código avisenme, pero es sólo esa duda. Muchas gracias ;)
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Los elementos no se cargan como debe

Publicado por xve (2100 intervenciones) el 29/11/2016 20:32:21
Por la información que das, no se muy bien como ayudarte... entiendo que dentro del id=tetris se carga el juego, no? pero como se carga el juego?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de catya

Los elementos no se cargan como debe

Publicado por catya (2 intervenciones) el 29/11/2016 23:47:52
Mejor te paso el codigo completo lo que pasa que es un poco largo, asi se verá mejor:

*codigo javascript:

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
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
window.onload
        var velocidad=50000; //velocidad del juego
        var fpi, cpi, rot; //fila, columna y rotación de la ficha
        var tablero;  //matriz con el tablero
        var pieza=0; //pieza
    var record=0;  //almacena la mejor puntuación
    var lineas=0;   //almacena la  puntuación actual
        var pos=[  //Valores referencia de coordenadas relativas
              [0,0],
              [0,1],
              [-1,0],
              [1,0],
              [-1,-1],
              [0,-1],
              [1,-1],
              [0,-2]
        ];
        var piezas=[  //Diseño de las piezas, el primer valor de cada fila corresponde con el número de rotaciones posibles
              [4,0,1,2,3],
              [4,0,1,5,6],
              [4,0,1,5,4],
              [2,0,1,5,7],
              [2,0,2,5,6],
              [2,0,3,5,4],
              [1,0,5,6,3]
    ];
 
 
    //Genera una nueva partida inicializando las variables
    function nuevaPartida(){
                velocidad=50000;
                tablero=new Array(20);
                for (var n=0;n < 20;n++){
                     tablero[n]=new Array(9);
                     for (var m=0;m < 9;m++){
                          tablero[n][m]=0;
                     }
                }
        lineas=0;
                nuevaPieza();
    }
    //Detecta si una fila columna del tablero está libre para ser ocupada
        function cuadroNoDisponible(f,c){
        if (f < 0) return false;
        return (c < 0 || c >= 9 || f >= 20 || tablero[f][c] > 0);
    }
    //Detecta si la pieza activa colisiona fuera del tablero o con otra pieza
        function colisionaPieza(){
        for (var v=1;v < 5;v++){
            var des=piezas[pieza][v];
            var pos2=rotarCasilla(pos[des]);
            if (cuadroNoDisponible(pos2 [ 0 ] +fpi, pos2 [ 1 ]+cpi)){
                return true;
            }
        }
        return false;
        }
    //Detecta si hay lineas completas y si las hay las computa y borra la linea desplazando la submatriz superior
        function detectarLineas(){
        for (var f=0;f < 20;f++){
            var contarCuadros=0;
            for (var c=0;c < 9;c++){
                if (tablero[f][c]>0){
                    contarCuadros++;
                }
            }
            if (contarCuadros==9){
                for (var f2=f;f2 > 0;f2--){
                    for (var c2=0;c2 < 9;c2++){
                        tablero[f2][c2]=tablero[f2-1][c2];
                    }
                }
                lineas++;
            }
        }
    }
    //Baja la pieza, si toca otra pieza o el suelo, saca una nueva pieza
        function bajarPieza(){
        fpi=fpi+1;
        if (colisionaPieza()){
            fpi=fpi-1;
            for (v=1;v < 5;v++){
                des=piezas[pieza][v];
                var pos2=rotarCasilla(pos[des]);
                if (pos2 [ 0 ] +fpi >= 0 && pos2 [ 0 ] +fpi < 20 &&
                    pos2 [ 1 ] +cpi >=0 && pos2 [ 1 ] +cpi < 9){
                    tablero[pos2 [ 0 ] +fpi][pos2 [ 1 ] +cpi]=pieza+1;
                }
            }
            detectarLineas();
            //Si hay algun cuadro en la fila 0 reinicia el juego
            var reiniciar=0;
 
            for (var c=0;c < 9;c++){
                if (tablero [ 0 ] [ c ] !=0){
                    reiniciar=1;
                    window.alert("Perdistes! Cierra este mensaje para jugar de nuevo ;)");
                }
            }
            if (reiniciar==1){
                if (lineas > record){
                    record=lineas;
                }
                nuevaPartida();
            }else{
                nuevaPieza();
            }
        }
        }
    //Mueve la pieza lateralmente
    function moverPieza(des){
        cpi=cpi+des;
        if (colisionaPieza()){
            cpi=cpi-des;
        }
    }
    //Rota la pieza según el número de rotaciones posibles tenga la pieza activa. (posición 0 de la pieza)
    function rotarPieza(){
                rot=rot+1;
                if (rot==piezas[pieza] [ 0 ] ){
            rot=0;
        }
        if (colisionaPieza()){
            rot=rot-1;
                    if (rot==-1){
                rot=piezas[pieza] [ 0 ] -1;
            }
        }
    }
    //Obtiene unas coordenadas f,c y las rota 90 grados
    function rotarCasilla(celda){
        var pos2=[celda [ 0 ] , celda [ 1 ] ];
        for (var n=0;n < rot ;n++){
            var f=pos2 [ 1 ];
            var c=-pos2 [ 0 ] ;
            pos2 [ 0 ] =f;
            pos2 [ 1 ] =c;
        }
        return pos2;
    }
    //Genera una nueva pieza aleatoriamente
    function nuevaPieza(){
        cpi=3;
        fpi=0;
        rot=0;
        pieza=Math.floor(Math.random()*7);
        }
    //Ejecución principal del juego, realiza la animación y repinta
        function tick(){
        bajarPieza();
        pintar();
        setTimeout('tick()', velocidad/90);
        }
    //Pinta el tablero (lo genera con html) y lo plasma en un div.
    function pintar(){
        var lt=" <";
        var des;
        var html="<table class='tetris'>"
        for (var f=0;f < 20;f++){
            html+="<tr>";
            for (var c=0;c < 9;c++){
                var color=tablero[f][c];
                if (color==0){
                    for (v=1;v < 5;v++){
                        des=piezas[pieza][v];
                        var pos2=rotarCasilla(pos[des]);
                        if (f==fpi+pos2 [ 0 ]   && c==cpi+pos2 [ 1 ] ){
                            color=pieza+1;
                        }
                    }
                }
                html+="<td class='celda" + color + "'/>";
                    }
            html+=lt+"/tr>";
                }
        html+=lt+"/table>";
        html+="<br />Lineas : " + lineas;
        html+="<br />Record : " + record;
        document.getElementById('tetris').innerHTML=html;
                velocidad=Math.max(velocidad-1,500);
 
    }
    //Al iniciar la pagina inicia el juego
        function eventoCargar(){
 
                nuevaPartida();
                setTimeout('tick()', 1);
                document.getElementById("formulario").addEventListener("submit", validar, false);
 
        }
    //Al pulsar una tecla
        function tecla(e){
                var characterCode = (e && e.which)? e.which: e.keyCode;
                switch (characterCode){
        case 37:
                        moverPieza(-1);
            break;
        case 38:
            rotarPieza();
            break;
        case 39:
                        moverPieza(1);
            break;
        case 40:
            bajarPieza();
            break;
                }
        pintar();
        }

ya luego el html completo es el siguiente:

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
<!DOCTYPE>
<html lang="en">
<head>
	<meta charset="utf-8"><!--para caracteres extraños-->
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>El rincón friki</title>
	<script type="text/javascript" src="javascript.js"></script>
	<link href="estilo.css" rel="stylesheet" type="text/css">
 
    <!-- BOOSTRAP enlace a las librerias-->
<!-- 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/1.12.4/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
 
 
<body style="background-color:gray;" onload='eventoCargar()' onkeydown="tecla(event)">
    <div id='tetris' align="center"/>
   	<form class="navbar-form navbar-left" role="search">
      <div class="form-group">
    	<input type="radio" name="opcion1">Me gustó
    	<input type="radio" name="opcion2">Está bien
    	<input type="radio" name="opcion3">No me gustó
    	<input type="submit" name="up">Enviar
      </div>
    </form>
</body>
</html>

Espero que sirva de ayuda, ya que en parte es copy paste de internet, y funcionaba bien hasta que le puse el formulario. Por cierto lo he modificado desde la anterior publicación, de todas formas se ve ahí xD. Muchas gracias. Saludos ;)
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar