diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 496ee2c..0000000 --- a/.gitignore +++ /dev/null @@ -1 +0,0 @@ -.DS_Store \ No newline at end of file diff --git a/Instructions.docx b/Instructions.docx deleted file mode 100644 index fa1521e..0000000 Binary files a/Instructions.docx and /dev/null differ diff --git a/README.md b/README.md deleted file mode 100644 index a64b516..0000000 --- a/README.md +++ /dev/null @@ -1,34 +0,0 @@ -# About Frogger - -In this game, the goal for the player is to reach the water without colliding with an enemy (a bug). The enemies move at different speeds (randomly assigned) on the paved block part of the field. When the player collides with an enemy, the game is reset and 30 points will be deducted from the score. - -An alternative goal is to increase the player's score by collecting gems that are randomly placed along the field. 3 gems are placed (randomly) in the field once at the beggining of the game, and every time that the player reaches the water and the game re-starts; the previous score is kept throigh the new game each time the player reaches the water. - -Blue Gem = 30 points. -Green Gem = 20 pints. - -## App Screenshot - -![Frogger game screenshot](https://github.com/jlares/udacity-object-oriented-javascript/blob/master/images/screenshots/screenshot1.png) - - -# How to Play - -The player can move left, right, up and down using the keyboard's keys. - -The player can only move within the field. - - -# About the Game: Object Oriented Javascript - -The goal of this game is to implement best Object Oriented Javascript practices, including the adequate use of scopes, closures, prototype chains, the object decorator pattern, and classes (functional, prototypal, pseudoclassical, superclasses, and/or pseudoclassical subclasses). - -This project is part of Udacity's Front End Developer Nanodegree program course called Object Oriented Javascript. - -This is the [rubric][1] used for self-checking this project's submission. - -Instructions on how to get started on the project are also available through [this guide][2] - -[1]: https://review.udacity.com/#!/projects/2696458597/rubric -[2]: https://docs.google.com/document/d/1v01aScPjSWCCWQLIpFqvg3-vXLH2e8_SZQKC8jNO0Dc/pub?embedded=true - diff --git a/_config.yml b/_config.yml new file mode 100644 index 0000000..2f7efbe --- /dev/null +++ b/_config.yml @@ -0,0 +1 @@ +theme: jekyll-theme-minimal \ No newline at end of file diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 2ad606d..0000000 --- a/css/style.css +++ /dev/null @@ -1,6 +0,0 @@ -body { - text-align: center; -} -#score-board { - margin-top: 2em; -} diff --git a/images/Gem Orange.png b/images/Gem Orange.png deleted file mode 100644 index f8faf7b..0000000 Binary files a/images/Gem Orange.png and /dev/null differ diff --git a/images/Heart.png b/images/Heart.png deleted file mode 100644 index aa49b5c..0000000 Binary files a/images/Heart.png and /dev/null differ diff --git a/images/Key.png b/images/Key.png deleted file mode 100644 index 7602326..0000000 Binary files a/images/Key.png and /dev/null differ diff --git a/images/Rock.png b/images/Rock.png deleted file mode 100644 index 29c4e20..0000000 Binary files a/images/Rock.png and /dev/null differ diff --git a/images/Selector.png b/images/Selector.png deleted file mode 100644 index e7c5475..0000000 Binary files a/images/Selector.png and /dev/null differ diff --git a/images/Star.png b/images/Star.png deleted file mode 100644 index 17c0af5..0000000 Binary files a/images/Star.png and /dev/null differ diff --git a/images/char-boy.png b/images/char-boy.png deleted file mode 100644 index 3dc7c29..0000000 Binary files a/images/char-boy.png and /dev/null differ diff --git a/images/char-cat-girl.png b/images/char-cat-girl.png deleted file mode 100644 index dc0538b..0000000 Binary files a/images/char-cat-girl.png and /dev/null differ diff --git a/images/char-horn-girl.png b/images/char-horn-girl.png deleted file mode 100644 index 90f2278..0000000 Binary files a/images/char-horn-girl.png and /dev/null differ diff --git a/images/char-pink-girl.png b/images/char-pink-girl.png deleted file mode 100644 index baef177..0000000 Binary files a/images/char-pink-girl.png and /dev/null differ diff --git a/images/char-princess-girl.png b/images/char-princess-girl.png deleted file mode 100644 index 9d9f958..0000000 Binary files a/images/char-princess-girl.png and /dev/null differ diff --git a/images/enemy-bug.png b/images/enemy-bug.png deleted file mode 100644 index 191587b..0000000 Binary files a/images/enemy-bug.png and /dev/null differ diff --git a/images/gem-blue.png b/images/gem-blue.png deleted file mode 100644 index 5808a7d..0000000 Binary files a/images/gem-blue.png and /dev/null differ diff --git a/images/gem-green.png b/images/gem-green.png deleted file mode 100644 index e971d14..0000000 Binary files a/images/gem-green.png and /dev/null differ diff --git a/images/grass-block.png b/images/grass-block.png deleted file mode 100644 index eb04ba9..0000000 Binary files a/images/grass-block.png and /dev/null differ diff --git a/images/screenshots/screenshot1.png b/images/screenshots/screenshot1.png deleted file mode 100644 index 49ddeb4..0000000 Binary files a/images/screenshots/screenshot1.png and /dev/null differ diff --git a/images/stone-block.png b/images/stone-block.png deleted file mode 100644 index 01113cf..0000000 Binary files a/images/stone-block.png and /dev/null differ diff --git a/images/water-block.png b/images/water-block.png deleted file mode 100644 index 0383ed8..0000000 Binary files a/images/water-block.png and /dev/null differ diff --git a/images_hold/Gem Blue.png b/images_hold/Gem Blue.png deleted file mode 100644 index 5808a7d..0000000 Binary files a/images_hold/Gem Blue.png and /dev/null differ diff --git a/images_hold/Gem Orange.png b/images_hold/Gem Orange.png deleted file mode 100644 index f8faf7b..0000000 Binary files a/images_hold/Gem Orange.png and /dev/null differ diff --git a/images_hold/Heart.png b/images_hold/Heart.png deleted file mode 100644 index aa49b5c..0000000 Binary files a/images_hold/Heart.png and /dev/null differ diff --git a/images_hold/Key.png b/images_hold/Key.png deleted file mode 100644 index 7602326..0000000 Binary files a/images_hold/Key.png and /dev/null differ diff --git a/images_hold/Rock.png b/images_hold/Rock.png deleted file mode 100644 index 29c4e20..0000000 Binary files a/images_hold/Rock.png and /dev/null differ diff --git a/images_hold/Selector.png b/images_hold/Selector.png deleted file mode 100644 index e7c5475..0000000 Binary files a/images_hold/Selector.png and /dev/null differ diff --git a/images_hold/Star.png b/images_hold/Star.png deleted file mode 100644 index 17c0af5..0000000 Binary files a/images_hold/Star.png and /dev/null differ diff --git a/images_hold/char-boy.png b/images_hold/char-boy.png deleted file mode 100644 index f9b381d..0000000 Binary files a/images_hold/char-boy.png and /dev/null differ diff --git a/images_hold/char-cat-girl.png b/images_hold/char-cat-girl.png deleted file mode 100644 index dc0538b..0000000 Binary files a/images_hold/char-cat-girl.png and /dev/null differ diff --git a/images_hold/char-horn-girl.png b/images_hold/char-horn-girl.png deleted file mode 100644 index 90f2278..0000000 Binary files a/images_hold/char-horn-girl.png and /dev/null differ diff --git a/images_hold/char-pink-girl.png b/images_hold/char-pink-girl.png deleted file mode 100644 index baef177..0000000 Binary files a/images_hold/char-pink-girl.png and /dev/null differ diff --git a/images_hold/char-princess-girl.png b/images_hold/char-princess-girl.png deleted file mode 100644 index 9d9f958..0000000 Binary files a/images_hold/char-princess-girl.png and /dev/null differ diff --git a/images_hold/enemy-bug.png b/images_hold/enemy-bug.png deleted file mode 100644 index b872803..0000000 Binary files a/images_hold/enemy-bug.png and /dev/null differ diff --git a/images_hold/gem-blue.png b/images_hold/gem-blue.png deleted file mode 100644 index 6c29634..0000000 Binary files a/images_hold/gem-blue.png and /dev/null differ diff --git a/images_hold/gem-green.png b/images_hold/gem-green.png deleted file mode 100644 index af8412b..0000000 Binary files a/images_hold/gem-green.png and /dev/null differ diff --git a/images_hold/grass-block.png b/images_hold/grass-block.png deleted file mode 100644 index eb04ba9..0000000 Binary files a/images_hold/grass-block.png and /dev/null differ diff --git a/images_hold/stone-block.png b/images_hold/stone-block.png deleted file mode 100644 index 01113cf..0000000 Binary files a/images_hold/stone-block.png and /dev/null differ diff --git a/images_hold/water-block.png b/images_hold/water-block.png deleted file mode 100644 index 0383ed8..0000000 Binary files a/images_hold/water-block.png and /dev/null differ diff --git a/index.html b/index.html deleted file mode 100644 index e7f7e87..0000000 --- a/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - Effective JavaScript: Frogger - - - - - - - - - - -
SCORE: 0
- - - - - diff --git a/index.md b/index.md new file mode 100644 index 0000000..472eba5 --- /dev/null +++ b/index.md @@ -0,0 +1,37 @@ +## Welcome to GitHub Pages + +You can use the [editor on GitHub](https://github.com/jolares/javascript-object-oriented-programming/edit/gh-pages/index.md) to maintain and preview the content for your website in Markdown files. + +Whenever you commit to this repository, GitHub Pages will run [Jekyll](https://jekyllrb.com/) to rebuild the pages in your site, from the content in your Markdown files. + +### Markdown + +Markdown is a lightweight and easy-to-use syntax for styling your writing. It includes conventions for + +```markdown +Syntax highlighted code block + +# Header 1 +## Header 2 +### Header 3 + +- Bulleted +- List + +1. Numbered +2. List + +**Bold** and _Italic_ and `Code` text + +[Link](url) and ![Image](src) +``` + +For more details see [Basic writing and formatting syntax](https://docs.github.com/en/github/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax). + +### Jekyll Themes + +Your Pages site will use the layout and styles from the Jekyll theme you have selected in your [repository settings](https://github.com/jolares/javascript-object-oriented-programming/settings/pages). The name of this theme is saved in the Jekyll `_config.yml` configuration file. + +### Support or Contact + +Having trouble with Pages? Check out our [documentation](https://docs.github.com/categories/github-pages-basics/) or [contact support](https://support.github.com/contact) and we’ll help you sort it out. diff --git a/js/app.js b/js/app.js deleted file mode 100644 index fd66a33..0000000 --- a/js/app.js +++ /dev/null @@ -1,233 +0,0 @@ -/** - * @description create an Enemy object - * @returns Enemy object - */ -var Enemy = function() { - // The image/sprite for our enemies, this uses - // a helper we've provided to easily load images - this.sprite = 'images/enemy-bug.png'; - - var yMin = 40; // min vertical position where Enemies can appear/move - var yMax = 235; - this.x = -100; // start enemies out of field - this.y = Math.floor((Math.random() * yMax) + yMin); - this.speedMin = 80; // min speed the enemies can move - this.speedMax = 500; - // set enemy's speed at random between max and min enemy speed - this.speed = Math.floor((Math.random() * this.speedMax) + this.speedMin); - - //TODO: make sure that enemy's vertical position does not overlap with other enemies - }; - -// Update the enemy's position, required method for game -// Parameter: dt, a time delta between ticks -Enemy.prototype.update = function(dt) { - // Multiplies movements by the dt parameter to ensure that - // the game runs at the same speed in all computers - this.x = this.x + this.speed * dt; - // delete Enemy objects once they move out of the field - var xMax = 400; // rightmost end of field - - // Restart enemy's position once it moves out of the field. - if ( this.x > xMax ) { - // console.log("Enemy has reached the end of the street") // use for debugging - this.x = -100; - this.speed = 0; - - // TODO: find a more optimal way of delaying the enemy restart - var minDelay = 800; // .8 sec - var maxDelay = 1500; - var delay = Math.floor((Math.random() * maxDelay) + minDelay); - var that = this; // because function setTimeout() points 'this' to global - setTimeout(function() { - //console.log(that.speedMax); // use for debugging - that.speed = Math.floor((Math.random() * that.speedMax) + that.speedMin); - }, delay); - } - - // Handle Collisions - var collisionOffset = 33.3; - if( Math.abs(player.x - this.x) < collisionOffset && - Math.abs(player.y - this.y) < collisionOffset){ - //console.log("a collision happened!"); - player.restart(); // returns player to initial position and lowers its score - player.score -= 100; - $('#scoreNum').text(player.score); - } -}; - -// Draw the enemy on the screen -Enemy.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - - -/** - * @description create a player object - * @returns Player object - */ -var Player = function() { - // This class requires an update(), render() and - // a handleInput() method. - this.sprite = 'images/char-boy.png'; - this.x = 200; // center of x-axis in the field - this.y = 380; - this.score = 0; -}; - -Player.prototype.update = function(dt) { - // reset game if player reaches the water - var delay = 0; // 0.5 sec - if( this.y < 10 ){ - this.restart(); - } -}; - -Player.prototype.restart = function() { - this.x = 200; - this.y = 400; - - allGems = []; - allGems.push(new blueGem()); - allGems.push(new greenGem()); - allGems.push(new greenGem()); -}; - -Player.prototype.increaseScore = function(pts) { - player.score += pts; - // console.log(player.score); // use for debugging - $('#scoreNum').text(player.score); -} - - -Player.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - -Player.prototype.handleInput = function(key) { - - var strideX = 505/5; // pixels to displace each time player moves horizontally - var strideY = 510/6; // pixels to displace each time player moves vertically - - // bind keyboard keys to player's motion. And only allow player to move within field. - switch(key){ - case 'left': - if( this.x > 0 ) { - this.x -= strideX; - } - break; - case 'right': - if (this.x < 400 ) { - this.x += strideX; - } - break; - case 'up': - if( this.y > 0 ) { - this.y -= strideY; - } - break; - case 'down': - if( this.y < 380) { - this.y += strideY; - } - break; - } - -}; - -/** - * @description create a Gem object - * @returns Gem object - */ -var Gem = function() { - - var yMax = 200; // end position where Enemies can appear/move - var yMin = 40; // start position where Enemies can appear/move - var xMin = 0; - var xMax = 400; - this.x = Math.floor((Math.random() * xMax) + xMin); - this.y = Math.floor((Math.random() * yMax) + yMin); - -}; - -Gem.prototype.update = function() { - - // Handle pickups - var offsetPickup = 55; - if( Math.abs( this.x - player.x) < offsetPickup && Math.abs( this.y - player.y) < offsetPickup){ - //console.log("Just picked up a Gem"); // use for debugging - this.x = -100; // remove from field - player.increaseScore(this.value); - delete this; - } - -}; - -/** - * @description create a green Gem - * @constructor Gem - * @returns greenGem object - */ -var greenGem = function(){ - Gem.call(this); - this.sprite = 'images/gem-green.png'; - this.value = 5; // to be used with score() -}; - -greenGem.prototype = Object.create(Gem.prototype); -greenGem.prototype.constructor = greenGem; -greenGem.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - -/** - * @description create a blue Gem - * @constructor Gem - * @returns blueGem object - */ -var blueGem = function(){ - Gem.call(this); - this.sprite = 'images/gem-blue.png'; - this.value = 10; // to be used with score() -}; - -blueGem.prototype = Object.create(Gem.prototype); -blueGem.prototype.constructor = blueGem; -blueGem.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - -/* Instantiating Game Objects */ - -// Project instruction: Place all enemy objects in an array called allEnemies -var allEnemies = []; -for(var i = 0; i < 3; i++){ - allEnemies.push(new Enemy(i)); -} - -var player = new Player(); - -var allGems = []; -for(var i = 0; i < 2; i++){ - allGems.push(new greenGem(i)); -} -for( var i = 0; i < 1; i++ ){ - allGems.push(new blueGem(i)); -} - -// This listens for key presses and sends the keys to your -// Player.handleInput() method. You don't need to modify this. -document.addEventListener('keyup', function(e) { - var allowedKeys = { - 37: 'left', - 38: 'up', - 39: 'right', - 40: 'down' - }; - - player.handleInput(allowedKeys[e.keyCode]); - -}); - - - diff --git a/js/engine.js b/js/engine.js deleted file mode 100644 index 8260d52..0000000 --- a/js/engine.js +++ /dev/null @@ -1,197 +0,0 @@ -/* Engine.js - * This file provides the game loop functionality (update entities and render), - * draws the initial game board on the screen, and then calls the update and - * render methods on your player and enemy objects (defined in your app.js). - * - * A game engine works by drawing the entire game screen over and over, kind of - * like a flipbook you may have created as a kid. When your player moves across - * the screen, it may look like just that image/character is moving or being - * drawn but that is not the case. What's really happening is the entire "scene" - * is being drawn over and over, presenting the illusion of animation. - * - * This engine is available globally via the Engine variable and it also makes - * the canvas' context (ctx) object globally available to make writing app.js - * a little simpler to work with. - */ - -var Engine = (function(global) { - /* Predefine the variables we'll be using within this scope, - * create the canvas element, grab the 2D context for that canvas - * set the canvas elements height/width and add it to the DOM. - */ - var doc = global.document, - win = global.window, - canvas = doc.createElement('canvas'), - ctx = canvas.getContext('2d'), - lastTime; - - canvas.width = 505; - canvas.height = 606; - doc.body.appendChild(canvas); - - /* This function serves as the kickoff point for the game loop itself - * and handles properly calling the update and render methods. - */ - function main() { - /* Get our time delta information which is required if your game - * requires smooth animation. Because everyone's computer processes - * instructions at different speeds we need a constant value that - * would be the same for everyone (regardless of how fast their - * computer is) - hurray time! - */ - var now = Date.now(), - dt = (now - lastTime) / 1000.0; - - /* Call our update/render functions, pass along the time delta to - * our update function since it may be used for smooth animation. - */ - - update(dt); - render(); - - /* Set our lastTime variable which is used to determine the time delta - * for the next time this function is called. - */ - lastTime = now; - - /* Use the browser's requestAnimationFrame function to call this - * function again as soon as the browser is able to draw another frame. - */ - win.requestAnimationFrame(main); - } - - /* This function does some initial setup that should only occur once, - * particularly setting the lastTime variable that is required for the - * game loop. - */ - function init() { - reset(); - lastTime = Date.now(); - main(); - } - - /* This function is called by main (our game loop) and itself calls all - * of the functions which may need to update entity's data. Based on how - * you implement your collision detection (when two entities occupy the - * same space, for instance when your character should die), you may find - * the need to add an additional function call here. For now, we've left - * it commented out - you may or may not want to implement this - * functionality this way (you could just implement collision detection - * on the entities themselves within your app.js file). - */ - function update(dt) { - updateEntities(dt); - // checkCollisions(); - } - - /* This is called by the update function and loops through all of the - * objects within your allEnemies array as defined in app.js and calls - * their update() methods. It will then call the update function for your - * player object. These update methods should focus purely on updating - * the data/properties related to the object. Do your drawing in your - * render methods. - */ - function updateEntities(dt) { - allEnemies.forEach(function(enemy) { - enemy.update(dt); - }); - allGems.forEach(function(gems) { - gems.update(); - }); - player.update(); - - } - - /* This function initially draws the "game level", it will then call - * the renderEntities function. Remember, this function is called every - * game tick (or loop of the game engine) because that's how games work - - * they are flipbooks creating the illusion of animation but in reality - * they are just drawing the entire screen over and over. - */ - function render() { - /* This array holds the relative URL to the image used - * for that particular row of the game level. - */ - var rowImages = [ - 'images/water-block.png', // Top row is water - 'images/stone-block.png', // Row 1 of 3 of stone - 'images/stone-block.png', // Row 2 of 3 of stone - 'images/stone-block.png', // Row 3 of 3 of stone - 'images/grass-block.png', // Row 1 of 2 of grass - 'images/grass-block.png' // Row 2 of 2 of grass - - ], - numRows = 6, - numCols = 5, - row, col; - - /* Loop through the number of rows and columns we've defined above - * and, using the rowImages array, draw the correct image for that - * portion of the "grid" - */ - for (row = 0; row < numRows; row++) { - for (col = 0; col < numCols; col++) { - /* The drawImage function of the canvas' context element - * requires 3 parameters: the image to draw, the x coordinate - * to start drawing and the y coordinate to start drawing. - * We're using our Resources helpers to refer to our images - * so that we get the benefits of caching these images, since - * we're using them over and over. - */ - ctx.drawImage(Resources.get(rowImages[row]), col * 101, row * 83); - } - } - - renderEntities(); - } - - /* This function is called by the render function and is called on each game - * tick. Its purpose is to then call the render functions you have defined - * on your enemy and player entities within app.js - */ - function renderEntities() { - /* Loop through all of the objects within the allEnemies array and call - * the render function you have defined. - */ - allEnemies.forEach(function(enemy) { - enemy.render(); - }); - - player.render(); - - // render Gems (added by JL) - allGems.forEach(function(gem) { - gem.render(); - }); - - } - - /* This function does nothing but it could have been a good place to - * handle game reset states - maybe a new game menu or a game over screen - * those sorts of things. It's only called once by the init() method. - */ - function reset() { - // noop - } - - /* Go ahead and load all of the images we know we're going to need to - * draw our game level. Then set init as the callback method, so that when - * all of these images are properly loaded our game will start. - */ - Resources.load([ - 'images/stone-block.png', - 'images/water-block.png', - 'images/grass-block.png', - 'images/gem-green.png', - 'images/gem-blue.png', - 'images/enemy-bug.png', - 'images/char-boy.png' - ]); - Resources.onReady(init); - - /* Assign the canvas' context object to the global variable (the window - * object when run in a browser) so that developers can use it more easily - * from within their app.js files. - */ - global.ctx = ctx; -})(this); diff --git a/js/resources.js b/js/resources.js deleted file mode 100644 index c49baff..0000000 --- a/js/resources.js +++ /dev/null @@ -1,111 +0,0 @@ -/* Resources.js - * This is simply an image loading utility. It eases the process of loading - * image files so that they can be used within your game. It also includes - * a simple "caching" layer so it will reuse cached images if you attempt - * to load the same image multiple times. - */ -(function() { - var resourceCache = {}; - var loading = []; - var readyCallbacks = []; - - /* This is the publicly accessible image loading function. It accepts - * an array of strings pointing to image files or a string for a single - * image. It will then call our private image loading function accordingly. - */ - function load(urlOrArr) { - if(urlOrArr instanceof Array) { - /* If the developer passed in an array of images - * loop through each value and call our image - * loader on that image file - */ - urlOrArr.forEach(function(url) { - _load(url); - }); - } else { - /* The developer did not pass an array to this function, - * assume the value is a string and call our image loader - * directly. - */ - _load(urlOrArr); - } - } - - /* This is our private image loader function, it is - * called by the public image loader function. - */ - function _load(url) { - if(resourceCache[url]) { - /* If this URL has been previously loaded it will exist within - * our resourceCache array. Just return that image rather - * re-loading the image. - */ - return resourceCache[url]; - } else { - /* This URL has not been previously loaded and is not present - * within our cache; we'll need to load this image. - */ - var img = new Image(); - img.onload = function() { - /* Once our image has properly loaded, add it to our cache - * so that we can simply return this image if the developer - * attempts to load this file in the future. - */ - resourceCache[url] = img; - - /* Once the image is actually loaded and properly cached, - * call all of the onReady() callbacks we have defined. - */ - if(isReady()) { - readyCallbacks.forEach(function(func) { func(); }); - } - }; - - /* Set the initial cache value to false, this will change when - * the image's onload event handler is called. Finally, point - * the image's src attribute to the passed in URL. - */ - resourceCache[url] = false; - img.src = url; - } - } - - /* This is used by developers to grab references to images they know - * have been previously loaded. If an image is cached, this functions - * the same as calling load() on that URL. - */ - function get(url) { - return resourceCache[url]; - } - - /* This function determines if all of the images that have been requested - * for loading have in fact been properly loaded. - */ - function isReady() { - var ready = true; - for(var k in resourceCache) { - if(resourceCache.hasOwnProperty(k) && - !resourceCache[k]) { - ready = false; - } - } - return ready; - } - - /* This function will add a function to the callback stack that is called - * when all requested images are properly loaded. - */ - function onReady(func) { - readyCallbacks.push(func); - } - - /* This object defines the publicly accessible functions available to - * developers by creating a global Resources object. - */ - window.Resources = { - load: load, - get: get, - onReady: onReady, - isReady: isReady - }; -})(); diff --git a/js/sol1 b/js/sol1 deleted file mode 100644 index 6081fa5..0000000 --- a/js/sol1 +++ /dev/null @@ -1,126 +0,0 @@ -// Enemies our player must avoid -var Enemy = function() { - // Variables applied to each of our instances go here, - // we've provided one for you to get started - this.reset(); - - // The image/sprite for our enemies, this uses - // a helper we've provided to easily load images - this.sprite = 'images/enemy-bug.png'; -}; - -// Update the enemy's position, required method for game -// Parameter: dt, a time delta between ticks -Enemy.prototype.update = function(dt) { - // You should multiply any movement by the dt parameter - // which will ensure the game runs at the same speed for - // all computers. - this.x = (this.x + this.speed); - this.y = 83*this.row; - - if(this.x > 6 * 83){ - this.reset(); - } -}; - -// Draw the enemy on the screen, required method for game -Enemy.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - -Enemy.prototype.reset = function() { - this.col = -1; - this.row = getRandomInt(1,3); - this.x = 101 * this.col; - this.y = 83 * this.row; - this.speed = getRandomInt(2,6); -}; - -// Now write your own player class -// This class requires an update(), render() and -// a handleInput() method. -var Player = function() { - // Variables applied to each of our instances go here, - // we've provided one for you to get started - this.reset(); - - // The image/sprite for our enemies, this uses - // a helper we've provided to easily load images - this.sprite = 'images/char-boy.png'; -}; - -Player.prototype.update = function(dt) { - if(this.moveable) { - this.x = 101 * this.col; - this.y = 83 * this.row; - } - - if(this.y < 83 && this.moveable) { - this.moveable = false; - return true; - } - - return false; -}; - -Player.prototype.render = function() { - ctx.drawImage(Resources.get(this.sprite), this.x, this.y); -}; - -Player.prototype.reset = function() { - this.col = getRandomInt(0,4); - this.row = 5; - this.moveable = true; -}; - -Player.prototype.handleInput = function(key) { - switch (key){ - case 'left': - this.col--; - break; - case 'up': - this.row--; - break; - case 'right': - this.col++; - break; - case 'down': - this.row++; - break; - } - if(this.col < 0) this.col = 0; - if(this.col > 4) this.col = 4; - if(this.row < 0) this.row = 0; - if(this.row > 5) this.row = 5; -}; - -function getRandomInt(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; -} - - -// Now instantiate your objects. -// Place all enemy objects in an array called allEnemies -// Place the player object in a variable called player - -var allEnemies = []; -for(var i = 0; i < 3; i++){ - allEnemies.push(new Enemy()); -} - -var player = new Player(); - - - -// This listens for key presses and sends the keys to your -// Player.handleInput() method. You don't need to modify this. -document.addEventListener('keyup', function(e) { - var allowedKeys = { - 37: 'left', - 38: 'up', - 39: 'right', - 40: 'down' - }; - - player.handleInput(allowedKeys[e.keyCode]); -}); \ No newline at end of file