Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Ayuda con pong de javascript

JavaScript - Ayuda con pong de javascript

Volver
Nuevo Tema
<<>>
 
Vista:

Ayuda con pong de javascript

Publicado por Alejandro (14 intervenciones) el 05/06/2019 14:32:35
Vale, puede que esta sea la ultima chorrada con la que necesite ayuda pero aqui va.

Aqui se puede ver algo que use de ejemplo para el ejercicio: https://www.lawebdelprogramador.com/codigo/JavaScript/2673-Pelota-rebotando.html
Ahora hay que llevarlo al "siguiente nivel".

1) Hay una barra controlada por Z para izquierda y X para derecha. Sin pasar tanto del borde izquierdo de la ventana como de la barra lateral.

2) A la derecha hay una barra larga estatica que mide casi lo mismo que el div.

3) La pelota rebota en las dos barras, rebota en la barra movil solo cuando baja, si rebasa la barra movil se
para el script mostrando un mensaje.

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
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>7.2</title>
<style type="text/css">
#ball{

position:relative;
display:block;
width:50px;
height:"50px"
}
#barra {

position:absolute;
top:550px;
left:50px;
width: 100px;
height:"25px"
}
#barra2 {

position:absolute;
left:890px;
}
#pantalla{

width:900px;
height:600px;
background-color:#000099;

}
</style>
<script type="text/javascript">
var y=0;
var x=0;
var controlY=1;
var controlX=1;
var velocidad=3;
var intervalo=setInterval("mover()",6);
 
function mover(){
if(controlY==1){
 y+=velocidad;
}else{
y-=velocidad;
}
if(y<=0){
controlY=1;
y=0;
}else if(y>=document.getElementById("pantalla").offsetHeight-50){
controlY=0;
y=document.getElementById("pantalla").offsetHeight-50;
}
if(controlX==1){
x+=velocidad;
}else{
x-=velocidad;
}
if(x<=0){
controlX=1;
x=0;
}else if(x>=document.getElementById("pantalla").offsetWidth-50){
controlX=0;
x=document.getElementById("pantalla").offsetWidth-50;
}
document.getElementById("ball").style.left=String(x)+"px";
document.getElementById("ball").style.top=String(y)+"px";
;}
 
window.onload=function(){document.onkeydown=desplazar};
function desplazar(objeto){
var tecla = objeto.which;
var situacionX = document.getElementById("barra").offsetLeft;
switch (tecla){
case 90 : barra.style.left = situacionX-50+"px" ; break;
case 88 : barra.style.left = situacionX+50+"px" ;break;
;}
;}
 
</script>
</head>
<body>
<div id="pantalla">
<img src="ball.gif" id="ball" alt="ball"/>
<img src="bar.gif" id="barra" alt="barra"/>
<img src="bar2.gif" id="barra2" alt="barra2"/>
</div>
 
</body>
</html>
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

Ayuda con pong de javascript

Publicado por Alejandro (14 intervenciones) el 29/07/2019 15:09:33
Intente hacerlo de una manera distinta, esta vez con canvas en lugar de imagenes.
Estos son unos avances,me falta saber como cambiar la barra de sitio y hacer que la pelota rebote en la pala de abajo y la barra que deberia estar en la derecha de la pantalla.

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
<!DOCTYPE HTML>
<html lang="es">
<head>
<meta charset="utf-8"/>
<title>7.4</title>
<style type="text/css">
* { padding: 0; margin: 0; }
canvas { background: #3399ff; }

 
</style>
 
 
</head>
<body>
 
<canvas id="myCanvas" width="480" height="320"></canvas>
 
<script type="text/javascript">
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var ballRadius = 10;
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;
var paddleHeight = 10;
var paddleWidth = 75;
var paddleX = (canvas.width-paddleWidth)/2;
var BarHeight = 400;
var BarWidth = 5;
var BarX = (canvas.width-BarWidth)/2;
var rightPressed = false;
var leftPressed = false;
 
document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);
 
function keyDownHandler(e) {
    if(e.keyCode == 88) {
        rightPressed = true;
    }
    else if(e.keyCode == 90) {
        leftPressed = true;
    }
}
function keyUpHandler(e) {
    if(e.keyCode == 88) {
        rightPressed = false;
    }
    else if(e.keyCode == 90) {
        leftPressed = false;
    }
}
 
function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI*2);
    ctx.fillStyle = "#ffe6ff";
    ctx.fill();
    ctx.closePath();
}
function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height-paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#cc0000";
    ctx.fill();
    ctx.closePath();
}
function drawBar() {
    ctx.beginPath();
    ctx.rect(BarX, canvas.height-BarHeight, BarWidth, BarHeight);
    ctx.fillStyle = "#000066";
    ctx.fill();
    ctx.closePath();
}
function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();
    drawBar() ;
    if(x + dx > canvas.width-ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if(y + dy < ballRadius) {
        dy = -dy;
    }
    else if(y + dy > canvas.height-ballRadius) {
        if(x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        }
        else {
            alert("Final del juego");
            document.location.reload();
        }
    }
 
    if(rightPressed && paddleX < canvas.width-paddleWidth) {
        paddleX += 7;
    }
    else if(leftPressed && paddleX > 0) {
        paddleX -= 7;
    }
 
    x += dx;
    y += dy;
}
 
setInterval(draw, 10);
</script>
</body>
</html>
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