├── README.md
├── draw
    ├── sprite.js
    └── text.js
├── engine.css
├── engine.js
├── engine.php
├── examples
    └── pong.php
├── objects
    ├── object.js
    └── player.js
└── screen
    └── init.js


/README.md:
--------------------------------------------------------------------------------
  1 | Web Game Engine
  2 | ---
  3 | 
  4 | This game engine aims to make it so that developers can quickly and easily start building complex web
  5 | based games.
  6 | 
  7 | ## This project has moved
  8 | This project has moved to [Gitlab](https://gitlab.com/DrRoach/Web-Engine).
  9 | 
 10 | ### Roadmap
 11 | 
 12 | 1. Create a easy to use 2D game engine.
 13 | 2. Integrate online / multiplayer capability.
 14 | 3. Make improvements asked for whilst multiplayer was added.
 15 | 4. Add 3D graphics capability.
 16 | 5. Make any necessary changes to multiplayer engine for 3D multiplayer to work.
 17 | 6. Improve performance of engine.
 18 | 7. Refactor code from previous steps (let's face it, this is going to happen).
 19 | 8. Improve on 3D performance.
 20 | 
 21 | ### Getting started
 22 | 
 23 | To get started, you need to have a `<canvas>` HTML element that will act as the game screen. You
 24 | also need to include the `engine.php` file that load in the engine. You also need to include jQuery.
 25 | 
 26 | ### Errors
 27 | 
 28 | By default, all errors in the engine are hidden. To display errors, useful for debugging purposes,
 29 | define `REPORT_ERRORS` to be true in PHP before you include the `engine.php` file. This will show both
 30 | PHP and JavaScript errors and also turn on dev mode for the engine.
 31 | 
 32 | ### Screen
 33 | 
 34 | The Screen object is what handles everything to do with the game "screen". When you make a game, it 
 35 | must have a screen. To create a screen, all you have to do is call `Screen.create()` passing in 
 36 | three simple parameters.
 37 | 
 38 | 1. The canvas ID.
 39 | 2. Your desired screen width. Screen.WIDTH is the full screen width if you want it to be fullscreen.
 40 | 3. Your desired screen height. Screen.HEIGHT is the full screen height if you want it to be fullscreen.
 41 | 
 42 | Not passing one of these three variables will throw an error.
 43 | 
 44 | #### Screen.create(id, width, height)
 45 | 
 46 | As mentioned above, `Screen.create()` should be one of, if not, the first functions that you call 
 47 | when using the endgine. It creates the Screen object and populates it with the data required.
 48 | 
 49 | #### Screen.setSize(width, height)
 50 | 
 51 | If you want to resize the screen after the `Screen.create()` call, you can call this function 
 52 | independantly IF you have already called `Screen.create()` to populate the Screen object 
 53 | with the required data.
 54 | 
 55 | #### Screen.setBackground(background, x, y, w, h, repeat)
 56 | 
 57 | You can set the background of your game using this function. Using this function, you can set your 
 58 | background image, the width and height of the background image, how wide and tall you want your 
 59 | background and finally whether or not your background should be repeated and on what axis.
 60 | 
 61 | ##### Constants
 62 | 
 63 | **Screen.FPS** - Default is 60.
 64 | 
 65 | **Screen.ID** - Default is `null` and this will become the String that you pass into `Screen.create()`.
 66 | 
 67 | **Screen.WIDTH** - Default is the window width. This will be overwritten by what you pass into `Screen.create()`.
 68 | 
 69 | **Screen.HEIGHT** - Default is the window height. This will be overwritten by what you pass into `Screen.create()`.
 70 | 
 71 | **Screen.BACKGROUND** - The background image that is used to paint the background. This is set in `Screen.setBackground()`.
 72 | 
 73 | **Screen.X** - The background images' top left X position. This is set in `Screen.setBackground()`.
 74 | 
 75 | **Screen.Y** - The background images' top left Y position. This is set in `Screen.setBackground()`.
 76 | 
 77 | **Screen.REPEAT** - Whether or not the background repeats. This is set in `Screen.setBackground()`.
 78 | 
 79 | **Screen.BACKGROUND_WIDTH** - The width of the background image. This is set in `Screen.setBackgroun()`.
 80 | 
 81 | **Screen.BACKGROUND_HEIGHT** - The height of the background image. This is set in `Screen.setBackground()`.
 82 | 
 83 | ### Player
 84 | 
 85 | The `player` object is now obsolete and you should instead use the `object` object to represent a player.
 86 | 
 87 | ### Object
 88 | 
 89 | This is the object that you use whenever you want to add anything such as a new player into the game. This object is
 90 | used to control everything to do with things such as players, npcs and more.
 91 | 
 92 | To create a new object, you only need one simple line of code: `var player = new Object();`. That will create a new
 93 | object that you can then play with how you wish.
 94 | 
 95 | #### Object.setSize(width, height)
 96 | 
 97 | This function sets the size of your object. This is used for a number of different things, including collision
 98 | detection so you should always make sure that you call this for each of your objects. When you call `setSprite()`,
 99 | this function is called as part of that so you probably won't ever need to call this function directly.
100 | 
101 | #### Object.setSprite(image, width, height)
102 | 
103 | This is usually the first function that you will call on each object. You use it to set the sprite image of the 
104 | object and also set the size of the object. As you probably already know by know, setting the size of each object is 
105 | important for doing things like collision detection for the object. The image should just be a string and the width 
106 | and height should be integer values.
107 | 
108 | #### Object.draw(x, y)
109 | 
110 | This function draws the object onto the page. If either the x or y values are blank or not valid integers, the x and 
111 | y position of the object will be used instead.
112 | 
113 | #### Object.move(direction, speed)
114 | 
115 | Used to move a object on the screen, the direction can be one of the following:
116 | 
117 | - north
118 | - northeast
119 | - east
120 | - southeast
121 | - south
122 | - southwest
123 | - west
124 | - northwest
125 | 
126 | The directions move the sprite in the directions that you would expect. The speed variable is the number of pixels 
127 | that you want the object to be moved by.
128 | 
129 | #### Object.setPosition(x, y)
130 | 
131 | Set the position of the object on the scren. Both the x and y values either need to be integer values or one of the 
132 | four Screen constants:
133 | 
134 | - Screen.TOP
135 | - Screen.RIGHT
136 | - Screen.BOTTOM
137 | - Screen.LEFT
138 | 


--------------------------------------------------------------------------------
/draw/sprite.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * Used to draw sprites
 3 |  *
 4 |  * Helper function to draw sprites onto the screen. This isn't used by the Screen object due to 
 5 |  * a couple of different reasons, the biggest being the simplicity of this function compared to 
 6 |  * Screens drawing method.
 7 |  *
 8 |  * @param String image The path to the sprite that is to be drawn
 9 |  * @param int    x     The top left X position of this sprite
10 |  * @param int    y     The top left Y position of this sprite
11 |  * @param int    w     The width of the sprite to be drawn
12 |  * @param int    h     The height of the sprite to be drawn
13 |  *
14 |  * @return null        No return
15 |  *
16 |  * @since Method available since Release 0.1.0
17 |  */
18 | function drawSprite(image, x, y, w, h) {
19 |     if (typeof image == "string") {
20 |         var i = new Image();
21 |         i.src = image;
22 |         i.addEventListener('load', function() {
23 |             Screen.CTX.drawImage(i, x, y, w, h);
24 |         });
25 |     } else {
26 |         Screen.CTX.drawImage(image, x, y, w, h);
27 |     }
28 | }
29 | 


--------------------------------------------------------------------------------
/draw/text.js:
--------------------------------------------------------------------------------
 1 | var textObjects = [];
 2 | 
 3 | /**
 4 |  * This is the object that is used to display text
 5 |  *
 6 |  * Use this function to create a new text object to display on the screen
 7 |  *
 8 |  * @param String text The text to display
 9 |  * @param int    x    The x position of the text
10 |  * @param int    y    The y position of the text
11 |  *
12 |  * @return No return
13 |  *
14 |  * @since Method available since Release 0.1.0
15 |  */
16 | function Text(text, x, y) {
17 |     this.font = "20px Georgia";
18 |     this.text = text;
19 |     this.x = x;
20 |     this.y = y;
21 |     this.ID = textObjects.length;
22 |     this.color = 'black';
23 |     textObjects.push(this);
24 | }
25 | 
26 | /**
27 |  * Set the font and the size of the text
28 |  *
29 |  * Set the font and the size of the text that is being displayed on the screen
30 |  *
31 |  * @param String font The font that you want the text to be
32 |  * @param int    size The size of the text on the screen
33 |  *
34 |  * @return Text       Current Text object
35 |  *
36 |  * @since Method available since Release 0.1.0
37 |  */
38 | Text.prototype.setFont = function(font, size) {
39 |     textObjects[this.ID].font = size + "px " + font;
40 |     return this;
41 | };
42 | 
43 | /**
44 |  * Change the text that is being displayed
45 |  *
46 |  * Change the text that is currently being displayed on the screen
47 |  *
48 |  * @param String text The text the is being displayed
49 |  *
50 |  * @return Text       Current Text object
51 |  *
52 |  * @since Method available since Release 0.1.0
53 |  */
54 | Text.prototype.setText = function(text) {
55 |     textObjects[this.ID].text = text;
56 |     return this;
57 | };
58 | 
59 | /**
60 |  * Set the text colour
61 |  *
62 |  * Set the colour of the text being displayed. Went with the American spelling of colour just because it's more
63 |  * expected in programming, not because it's right.
64 |  *
65 |  * @param String color The colour that you want the text to be
66 |  *
67 |  * @return Text       Current Text object
68 |  *
69 |  * @since Method available since Release 0.1.0
70 |  */
71 | Text.prototype.setColor = function(color) {
72 |     textObjects[this.ID].color = color;
73 |     return this;
74 | };
75 | 
76 | /**
77 |  * Remove text from screen
78 |  *
79 |  * Delete any text objects that you have previously created.
80 |  *
81 |  * @return Text Current Text object
82 |  *
83 |  * @since Method available since Release 0.1.0
84 |  */
85 | Text.prototype.remove = function() {
86 |     textObjects.splice(this.ID, 1);
87 |     return this;
88 | };


--------------------------------------------------------------------------------
/engine.css:
--------------------------------------------------------------------------------
1 | /*
2 |  * Set the canvas to block to avoid distortion from jQuery
3 |  */
4 | canvas {
5 |     display: block;
6 | }
7 | 


--------------------------------------------------------------------------------
/engine.js:
--------------------------------------------------------------------------------
 1 | var Engine = {};
 2 | 
 3 | /**
 4 |  * Global Variables
 5 |  */
 6 | 
 7 | //Set default value for REPORT_ERRORS of false if it hasn't been set.
 8 | if (typeof this.REPORT_ERRORS == "undefined") {
 9 |     Engine.REPORT_ERRORS = false;
10 | } else {
11 |     Engine.REPORT_ERRORS = this.REPORT_ERRORS;
12 | }
13 | var DEV_MODE = false;
14 | 
15 | var engineLoading = true;
16 | 
17 | //Make sure that jQuery is included
18 | if (typeof $ == "undefined") {
19 |     if (Engine.REPORT_ERRORS == true) {
20 |         //Throw an error and end the script
21 |         throw new Error("jQuery couldn't be found. Please include it to use the engine.");
22 |     } else {
23 |         //A error has to be thrown to stop the script
24 |         throw new Error();
25 |     }
26 | }
27 | 


--------------------------------------------------------------------------------
/engine.php:
--------------------------------------------------------------------------------
 1 | <?php
 2 | 
 3 | //Check to see if REPORT_ERRORS has been defined, if not, set it
 4 | //to false by default.
 5 | if (!defined(REPORT_ERRORS)) {
 6 |     define('REPORT_ERRORS', false);
 7 | }
 8 | 
 9 | //Turn on error reporting if it has been set to true
10 | if (REPORT_ERRORS == true) {
11 |     error_reporting(E_ALL);
12 |     ini_set('display_errors', true);
13 | 
14 |     echo '<script>var REPORT_ERRORS = true;</script>';
15 | }
16 | 
17 | //Load the engine.css file
18 | echo '<link rel="stylesheet" href="/engine/engine.css">';
19 | 
20 | //Load the engine.js file
21 | echo '<script src="/engine/engine.js"></script>';
22 | 
23 | /**
24 |  * Load all of the required scripts
25 |  */
26 | echo '<script src="/engine/screen/init.js"></script>';
27 | echo '<script src="/engine/draw/sprite.js"></script>';
28 | echo '<script src="/engine/objects/player.js"></script>';
29 | echo '<script src="/engine/objects/object.js"></script>';
30 | echo '<script src="/engine/draw/text.js"></script>';
31 | 


--------------------------------------------------------------------------------
/examples/pong.php:
--------------------------------------------------------------------------------
  1 | <html>
  2 | <body>
  3 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  4 | <canvas id="screen" width="400" height="400">Browser doesn't support HTML 5.</canvas>
  5 | <?php require_once('engine/engine.php'); ?>
  6 | <script>
  7 |     /**
  8 |      * Create the Screen object that the game is going to be played on. The first parameter is the ID of the canvas.
  9 |      * The second is the width of the screen and the third is the height.
 10 |      */
 11 |     Screen.create("screen", 400, 400);
 12 |     /**
 13 |      * Set the games background image. The first parameter is the image to be used as the background. The second is
 14 |      * the starting 'X' position of the image. Next is the starting 'Y' position of the image. The next two are the
 15 |      * width you want the background image to be then the height. For our game, we're using one image for the whole
 16 |      * background. The final parameter is whether or not we want the background repeated and if so on which axis.
 17 |      */
 18 |     Screen.setBackground('bg.jpg', 0, 0, 400, 400, false);
 19 | 
 20 |     /**
 21 |      * Creating the three objects
 22 |      */
 23 |     //Create a new ball variable which stores an object.
 24 |     var ball = new Object();
 25 |     /**
 26 |      * Now set the sprite to be used to represent the ball. The first parameter is the image to be used to represent
 27 |      * the ball on the Screen. The next two are the width and height of the ball respectively.
 28 |      */
 29 |     ball.setSprite('ball.png', 50, 50);
 30 |     /**
 31 |      * Now we put the ball in a random position on the screen. The two parameters in this function are the 'X' and
 32 |      * 'Y' positions respectively.
 33 |      */
 34 |     ball.setPosition((Math.random() * 350) + 1, (Math.random() * 350) + 1);
 35 | 
 36 |     /**
 37 |      * Same three steps that we used to create the ball.
 38 |      */
 39 |     var player1 = new Object();
 40 |     player1.setSprite('paddle.png', 20, 60);
 41 |     player1.setPosition(Screen.LEFT, 50);
 42 |     //Create our score variable to keep track of the score.
 43 |     player1.score = 0;
 44 | 
 45 |     /**
 46 |      * Same four steps that we used to create player 1.
 47 |      */
 48 |     var player2 = new Object();
 49 |     player2.setSprite('paddle.png', 20, 60);
 50 |     player2.setPosition(Screen.RIGHT, 50);
 51 |     player2.score = 0;
 52 | 
 53 |     /**
 54 |      * Adding keypress listeners
 55 |      */
 56 |     /**
 57 |      * We add keyHold listeners to the four buttons that are going to be used to play our game. The 'w', 's', 'Up
 58 |      * arrow' and 'Down arrow' keys. The first parameter is the keyCode returned by JavaScript on keydown and the
 59 |      * second parameter is the callback function to be called when that button is pressed.
 60 |      */
 61 |     player1.keyHold(83, function() {
 62 |         //When 's' is pressed, move player 1 down by 1 pixel.
 63 |         /**
 64 |          * The first parameter is the direction that we want to move our object. The second parameter is the amount
 65 |          * of pixels to move the object by.
 66 |          */
 67 |         player1.move('south', 1);
 68 |     });
 69 |     player1.keyHold(87, function() {
 70 |         //When 'w' is pressed, move player 1 up by 1 pixel.
 71 |         player1.move('north', 1);
 72 |     });
 73 |     player2.keyHold(38, function() {
 74 |         //When 'Up arrow' is pressed, move player 2 up by 1 pixel.
 75 |         player2.move('north', 1);
 76 |     });
 77 |     player2.keyHold(40, function() {
 78 |         //When 'Down arrow' is pressed, move player 2 down by 1 pixel.
 79 |         player2.move('south', 1);
 80 |     });
 81 | 
 82 |     /**
 83 |      * Add ball and player collision detection. The first parameter is the object to detect a collision with. The
 84 |      * second parameter is the callback function to be called when this collision happens.
 85 |      */
 86 |     player2.detectCollision(ball, function() {
 87 |         switch (ball.DIRECTION) {
 88 |             case 'southeast':
 89 |                 /**
 90 |                  * Set the movement of the 'ball' object when it hits player 2. The first parameter is the direction
 91 |                  * that the object should be moving and the second parameter is the speed that it should move at in
 92 |                  * pixels.
 93 |                  */
 94 |                 ball.setMovement('southwest', 2);
 95 |                 break;
 96 |             case 'northeast':
 97 |                 ball.setMovement('northwest', 2);
 98 |                 break;
 99 |         }
100 |     });
101 |     player1.detectCollision(ball, function() {
102 |         switch (ball.DIRECTION) {
103 |             case 'southwest':
104 |                 ball.setMovement('southeast', 2);
105 |                 break;
106 |             case 'northwest':
107 |                 ball.setMovement('northeast', 2);
108 |                 break;
109 |         }
110 |     });
111 | 
112 |     /**
113 |      * Add ball and wall collision detection
114 |      */
115 |     ball.detectCollision(Screen.RIGHT, function() {
116 |         //Player 1 has scored, increase their score
117 |         player1.score++;
118 |         //Update the text object that displays the score (See below).
119 |         scoreText.setText(player1.score + ' - ' + player2.score);
120 |         //Set the ball in a new starting position
121 |         ball.setPosition(320, (Math.random() * 350) + 1);
122 |         //Move the ball in the right direction
123 |         ball.setMovement('southwest', 2);
124 |     });
125 |     //Same as above except reversed for player 2
126 |     ball.detectCollision(Screen.LEFT, function() {
127 |         player2.score++;
128 |         scoreText.setText(player1.score + ' - ' + player2.score);
129 |         ball.setPosition(30, (Math.random() * 350) + 1);
130 |         ball.setMovement('northeast', 2);
131 |     });
132 |     //When the ball hits the bottom of the screen, bounce it up.
133 |     ball.detectCollision(Screen.BOTTOM, function() {
134 |         switch (ball.DIRECTION) {
135 |             case 'southeast':
136 |                 ball.setMovement('northeast', 2);
137 |                 break;
138 |             case 'southwest':
139 |                 ball.setMovement('northwest', 2);
140 |                 break;
141 |         }
142 |     });
143 |     //When the ball hits the top of the screen, bounce it down.
144 |     ball.detectCollision(Screen.TOP, function() {
145 |         switch (ball.DIRECTION) {
146 |             case 'northeast':
147 |                 ball.setMovement('southeast', 2);
148 |                 break;
149 |             case 'northwest':
150 |                 ball.setMovement('southwest', 2);
151 |                 break;
152 |         }
153 |     });
154 | 
155 |     /**
156 |      * Add paddle and screen collision detection. When either player is at either the top or the bottom of the
157 |      * screen, don't let them go any further.
158 |      */
159 |     player1.detectCollision(Screen.TOP, function() {
160 |         player1.setPosition(Screen.LEFT, Screen.TOP);
161 |     });
162 |     player1.detectCollision(Screen.BOTTOM, function() {
163 |         player1.setPosition(Screen.LEFT, Screen.BOTTOM);
164 |     });
165 |     player2.detectCollision(Screen.TOP, function() {
166 |         player2.setPosition(Screen.RIGHT, Screen.TOP);
167 |     });
168 |     player2.detectCollision(Screen.BOTTOM, function() {
169 |         player2.setPosition(Screen.RIGHT, Screen.BOTTOM);
170 |     });
171 | 
172 |     /**
173 |      * Set the balls' initial movement
174 |      */
175 |     ball.setMovement('southeast', 2);
176 | 
177 |     /**
178 |      * Score variable that holds the Text object displaying the score. When you make a new Text object, the first
179 |      * parameter is the text to be displayed. The second and third are the 'X' and 'Y' positions of the text. The
180 |      * `setColor` function is used to set the colour of text being set on the screen. This can be any value accepted
181 |      * by `canvas.fillStyle`. The setFont function allows you to set the font and size of the text. The first parameter
182 |      * is any String accepted by `canvas.font` such as: 'bold Calibiri'. The second parameter is the size of the font
183 |      * in pixels.
184 |      */
185 |     var scoreText = new Text(player1.score + ' - ' + player2.score, 160, 350).setColor('white')
186 |         .setFont('bold Calibri', 40);
187 |     /**
188 |      * Variable declared globally to be used later on.
189 |      */
190 |     var finalText = '';
191 | 
192 |     /**
193 |      * The game loop. This is used to redraw all of the required objects onto the screen and also clear the screen on
194 |      * every run so that the old positions of objects can't be seen. The second parameter for `setInterval` should
195 |      * always be Screen.TICK as this is worked out so that your game runs at the required FPS.
196 |      */
197 |     var loop = setInterval(function() {
198 |         //The first call in your loop should always be this. It clears the previous locations of objects.
199 |         Screen.clear();
200 | 
201 |         /**
202 |          * Logic to see if either player has won.
203 |          */
204 |         if (player1.score == 5) {
205 |             //Setting the global variable we set before to the player 1 wins text
206 |             finalText = 'Player 1 wins: ' + player1.score + ' - ' + player2.score;
207 |             //Call the finish function which wraps up our game (See below).
208 |             finish();
209 |             //Return here because we don't want the rest of our loop to run.
210 |             return;
211 |         } else if (player2.score == 5) {
212 |             //Setting the global variable we set before to the player 2 wins text
213 |             finalText = 'Player 2 wins: ' + player2.score + ' - ' + player1.score;
214 |             finish();
215 |             return;
216 |         }
217 | 
218 |         /**
219 |          * Draw the objects. Make sure that all of our needed objects are drawn in their new positions.
220 |          */
221 |         ball.draw();
222 |         player1.draw();
223 |         player2.draw();
224 |     }, Screen.TICK);
225 | 
226 |     function finish() {
227 |         //Remove the score from the screen.
228 |         scoreText.remove();
229 |         //Create the new Text object to display the winner text onto the screen.
230 |         new Text(finalText, 30, 160).setFont('bold Calibri', 40).setColor('white');
231 |     }
232 | </script>
233 | </body>
234 | </html>


--------------------------------------------------------------------------------
/objects/object.js:
--------------------------------------------------------------------------------
  1 | function Object() {
  2 |     /**
  3 |      * Global variables for each object
  4 |      */
  5 |     this.SPRITE = null;
  6 |     this.DIRECTION = null;
  7 |     this.X = 0;
  8 |     this.Y = 0;
  9 |     this.WIDTH = 0;
 10 |     this.HEIGHT = 0;
 11 | 
 12 |     /**
 13 |      * Set the objects' size
 14 |      *
 15 |      * It allows the engine to know how big of a sprite should be drawn when required and it
 16 |      * also allows the engine to do logical things with the object such as collision detection.
 17 |      *
 18 |      * @param int width  The width of the object
 19 |      * @param int height The height of the object
 20 |      *
 21 |      * @return boolean   Whether the size of the object was correctly successfully set or not
 22 |      *
 23 |      * @since Method available since Release 0.1.0
 24 |      */
 25 |     this.setSize = function(width, height) {
 26 |         if (width % 1 == 0 && height % 1 == 0) {
 27 |             this.WIDTH = width;
 28 |             this.HEIGHT = height;
 29 |             return true;
 30 |         } else {
 31 |             return false;
 32 |         }
 33 |     };
 34 | 
 35 |     /**
 36 |      * Set the objects' sprite image
 37 |      *
 38 |      * Use this function to add an image to the sprite so that people can see it in your game.
 39 |      * setSprite also calls setSize so that you don't need to make multiple function calls.
 40 |      *
 41 |      * @param String image  The name of the image
 42 |      * @param int    width  The width of the sprite
 43 |      * @param int    height The height of the sprite
 44 |      *
 45 |      * @return boolean     Whether or not the sprite was successfully created
 46 |      *
 47 |      * @since Method available since Release 0.1.0
 48 |      */
 49 |     this.setSprite = function(image, width, height) {
 50 |         var img = new Image();
 51 |         img.src = image;
 52 |         img.addEventListener('load', cacheSprite.bind(null, this, img));
 53 | 
 54 |         var sizeSet = this.setSize(width, height);
 55 |         if (sizeSet === true) {
 56 |             this.SPRITE = image;
 57 |             //Store the new image object
 58 |             return true;
 59 |         } else {
 60 |             return sizeSet;
 61 |         }
 62 |     };
 63 | 
 64 |     /**
 65 |      * Draw the object onto the screen
 66 |      *
 67 |      * Use this to draw the objects' sprite onto the screen. This function can only be used after 
 68 |      * `setSprite()` has been called.
 69 |      *
 70 |      * @param int x The x position of where the object should be drawn
 71 |      * @param int y The y position of where the object should be drawn
 72 |      *
 73 |      * @return null No return
 74 |      *
 75 |      * @since Method available since Release 0.1.0
 76 |      */
 77 |     this.draw = function(x, y) {
 78 |         /**
 79 |          * For loop to detect object collisions
 80 |          */
 81 |         for (var i = 0; i < this.collisionDetection.length; i++) {
 82 |             var cur = this.collisionDetection[i];
 83 |             var obj = cur.obj;
 84 |             if ( (this.X >= obj.X && this.X <= (obj.X + obj.WIDTH)) || (this.X <= obj.X && (this.X + this.WIDTH) >= obj.X) || (obj.X == null)) {
 85 |                 if ( (this.Y >= obj.Y && this.Y <= (obj.Y + obj.HEIGHT)) || (this.Y <= obj.Y && (this.Y + this.HEIGHT) >= obj.Y) || (obj.Y == null)) {
 86 |                     cur.callback();
 87 |                 }
 88 |             }
 89 |         }
 90 | 
 91 |         /**
 92 |          * For loop to handle key presses
 93 |          */
 94 |         for (var i = 0; i < keys.length; i++) {
 95 |             if (keys[i].pressed == true) {
 96 |                 keys[i].callback();
 97 |             }
 98 |         }
 99 | 
100 |         for (var i = 0; i < this.movements.length; i++) {
101 |             var obj = this.movements[i];
102 |             this.move(obj.direction, obj.speed);
103 |         }
104 | 
105 |         //If either x or y aren't set use the global values
106 |         if (x == null || y == null) {
107 |             new drawSprite(this.SPRITE, this.X, this.Y, this.WIDTH, this.HEIGHT);
108 |         } else {
109 |             new drawSprite(this.SPRITE, x, y, this.WIDTH, this.HEIGHT);
110 |         }
111 |     };
112 | 
113 |     /**
114 |      * Move the object around the screen
115 |      *
116 |      * This is used to move the object around the screen.
117 |      *
118 |      * @param String direction The direction in which you want the object to move
119 |      * @param int    distance  The distance in pixels that you want the object to move
120 |      *
121 |      * @return boolean Whether the object was moved or not
122 |      *
123 |      * @since Method available since Release 0.1.0
124 |      */
125 |     this.move = function(direction, speed) {
126 |         var moved = false;
127 |         switch(direction.toLowerCase()) {
128 |             case 'north':
129 |                 this.Y -= speed;
130 |                 moved = true;
131 |                 break;
132 |             case 'northeast':
133 |                 this.Y -= speed;
134 |                 this.X += speed;
135 |                 moved = true;
136 |                 break;
137 |             case 'northwest':
138 |                 this.Y -= speed;
139 |                 this.X -= speed;
140 |                 break;
141 |             case 'east':
142 |                 this.X += speed;
143 |                 moved = true;
144 |                 break;
145 |             case 'south':
146 |                 this.Y += speed;
147 |                 moved = true;
148 |                 break;
149 |             case 'southeast':
150 |                 this.Y += speed;
151 |                 this.X += speed;
152 |                 break;
153 |             case 'southwest':
154 |                 this.Y += speed;
155 |                 this.X -= speed;
156 |                 break;
157 |             case 'west':
158 |                 this.X -= speed;
159 |                 moved = true;
160 |                 break;
161 |         }
162 |         return moved;
163 |     };
164 | 
165 |     /**
166 |      * Set the position of the object
167 |      *
168 |      * Set the position of the object on the screen. You can also use the Screen position
169 |      * constants such as Screen.RIGHT to set the position correctly.
170 |      *
171 |      * @param int/String x The `x` position of the object
172 |      * @param int/String y The `y` position of the object
173 |      *
174 |      * @return No return
175 |      *
176 |      * @since Method available since Release 0.1.0
177 |      */
178 |     this.setPosition = function(x, y) {
179 |         if (typeof x == "string") {
180 |             switch (x.toLowerCase()) {
181 |                 case 'left':
182 |                     x = 0;
183 |                     break;
184 |                 case 'right':
185 |                     x = Screen.WIDTH - this.WIDTH;
186 |                     break;
187 |             }
188 |         }
189 |         if (typeof y == "string") {
190 |             switch(y.toLowerCase()) {
191 |                 case 'top':
192 |                     y = 0;
193 |                     break;
194 |                 case 'bottom':
195 |                     y = Screen.HEIGHT - this.HEIGHT;
196 |                     break;
197 |             }
198 |         }
199 |         this.X = x;
200 |         this.Y = y;
201 |    };
202 | 
203 |     this.keyHold = function(key, callback) {
204 |         keys.push({"key": key, "pressed": false, "callback": callback});
205 |     };
206 | 
207 |     this.collisionDetection = [];
208 |     this.detectCollision = function(obj, callback) {
209 |         if (typeof obj == "string") {
210 |             var side = obj;
211 |             obj = {};
212 |             switch (side.toLowerCase()) {
213 |                 case 'top':
214 |                     obj.X = null;
215 |                     obj.Y = 0;
216 |                     obj.HEIGHT = 0;
217 |                     break;
218 |                 case 'right':
219 |                     obj.X = Screen.WIDTH;
220 |                     obj.Y = null;
221 |                     obj.WIDTH = 0;
222 |                     break;
223 |                 case 'bottom':
224 |                     obj.Y = Screen.HEIGHT;
225 |                     obj.X = null;
226 |                     obj.HEIGHT = 0;
227 |                     break;
228 |                 case 'left':
229 |                     obj.X = 0;
230 |                     obj.Y = null;
231 |                     obj.WIDTH = 0;
232 |                     break;
233 |             }
234 |         }
235 |         this.collisionDetection.push({obj: obj, callback: callback});
236 |     };
237 | 
238 |     this.movements = [];
239 |     this.setMovement = function(direction, speed) {
240 |         this.DIRECTION = direction.toLowerCase();
241 |         this.movements = [{'direction': direction, 'speed': speed}];
242 |     };
243 | 
244 |     /**
245 |      * Function to be used as callback to cache image
246 |      *
247 |      * TODO: Comment this more and add it to README
248 |      *
249 |      * @param object
250 |      * @param image
251 |      */
252 |     function cacheSprite(object, image) {
253 |         object.SPRITE = image;
254 |     }
255 | }
256 | 
257 | var keys = [];
258 | document.addEventListener('keydown', keyListen.bind(null, 'down'));
259 | 
260 | document.addEventListener('keyup', keyListen.bind(null, 'up'));
261 | 
262 | /**
263 |  * Function that handles key presses
264 |  *
265 |  * This is a function that should only be called from inside of the Object class.
266 |  * It is a callback function for both the keydown and keyup event listeners
267 |  *
268 |  * TODO: Add this to README
269 |  *
270 |  * @param Object obj The Object object
271 |  * @param String type The type of key event
272 |  * @param KeyPressEvent event The keypress event that occurred
273 |  */
274 | function keyListen(type, event) {
275 |     for (var i = 0; i < keys.length; i++) {
276 |         if (keys[i].key == event.keyCode) {
277 |             if (type == 'down') {
278 |                 keys[i].pressed = true;
279 |             } else {
280 |                 keys[i].pressed = false;
281 |             }
282 |         }
283 |     }
284 | }


--------------------------------------------------------------------------------
/objects/player.js:
--------------------------------------------------------------------------------
1 | function Player() {
2 |     return new Object();
3 | }
4 | 


--------------------------------------------------------------------------------
/screen/init.js:
--------------------------------------------------------------------------------
  1 | var Screen = {};
  2 | 
  3 | /**
  4 |  * Global Variables
  5 |  */
  6 | Screen.FPS = 60;
  7 | Screen.ID = null;
  8 | Screen.CTX = null;
  9 | Screen.BACKGROUND = null;
 10 | Screen.X = 0;
 11 | Screen.Y = 0;
 12 | Screen.REPEAT = false;
 13 | Screen.BACKGROUND_WIDTH = null;
 14 | Screen.BACKGROUND_HEIGHT = null;
 15 | 
 16 | /**
 17 |  * Create the Screen object
 18 |  *
 19 |  * This should be one of, if not, the first functions that you call in your code. It creates 
 20 |  * the Screen object and populates it with all of the data that is required. If you try and 
 21 |  * call another Screen function before this one, you will get errors.
 22 |  *
 23 |  * @param String id The ID of the canvas that you are using for your screen
 24 |  * @param int    width The width of the screen
 25 |  * @param int    height The height of the screen
 26 |  *
 27 |  * @return Screen The screen object that is created
 28 |  *
 29 |  * @since Method available since Release 0.1.0
 30 |  */
 31 | Screen.create = function(id, width, height) {
 32 |     //The next three if statements are for error checking
 33 |     if (typeof id == "undefined") {
 34 |         if (Engine.REPORT_ERRORS == true) {
 35 |             throw new Error('You must provide the canvas ID in your `Screen.create()` call');
 36 |         } else {
 37 |             throw new Error();
 38 |         }
 39 |     }
 40 | 
 41 |     if (typeof width == "undefined") {
 42 |         if (Engine.REPORT_ERRORS == true) {
 43 |             throw new Error('You must provide a width in your `Screen.create()` call');
 44 |         } else {
 45 |             throw new Error();
 46 |         }
 47 |     }
 48 | 
 49 |     if (typeof height == "undefined") {
 50 |         if (Engine.REPORT_ERRORS == true) {
 51 |             throw new Error('You must provide a height in your `Screen.create()` call');
 52 |         } else {
 53 |             throw new Error();
 54 |         }
 55 |     }
 56 | 
 57 |     //Store all of the information passed in the Screen object.
 58 |     Screen.ID = id;
 59 |     Screen.WIDTH = width;
 60 |     Screen.HEIGHT = height;
 61 | 
 62 |     //Set the screen size
 63 |     //Screen.setSize(width, height);
 64 | 
 65 |     //Create the canvas context
 66 |     var c = document.getElementById(id);
 67 |     Screen.CTX = c.getContext("2d");
 68 | };
 69 | 
 70 | /**
 71 |  * Set the size of the Screen
 72 |  *
 73 |  * Set the size of the screen that the user is playing on. This function is called from `Screen.create()`
 74 |  * which is the first function that you should call.
 75 |  *
 76 |  * TODO: Make this function work, currently it distorts the canvas
 77 |  *
 78 |  * @param int    width  The width of the screen
 79 |  * @param int    height The height of the screen
 80 |  *
 81 |  * @return boolean Whether or not the resize was successful
 82 |  *
 83 |  * @since Method available since Release 0.1.0
 84 |  */
 85 | Screen.setSize = function(width, height) {
 86 |     $('#' + this.ID).width(width).height(height);
 87 |     return true;
 88 | };
 89 | 
 90 | /**
 91 |  * Set the background of the Screen
 92 |  *
 93 |  * Draw your background onto the Screen. You can set where to start drawing the background using 
 94 |  * the `x` and `y` parameters and you can choose the width and height of the background using 
 95 |  * the `w` and `h` parameters. You can also set the background to repeat on either x, y, both 
 96 |  * or not at all using the `repeat` parameter.
 97 |  *
 98 |  * @param String background The path to your background image
 99 |  * @param int    x          Where on the x axis you want your background to start
100 |  * @param int    y          Where on the y axis you want your background to start
101 |  * @param int    w          The width you want your background to be drawn to
102 |  * @param int    h          The height you want your background to be drawn to
103 |  * @param String/boolean    Whether or not you want your background to be repeated and on what axis
104 |  *
105 |  * @return boolean          Whether setting the background worked or not
106 |  *
107 |  * @since Method available since Release 0.1.0
108 |  */
109 | Screen.setBackground = function(background, x, y, w, h, repeat) {
110 |     var x = x || 0;
111 |     var y = y || 0;
112 |     var w = w || null;
113 |     var h = h || null;
114 |     var repeat = repeat || 'false';
115 | 
116 |     /**
117 |      * Store data that is needed on canvas redraws
118 |      */
119 |     Screen.X = x;
120 |     Screen.Y = y;
121 |     Screen.REPEAT = repeat;
122 |     Screen.BACKGROUND_WIDTH = w;
123 |     Screen.BACKGROUND_HEIGHT = h;
124 | 
125 |     if (Screen.BACKGROUND == null) {
126 |         var bg = new Image();
127 |         bg.src = background;
128 |         bg.addEventListener('load', function() {
129 |             //If this is the first time the image is being drawn, cache it for redraws
130 |             Screen.BACKGROUND = bg;
131 |             drawBackground();
132 |         });
133 |     } else {
134 |         var bg = Screen.BACKGROUND;
135 |         drawBackground();
136 |     }
137 | 
138 |     /**
139 |      * Check if there is any text to write to the screen and if there is, write it
140 |      */
141 |     for (var i = 0; i < textObjects.length; i++) {
142 |         var obj = textObjects[i];
143 |         Screen.CTX.font = obj.font;
144 |         Screen.CTX.fillStyle = obj.color;
145 |         Screen.CTX.fillText(obj.text, obj.x, obj.y);
146 |     }
147 | 
148 |     /**
149 |      * Private function to draw the background onto the screen.
150 |      * TODO: Comment this more
151 |      */
152 |     function drawBackground() {
153 |         //If repeat has been passed as a boolean, make it a String
154 |         if (repeat === true) {
155 |             repeat = 'true';
156 |         } else if (repeat === false) {
157 |             repeat = 'false';
158 |         }
159 | 
160 |         /**
161 |          * Check to see if width or height are empty. If they are, use defaults. If no width or 
162 |          * height have been set. then you cannot repeat the background.
163 |          */
164 |         if (w == null || h == null) {
165 |             Screen.CTX.drawImage(bg, x, y);
166 |         } else {
167 |             //Code to repeat the code across the X axis
168 |             if (repeat == 'x') {
169 |                 for (var i = x; i < Screen.WIDTH; i += w) {
170 |                     Screen.CTX.drawImage(bg, i, y, w, h);
171 |                 }
172 |             } 
173 |             //Code to repeat the code across the Y axis
174 |             if (repeat == 'y') {
175 |                 for (var i = y; i < Screen.HEIGHT; i += h) {
176 |                     Screen.CTX.drawImage(bg, x, i, w, h);
177 |                 }
178 |             }
179 |             //Code to repeat the code across both the X and Y axis
180 |             if (repeat == 'true') {
181 |                 for (var i = x; i < Screen.WIDTH; i += w) {
182 |                     for (var z = y; z < Screen.HEIGHT; z += h) {
183 |                         Screen.CTX.drawImage(bg, i, z, w, h);
184 |                     }
185 |                 }
186 |             }
187 |             //Code to draw the background only once
188 |             if (repeat == 'false') {
189 |                 Screen.CTX.drawImage(bg, x, y, w, h);
190 |             }
191 |         }
192 |     }
193 | };
194 | 
195 | /**
196 |  * Clear the screen and redraw the background
197 |  *
198 |  * When something needs to move on the screen, this function will clear the whole screen and then
199 |  * redraw the background onto the screen in a way that doesn't make the whole game lag.
200 |  *
201 |  * @return No return
202 |  *
203 |  * @since Method available since Release 0.1.0
204 |  */
205 | Screen.clear = function() {
206 |     Screen.CTX.clearRect(0, 0, Screen.WIDTH, Screen.HEIGHT);
207 | 
208 |     //Check to see if a background has been set
209 |     if (Screen.BACKGROUND !== null) {
210 |         //Whenever the screen is cleared, automatically redraw the background
211 |         Screen.setBackground(Screen.BACKGROUND, Screen.X, Screen.Y, Screen.BACKGROUND_WIDTH,
212 |             Screen.BACKGROUND_HEIGHT, Screen.REPEAT);
213 |     }
214 | };
215 | 
216 | /**
217 |  * Set the FPS of the game
218 |  *
219 |  * This function is used to set the FPS of the whole game. NEVER override the Screen.FPS value manually
220 |  * because the Screen.TICK value will not be updated. ALWAYS use this function.
221 |  *
222 |  * @param int fps The number of frames per second that you want
223 |  *
224 |  * @return No return
225 |  *
226 |  * @since Method available since Release 0.1.0
227 |  */
228 | Screen.setFPS = function(fps) {
229 |     Screen.FPS = fps;
230 |     Screen.TICK = 1000 / fps;
231 | };
232 | 
233 | /**
234 |  * Run a function after a set amount of time
235 |  *
236 |  * Can be used to give a countdown before a start of a game for example.
237 |  *
238 |  * @param float    seconds  The number of seconds for the timer to wait for in seconds
239 |  * @param function callback The callback function to be ran when the timer gets to the desired time
240 |  *
241 |  * @return No return
242 |  *
243 |  * @since Method available since Release 0.1.0
244 |  */
245 | Screen.timer = function(seconds, callback) {
246 |     setTimeout(callback, seconds * 1000);
247 | };
248 | 
249 | /**
250 |  * On load logic
251 |  */
252 | Screen.WIDTH = $(window).width();
253 | Screen.HEIGHT = $(window).height();
254 | //Screen constants so maths isn't needed at all
255 | Screen.TOP = 'TOP';
256 | Screen.RIGHT = 'RIGHT';
257 | Screen.BOTTOM = 'BOTTOM';
258 | Screen.LEFT = 'LEFT';
259 | //Set the Screen tick rate using the FPS
260 | Screen.setFPS(Screen.FPS);


--------------------------------------------------------------------------------