-
Notifications
You must be signed in to change notification settings - Fork 0
/
pong.html
111 lines (96 loc) · 3.84 KB
/
pong.html
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="pt-br">
<head>
<meta charset="UTF-8">
<title>Pong</title>
<script>
</script>
</head>
<body>
<center><canvas id="folha" width="800" height="500"></canvas></center>
<script>
window.onload = function () {
setInterval(play, 1000 / 60);
};
var folha = document.getElementById("folha");
var area = folha.getContext("2d");
var alt_area = 500;
var lar_area = 800;
var lar_linha = lar_area/80;
var lar_bola = lar_area/100;
var alt_raquete = alt_area/6;
var lar_raquete = alt_area/100;
var x_bola = 30;
var y_bola = 30;
var velx_bola = vely_bola = 0.75;
var acel_bola = 2;
var y_raqueteA = y_raqueteB = 225-30;
var pont_jogadorA = pont_jogadorB = 0;
var vel_raqueteA = 5;
folha.addEventListener('mousemove', function (e) {
y_raqueteA = e.clientY - alt_raquete/ 2;
});
function play(){
//Campo
area.fillStyle = '#a1007f';
area.fillRect(0,0,lar_area,alt_area)
//Linha
area.fillStyle = '#ffffff';
area.fillRect(lar_area/2-lar_linha/2,0,lar_linha,alt_area);
//Raquete A
area.fillRect(0,y_raqueteA,lar_raquete,alt_raquete);
//Raquete B
area.fillRect((lar_area - lar_raquete),y_raqueteB,lar_raquete,alt_raquete);
//Mostrar pontuação
area.fillText('Humano ' + pont_jogadorA + ' pontos',100, 100);
area.fillText('Computador ' + pont_jogadorB + ' pontos', lar_area - 200, 100);
//Bola
area.fillStyle = '#000000';
area.fillRect(x_bola,y_bola,lar_bola,lar_bola);
area.fillStyle = '#ffffff';
//Movimentação da bola
x_bola = x_bola + velx_bola*acel_bola;
y_bola = y_bola + vely_bola*acel_bola;
//Verificação de rebate do jogador A
if (x_bola >= 0 && x_bola <= lar_raquete && y_bola >= y_raqueteA && y_bola <= y_raqueteA + alt_raquete ){
velx_bola = -velx_bola;
acel_bola = acel_bola+1;
};
//Verificação de rebate do jogador B
if (x_bola >= lar_area - lar_raquete && x_bola <= lar_area && y_bola >= y_raqueteB && y_bola <= y_raqueteB + alt_raquete ){
velx_bola = -velx_bola;
acel_bola = acel_bola+1;
};
//verificação de ponto jogador A
if(x_bola >= lar_area){
pont_jogadorA++;
x_bola = lar_area/2;
y_bola = alt_area/2;
acel_bola = 2;
};
//verificação de ponto jogador B
if(x_bola < 0){
pont_jogadorB++;
x_bola = lar_area/2;
y_bola = alt_area/2;
acel_bola = 2;
};
//Verificação lateral inferior
if (vely_bola > 0 && y_bola > (alt_area - lar_bola)){
vely_bola = -vely_bola;
};
//verificação lateral superior
if (vely_bola < 0 && y_bola < 0){
vely_bola = -vely_bola;
};
//Movimento da Raquete B
if(y_raqueteB + alt_raquete/2 < y_bola){
y_raqueteB = y_raqueteB + vel_raqueteA;
}
else{
y_raqueteB = y_raqueteB - vel_raqueteA;
}
};
</script>
</body>
</html>