graphicsProject/index.html at master · seanJosephFitzpatrick/graphicsProject · GitHub

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
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
<!DOCTYPE html>

<html>

<head>
    <meta charset="UTF-8">
    <title>Canvas</title>


    <style type="text/css">
        body {
            background-color: white;
        }

        canvas {
            //////////////////////////////////////////////////////
            /*
                Site referenced for this section of code
                http://stackoverflow.com/questions/5127937/how-to-center-canvas-in-html5
            */
            padding: 0;
            margin: auto;
            display: block;
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            //////////////////////////////////////////////////////
        }
    </style>

</head>

//////////////////////////////////////////////////////////////
<!--
                Background sourced at
                http://www.letterwallpaper15.xyz/free-backgrounds-3/
    -->

<body background="bkgrd.png">
    //////////////////////////////////////////////////////////////

    <!--//canvas id, height and width -->
    <canvas id="canvas-for-ball" height="600px" width="1000px"></canvas>

    <script type="text/javascript">
        // Gets a handle to the element with id canvasOne.
        var canvas = document.getElementById("canvas-for-ball");
        // Get a 2D context for the canvas.
        var ctx = canvas.getContext("2d");


        var column = 10; //block colums
        var row = 6; //block rows
        var width = 75; //block width
        var height = 20; //block height
        var blockSpace = 20; //spacing betweens blocks
        var blockOffsetTop = 40; //offset from bottom of canvas
        var blockOffsetLeft = 30; // offset from left of canvas
        var score = 0;

        // An object for the ball.
        var ball = {
            position: {
                x: 300, //ball x position
                y: 350 //ball y position
            },
            radius: 10, //ball radius
            velocity: {
                x: 2, //ball x velocity
                y: 5 //ball y velocity
            },
            drawBall: function () {
                // Draw the balL.
                ctx.arc(ball.position.x, ball.position.y, ball.radius, 0, 2 * Math.PI); //draw arc
                ctx.fillStyle = "red"; //fillstyle color red
                ctx.fill(); //fill in shape
            }
        }

        //An object for the paddle
        var paddle = {
            position: {
                x: 590, //paddle x position
                y: 350 //paddle y position
            },
            size: {
                w: 100, //paddle width
                h: 10 //paddle height
            },
            drawPaddle: function () { //draw paddle function
                //Draw the paddle
                ctx.fillStyle = "blue";
                ctx.fill();
                ctx.fillRect(paddle.position.y, paddle.position.x, paddle.size.w, paddle.size.h);
            }
        }

        ////////////////////////////////////////////////////////////////////////////////////////////
        /*
            Site referenced for this section of code
            https://developer.mozilla.org/en-US/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript
        */
        var blocks = [];
        for (var i = 0; i < column; i++) {

            blocks[i] = [];

            for (var j = 0; j < row; j++) {
                blocks[i][j] = {
                    x: 0,
                    y: 0,
                    alive: 1
                };
            }
        }

        //Function to draw the blocks using a nested forloop and populating 2d array
        function drawBlocks() {
            for (var i = 0; i < column; i++) {
                for (var j = 0; j < row; j++) {
                    if (blocks[i][j].alive == 1) {
                        var y = (j * (height + blockSpace)) + blockOffsetTop;
                        var x = (i * (width + blockSpace)) + blockOffsetLeft;

                        blocks[i][j].x = x;
                        blocks[i][j].y = y;

                        ctx.beginPath();
                        ctx.rect(x, y, width, height);
                        ctx.fillStyle = "blue";
                        ctx.fill();
                        ctx.closePath();
                    }

                }
            }
        }


        //Function to detect when the ball collides with a block using nested forloop
        function blockCollision() {
            for (i = 0; i < column; i++) {
                for (j = 0; j < row; j++) {
                    var seek = blocks[i][j];
                    if (seek.alive == 1) {
                        /*If the balls x position is above the blocks x positin && is below the balls x position + width &&
                        the balls y position is greater than the blocks y position &&
                        and less the the blocks y position + height - All these statements must be true*/
                        if ((ball.position.x > seek.x) && (ball.position.x < seek.x + width) && (ball.position.y > seek.y) && (ball.position.y < seek.y + height)) {
                            //Change velocity of the ball
                            ball.velocity.y = -ball.velocity.y
                                //set the seek.alive to 0 - to stop drawing on the screen using the if statement in drawBlocks
                            seek.alive = 0;
                            score++;
                        }
                    }
                }
            }
        }

        //////////////////////////////////////////////////////////////////////////////////////////////

        //Draw paddle function
        function movePaddle() {

            if (event.keyCode == 39) {
                //If the paddles y position is less than 900 then increment the y position
                if (paddle.position.y < 900)
                    paddle.position.y += 15;
            } else if (event.keyCode == 37) {
                //If the paddles y position is greater than zero then decrement the y position
                if (paddle.position.y > 0)
                    paddle.position.y -= 15;
            }
        }

        ///////////////////////////////////////////////////////////////////////////
        /*
            Site referenced for this section of code
            http://www.w3schools.com/canvas/canvas_text.asp
            http://www.w3schools.com/tags/ref_colorpicker.asp
        */
        function displayScore() {
            ctx.font = "16px Arial"; //set font to 16px and Arial
            ctx.fillStyle = "#99CCFF"; //set the color
            ctx.textAlign = "center"; //Set text align center
            ctx.fillText("Score: " + score, canvas.width / 2, canvas.height / 2 + 200);
        }
        ///////////////////////////////////////////////////////////////////////////

        //Ian's init function
        function init() {

            ctx.beginPath();
            ball.drawBall();
            ctx.closePath();

            ctx.beginPath();
            paddle.drawPaddle();
            ctx.closePath();

            ballVelocity();
            drawBlocks();
            blockCollision();
            displayScore();

            //If the ball leaves the bottom of the canvas - or is > the canvas.height
            if (ball.position.y - ball.radius > canvas.height) {
                endGame(); //Call end game function
            } else if (score == 60) {
                alert("You Win!");
                exit();
            }
        }

        function endGame() {
            alert("Game Over"); //Alert box
            exit(); //Exit game
        }

        //Ball velocity function
        function ballVelocity() {
            // Update the y location.
            ball.position.x += ball.velocity.x; //Starts the balls velocity x position
            ball.position.y += ball.velocity.y; //Starts the balls velocity y position

            //If the ball's x position is not greater than the canvas width
            if ((ball.position.x >= canvas.width - ball.radius) || (ball.position.x <= ball.radius))
                ball.velocity.x = -ball.velocity.x;
            /*If the ball's y position is not greater than the paddles x position and
            if the balls x position is in between the paddles y start and end postion*/
            if ((ball.position.y >= paddle.position.x - ball.radius) && ((ball.position.x > paddle.position.y &&
                    (ball.position.x < paddle.position.y + 100))) || (ball.position.y <= ball.radius))
                ball.velocity.y = -ball.velocity.y;
        }

        // A function to repeat every time the animation loops.
        function repeatme() {
            //Clear the entire canvas every time the repeatme is run
            ctx.clearRect(0, 0, canvas.width, canvas.height);


            //Call init function
            init();

            //Listen for the left and right keypress and if true call movePaddle function.
            window.addEventListener('keydown', movePaddle, true);

            //Update the animation
            window.requestAnimationFrame(repeatme);

        }

        // Get the animation going.
        window.requestAnimationFrame(repeatme);
    </script>

</body>

</html>