Código de JavaScript - Juego del pong en JavaScript

Imágen de perfil

Juego del pong en JavaScriptgráfica de visualizaciones


JavaScript

Publicado el 17 de Abril del 2021 por Administrador (714 códigos)
453 visualizaciones desde el 17 de Abril del 2021
Código que muestra como hacer el juego del pong en javascript con dos usuarios utilizando el mismo teclado.
El usuario de la izquierda utiilza las teclas Q y A y el usuario de la derecha las teclas O y L

juego-pong-javascript

20201123

Publicado el 17 de Abril del 2021gráfica de visualizaciones de la versión: 20201123
453 visualizaciones desde el 17 de Abril del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

Video que explica como crea el juego


Forma parte de pongjavascript
 
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
<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Pong</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        body, html{
            height: 100%;
            background: #000;
        }
        #ball{
            width: 20px;
            height: 20px;
            background: #000;
            position:absolute;
            left:10px;
            top:0px;
            border: 2px solid #fff;
            border-radius: 10px;
        }
 
        .bar{
            width: 20px;
            height: 100px;
            background: #000;
            border: 2px solid #fff;
        }
 
        #bar1{
            top: 20px;
            float: left;
            position: absolute;
        }
        #bar2{
            top: 20px;
            right:0px;
            position: absolute;
        }
        #line{
            width:50%;
            border-right: #fff dashed 5px;
            height: 100%;
        }
    </style>
</head>
<body>
    <div id="ball"></div>
    <div id="bar1" class="bar"></div>
    <div id="bar2" class="bar"></div>
    <div id="line"></div>
</body>
<script>
var game = function(){
    let time = 50;
    let movement = 20;
    let movementBar = 20;
    let width = document.documentElement.clientWidth - movement;
    let height = document.documentElement.clientHeight - movement;
    let controlGame;
    let player1;
    let player2;
 
    function start(){
        init();
        controlGame = setInterval(play, time);
    }
 
    function init(){
        ball.style.left = 0;
        ball.state = 1;
        ball.direction = 1; // right 1, left 2
        player1 = new Object();
        player2 = new Object();
        player1.keyPress = false;
        player1.keyCode = null;
        player2.keyPress = false;
        player2.keyCode = null;
    }
 
    function stop(){
        clearInterval(controlGame);
        document.body.style.background = "#f00";
    }
 
    function play(){
        moveBall();
        moveBar();
        checkIfLost();
    }
 
    function checkIfLost(){
        if(ball.offsetLeft >= width){
            stop();
            console.log("punto player 1");
        }
        if(ball.offsetLeft <= 0){
            stop();
            console.log("punto player 2");
        }
    }
 
    function moveBall(){
        checkStateBall();
        switch(ball.state){
            case 1: // derecha, abajo
                ball.style.left = (ball.offsetLeft + movement) +"px";
                ball.style.top = (ball.offsetTop + movement) +"px";
                break;
            case 2: // derecha, arriba
                ball.style.left = (ball.offsetLeft + movement) +"px";
                ball.style.top = (ball.offsetTop - movement) +"px";
                break;
            case 3: // izquierda, abajo
                ball.style.left = (ball.offsetLeft - movement) +"px";
                ball.style.top = (ball.offsetTop + movement) +"px";
                break;
            case 4: // izquierda, arriba
                ball.style.left = (ball.offsetLeft - movement) +"px";
                ball.style.top = (ball.offsetTop - movement) +"px";
                break;
        }
    }
 
    function checkStateBall(){
 
        if(collidePlayer2()){
            ball.direction = 2;
            if(ball.state == 1) ball.state = 3;
            if(ball.state == 2) ball.state = 4;
        }else if(collidePlayer1()){
            ball.direction = 1;
            if(ball.state == 3) ball.state = 1;
            if(ball.state == 4) ball.state = 2;
        }
 
        if(ball.direction ===1){
            if(ball.offsetTop >= height) ball.state=2;
            else if(ball.offsetTop <=0 ) ball.state=1;
        }else{
            if(ball.offsetTop >= height) ball.state=4;
            else if(ball.offsetTop <=0 ) ball.state=3;
        }
    }
 
    function collidePlayer1(){
        if(ball.offsetLeft <= (bar1.clientWidth) &&
           ball.offsetTop >= bar1.offsetTop &&
           ball.offsetTop <= (bar1.offsetTop + bar1.clientHeight)){
            return true;
        }
 
        return false;
    }
    function collidePlayer2(){
        if(ball.offsetLeft >= (width-bar2.clientWidth) &&
           ball.offsetTop >= bar2.offsetTop &&
           ball.offsetTop <= (bar2.offsetTop + bar2.clientHeight)){
            return true;
        }
        return false;
 
    }
 
    function moveBar(){
        if(player1.keyPress){
            if(player1.keyCode == 81 && bar1.offsetTop >=0)
                bar1.style.top = (bar1.offsetTop - movementBar) + "px";
            if(player1.keyCode == 65 && (bar1.offsetTop + bar1.clientHeight)<=height)
                bar1.style.top = (bar1.offsetTop + movementBar) + "px";
 
        }
        if(player2.keyPress){
            if(player2.keyCode == 79 && bar2.offsetTop>=0)
                bar2.style.top = (bar2.offsetTop - movementBar) +"px";
            if(player2.keyCode == 76 && (bar2.offsetTop + bar2.clientHeight)<=height)
                bar2.style.top = (bar2.offsetTop + movementBar) +"px";
        }
    }
 
    document.onkeydown = function(e){
        e = e || window.event;
        switch(e.keyCode){
            case 81: // Q
            case 65: // A
                player1.keyCode = e.keyCode;
                player1.keyPress = true;
            break;
            case 79: // O
            case 76: // L
                player2.keyCode = e.keyCode;
                player2.keyPress = true;
            break;
        }
    }
 
    document.onkeyup = function(e){
        if(e.keyCode == 81 || e.keyCode == 65)
            player1.keyPress = false;
        if(e.keyCode == 79 || e.keyCode == 76)
            player2.keyPress = false;
    }
 
    start();
}();
</script>
</html>



Comentarios sobre la versión: 20201123 (0)


No hay comentarios
 

Comentar la versión: 20201123

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s7014