-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpong.html
163 lines (157 loc) · 4.62 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
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
<!DOCTYPE html><html><body><style>html { background-color: black; } </style> <script>window.pheight = true;
function makebox(name,color,width,height,x,y,zindex){
let box = document.createElement("div");
box.style.position = "absolute";
box.style.width = width + "px"
box.style.height = height + "px";
box.style.left = x + "px";
box.style.top = y + "px";
box.style.zIndex = zindex;
box.style.backgroundColor = color;
box.id = name
document.body.insertAdjacentElement("beforeend",box);
return box
}
function maketext(name,color,text,size,x,y,zindex){
let box = document.createElement("h1");
box.style.font = `Fira Sans`;
box.style.fontSize = `${size}rem`
box.style.position = "absolute";
box.style.left = x + "px";
box.style.top = y + "px";
box.style.zIndex = zindex;
box.style.color = color;
box.id = name;
box.innerText = text
document.body.insertAdjacentElement("beforeend",box);
return box
}
function makesphere(name,color,width,height,x,y,zindex){
let box = document.createElement("div");
box.style.position = "absolute";
box.style.width = width + "px"
box.style.height = height + "px";
box.style.left = x + "px";
box.style.top = y + "px";
box.style.zIndex = zindex;
box.style.backgroundColor = color;
box.style.borderRadius = width + "px";
box.id = name
document.body.insertAdjacentElement("beforeend",box);
return box
}
function relmove(obj,x,y) {
var left = 0;
var top = 0;
if (obj.style.left) {
left = parseFloat((obj.style.left).replace("px",""))
} if (obj.style.top) {
top = parseFloat((obj.style.top).replace("px",""))
}
obj.style.left = left + x + "px"
obj.style.top = top + y + "px"
}
function move(obj,x,y) {
obj.style.left = x + "px"
obj.style.top = y + "px"
}
function parse(obj) {
return parseFloat((obj.replace("px","")))
}
//GAME CODE
//Functions
document.body.style.overflowY = "hidden";
document.body.style.overflowX = "hidden";
var box = makesphere("pongball","Red",80,80,250,0,99999);
var color = "White";
if (document.body.style.backgroundColor == "White") {
color = "Black";
}
var handle1 = makebox("ponghandle",color,17,200,3,40,99999);
var scoreboard = maketext("scoreboard","White","Score: 0",1,100,0)
var score = 0;
var increment = 3;
var sincrement = 0;
var xbd = -1 * increment;
var ybd = 0 * increment;
var pheight = window.innerHeight;
var boxxsize = window.innerWidth - parse(box.style.width);
var boxysize = pheight - parse(box.style.height);
var count = 0;
var paddle = 0;
var paused = false;
var running = false;
var speedupy = 0;
var speedupx = 0;
var downarrow = false;
var uparrow = false;
handle1.style.borderRadius = "30px";
setTimeout(() => {
running = true;
}, 3000);
setInterval(() => {
count += 1;
var wow = false;
if (running == true) {
if (parse(box.style.left) < 20 && (Math.abs(parse(handle1.style.top)+ 20 - parse(box.style.top)) < 140)) {
score += 1;
scoreboard.innerText = "Score: " + score
speedupx += 0.03;
xbd = 1 * increment + speedupx;
} else if (parse(box.style.left) < -10) {
scoreboard.innerText = "Score: 0"
running = false;
score = 0;
speedupx = 0;
speedupy = 0;
setTimeout(function() {
move(handle1,0,40);
move(box,250,0);
running = true;
},1000)
} else if (parse(box.style.left) >= boxxsize) {
speedupx += 0.03;
xbd = -1 * increment + -speedupx;
}
if (parse(box.style.top) <= 0) {
//go down
speedupy += 0.04;
ybd = 0.1 * increment + speedupy;
} else if (parse(box.style.top) >= boxysize) {
//go up
speedupy += 0.04;
ybd = -0.1 * increment + -speedupy;
}
relmove(box,xbd,ybd);
if (pheight < (parse(handle1.style.top) + 220) && paddle == 3) {
} else if (0 > parse(handle1.style.top) && paddle == -3) {
} else {
relmove(handle1,0,paddle);
}
}
}, 1);
window.addEventListener("keydown", (key) => {
if (key.code == "ArrowDown") {
paddle = 3;
downarrow = true;
} else if (key.code == "ArrowUp") {
paddle = -3;
uparrow = true;
}
})
window.addEventListener("keyup", (key) => {
if (key.code == "ArrowDown") {
downarrow = false;
}
if (key.code == "ArrowUp") {
uparrow = false;
}
if (uparrow == true && downarrow == false) {
paddle = -3;
} else if (uparrow == false && downarrow == true) {
paddle = 3
} else if (uparrow == false && downarrow == false) {
paddle = 0;
}
})
</script></body></html>