-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbrickout.html
152 lines (130 loc) · 4.75 KB
/
brickout.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<canvas id="gameCanvas" width="800" height="600"></canvas>
<script>
var canvas, canvasContext;
const FRAMES_PER_SECOND = 30;
var ballX = 75;
var ballY = 75;
var ballSpeedX = 5;
var ballSpeedY = 5;
const BALL_RADIUS = 10;
const PADDLE_WIDTH = 100;
const PADDLE_THICKNESS = 10;
const PADDLE_DIST_FROM_EDGE = 60;
var paddleX = 400;
const BRICK_HEIGHT = 50;
const BRICK_WIDTH = 100;
const BRICK_COLUMNS = 8;
const BRICK_GAP = 2;
const BRICK_ROWS = 4;
var brickGrid = new Array(BRICK_COLUMNS);
var mouseX;
var mouseY;
function updateMousePos(evt) {
var rect = canvas.getBoundingClientRect();
var root = document.documentElement;
mouseX = evt.clientX - rect.left - root.scrollLeft;
mouseY = evt.clientY - rect.top - root.scrollTop;
paddleX = mouseX - PADDLE_WIDTH/2;
}
function brickReset() {
for (var i = 0; i < BRICK_COLUMNS; i++) {
if (Math.random() < 0.5) {
brickGrid[i] = true;
} else {
brickGrid[i] = false;
}
}
}
window.onload = function() {
canvas = document.getElementById('gameCanvas');
canvasContext = canvas.getContext('2d');
setInterval(updateAll, 1000/FRAMES_PER_SECOND);
canvas.addEventListener('mousemove', updateMousePos);
brickReset();
}
function updateAll() {
moveAll();
drawAll();
}
function ballReset() {
ballX = canvas.width/2;
ballY = canvas.height/2;
}
function moveAll() {
ballX += ballSpeedX;
ballY += ballSpeedY;
if (ballX <= BALL_RADIUS) {
ballSpeedX *= -1;
}
if (ballX >= canvas.width - BALL_RADIUS) {
ballSpeedX *= -1;
}
if (ballY <= BALL_RADIUS) {
ballSpeedY *= -1;
}
if (ballY >= canvas.height - BALL_RADIUS) {
// ballSpeedY *= -1;
ballReset();
}
var paddleTopEdgeY = canvas.height - PADDLE_DIST_FROM_EDGE;
var paddleBottomEdgeY = paddleTopEdgeY + PADDLE_THICKNESS;
var paddleLeftEdgeX = paddleX;
var paddleRightEdgeX = paddleLeftEdgeX + PADDLE_WIDTH;
if (ballY >= paddleTopEdgeY - BALL_RADIUS && // Below the top of the paddle
ballY <= paddleBottomEdgeY && // Above the bottom of the paddle
ballX >= paddleLeftEdgeX - BALL_RADIUS && // Right of the left side of the paddle
ballX <= paddleRightEdgeX + BALL_RADIUS) { // Left of the right side of the paddle
ballSpeedY *= -1;
/* Logic which dictates angle and speed of the ball,
based upon where it hits the paddle */
var centerOfPaddleX = paddleX + PADDLE_WIDTH/2;
var ballDistFromPaddleCenterX = ballX - centerOfPaddleX;
ballSpeedX = ballDistFromPaddleCenterX * 0.35;
}
}
function drawAll() {
colorRect(0, 0, canvas.width, canvas.height, 'black');
colorCircle(ballX, ballY, BALL_RADIUS, 'white');
colorRect(paddleX, canvas.height - PADDLE_DIST_FROM_EDGE, PADDLE_WIDTH, PADDLE_THICKNESS, 'white');
drawBricks();
var mouseBrickColumn = mouseX / BRICK_WIDTH;
var mouseBrickRow = mouseY / BRICK_HEIGHT;
colorText(mouseBrickColumn + ", " + mouseBrickRow, mouseX, mouseY, 'yellow');
}
function drawBricks() {
for (var eachRow = 0; eachRow < BRICK_ROWS; eachRow++) {
for (var eachColumn = 0; eachColumn < BRICK_COLUMNS; eachColumn++) {
if (brickGrid[eachColumn]) {
colorRect(BRICK_WIDTH * eachColumn,
BRICK_HEIGHT * eachRow,
BRICK_WIDTH - BRICK_GAP,
BRICK_HEIGHT - BRICK_GAP,
'blue');
}
}
}
}
function colorRect(topLeftX, topLeftY, boxWidth, boxHeight, fillColor) {
canvasContext.fillStyle = fillColor;
canvasContext.fillRect(topLeftX, topLeftY, boxWidth, boxHeight);
}
function colorCircle(centerX, centerY, radius, fillColor) {
canvasContext.fillStyle = fillColor;
canvasContext.beginPath();
canvasContext.arc(centerX, centerY, radius, 0, Math.PI * 2, true);
canvasContext.fill();
}
function colorText(showWords, textX, textY, fillColor) {
canvasContext.fillStyle = fillColor;
canvasContext.fillText(showWords, textX, textY);
}
</script>
</body>
</html>