-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
236 lines (232 loc) · 7.32 KB
/
index.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
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
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
<!DOCTYPE html>
<html>
<head>
<title>Pong</title>
<style>
#screen {
width: 800px;
height: 600px;
background-color: black;
border: 1px solid black;
position: relative;
}
.ball {
width: 80px;
height: 80px;
background-color: white;
position: absolute;
}
</style>
<link rel="stylesheet" href="./style/panda.css"/>
<link rel="stylesheet" href="./style/main.css"/>
</head>
<body>
<div class="main-div">
<p id="title">Welcome to Panda Pong!</p>
<div id="screen">
<div class="paddle" id="paddle_1"></div>
<div class="paddle" id="paddle_2"></div>
<img src="./images/pandaface2.jpeg" class="ball" id="ball"/>
</div>
<div id="scores">
<h2 class="score-text">SCORE</h2>
<div id="individual-scores">
<div class="player-div">
<h5>PLAYER 1</h5>
<div id="player_1_score"></div>
</div>
<div class="player-div1">
<h5>PLAYER 2</h5>
<div id="player_2_score"></div>
</div>
</div>
</div>
</div>
<script>
//=-=-=-=-=-=-=-=-=-=TODO-=-=-=-=-=-=-=-=-=-//
/* increase velocity of ball
ball multiplier
collision sensor for each ball
keyboard controls
smart computer
WIN function
*/
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
// Variables //
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
//Create paddle for player one
var paddle_1_element = document.getElementById("paddle_1");
var paddle_1_model = {
x: 20,
y: 250
};
//Create paddle for player two
var paddle_2_element = document.getElementById("paddle_2");
var paddle_2_model = {
x: 740,
y: 250
};
//Decide starting direction for the ball
var ballDirx;
if(Math.random() < 0.5){
ballDirx = 5
} else {
ballDirx = -5
}
var ballDiry;
if(Math.random() < 0.5){
ballDiry = 5
} else {
ballDiry = -5
}
//Create ball
var ball_element = document.getElementById("ball");
var ball_model = {
x: 400,
y: 300,
vx: ballDirx,
vy: ballDiry
};
//Create player scores
var player_1_score_element = document.getElementById("player_1_score");
var player_1_score = 0;
var player_2_score_element = document.getElementById("player_2_score");
var player_2_score = 0;
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-//
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
// Choose Image For Paddles //
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
var chooseRandImg = [
"url(./img/bulbasaur.jpg)",
"url(./img/charmander.jpg)",
"url(./img/jigglypuff.jpg)",
"url(./img/pikachu.jpg)",
"url(./img/slowpoke.jpg)",
"url(./img/squirtle.jpg)"
]
function chooseImg(images){
var image = images[Math.floor(Math.random() * images.length)];
return image
}
document.getElementById("paddle_1").style.backgroundImage=chooseImg(chooseRandImg);
document.getElementById("paddle_2").style.backgroundImage=chooseImg(chooseRandImg);
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
//Move paddle one with the mouse
function onMouseMove(evt){
paddle_1_model.y = evt.pageY - evt.target.offsetTop - 75;
}
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
// Constant Update //
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
//update
function update(){
//update the ball model position
ball_model.x = ball_model.x + ball_model.vx;
ball_model.y = ball_model.y + ball_model.vy;
//check if the ball is colliding with the bottom edge
// (screen height - ball) height gives 580 as a 'magic number'
if(ball_model.y > 580 && ball_model.vy > 0) {
//flip the y direction on the bottom edge
ball_model.vy *= -1;
}
// colliding with top edge
if(ball_model.y < 0 && ball_model.vy < 0) {
ball_model.vy *= -1;
}
//keep score and reset ball if goes off screen to the right
if (ball_model.x === 825) {
player_1_score += 1;
ball_model.x = 400;
ball_model.y = 300;
}
//keep score and reset ball if goes off screen to the left
if (ball_model.x === -20) {
player_2_score += 1;
ball_model.x = 400;
ball_model.y = 300;
}
// move paddle 2 with the ball.
if (ball_model.vy < 0){
paddle_2_model.y = paddle_2_model.y + (ball_model.vy + 1);
} else if (ball_model.vy > 0){
paddle_2_model.y = paddle_2_model.y + (ball_model.vy - 1);
}
// paddle 2 change direction if it gets too far away from ball
if (paddle_2_model.vy > 0 && ball_model.vy > 0 && paddle_2_model.y > ball_model.y + 60 && ball_model.vx > 0){
paddle_2_model.vy = paddle_2_model.vy * -1;
}
if (paddle_2_model.vy < 0 && ball_model.vy < 0 && paddle_2_model.y < ball_model.y - 120 && ball_model.vx > 0){
paddle_2_model.vy = paddle_2_model.vy * -1;
}
// paddle 2 staying in middle while ball is moving away
if (ball_model.vx < 0 && paddle_2_model.y < 245){
paddle_2_model.vy = 3;
} else if (ball_model.vx < 0 && paddle_2_model.y > 255){
paddle_2_model.vy = -3;
} else if (ball_model.vx < 0){
paddle_2_model.vy = 0;
}
//=-=-=-=-=-=-=-=-=TODO-=-=-=-=-=-=-=-=-=-=-//
// Move paddle two with keyboard //
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
/*
var upKeyPressed = false;
var downKeyPressed = false;
function onKeyUp(evt){
if(evt.keyCode == 38) {
upKeyPressed = false;
} else if (evt.keyCode == 40) {
downKeyPressed = false;
}
}
function onKeyDown(evt) {
if (evt.keyCode == 38){
upKeyPressed = true;
} else if(evt.keyCode == 40){
downKeyPressed = true;
}
}
*/
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
// collision sensor for player 1 paddle
if(ball_model.x < paddle_1_model.x + 40 && ball_model.vx < 0 && ball_model.y + 40 >= paddle_1_model.y && ball_model.y <= paddle_1_model.y + 150){
ball_model.vx *= -1;
}
//collision sensor for player 2 paddle
if(ball_model.x + 40 > paddle_2_model.x && ball_model.vx > 0 && ball_model.y + 40 >= paddle_2_model.y && ball_model.y <= paddle_2_model.y + 150){
ball_model.vx *= -1;
}
}
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
// Draw Objects //
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
//draw objects
function draw(){
//paddle 1
paddle_1_element.style.top = paddle_1_model.y + "px";
paddle_1_element.style.left = paddle_1_model.x + "px";
//paddle 2
paddle_2_element.style.top = paddle_2_model.y + "px";
paddle_2_element.style.left = paddle_2_model.x + "px";
//the ball
ball_element.style.top = ball_model.y + "px";
ball_element.style.top = ball_model.y + "px";
ball_element.style.left = ball_model.x + "px";
//the players' scores
player_1_score_element.innerHTML = player_1_score;
player_2_score_element.innerHTML = player_2_score;
}
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
function loop() {
update();
draw();
}
//=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-//
document.getElementById("screen").onmousemove = onMouseMove;
//window.onkeyup = onKeyUp;
//window.onkeydown = onKeyDown;
setInterval(loop, 1000/60);
</script>
</body>
</html>