First commit

melsdesign · May 2, 2018 · 91250b2 · 91250b2
commit 91250b2
Show file tree

Hide file tree

Showing 24 changed files with 566 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,23 @@
+
+frontend-nanodegree-arcade-game
+This is project 4 of the Google Udacity Frontend Nanodegree Scholarship.
+
+
+How to play
+There are 3 areas of this game world:
+
+At the top, the water
+In the middle, the path
+At the bottom, the grass
+The player begins with 3 
+
+Instructions
+In this game you have a Player and Enemies (Bugs). 
+The goal of the player is to reach the water, without touching into any one of the enemies. 
+The player can move left, right, up and down with the keyboard arrows. 
+The enemies move in varying speeds 
+Once a the player touches the  enemy, the game is reset and the player moves back to the starting point. 
+Once the player reaches the water three times the game is won.
+The player has 3 lives. Every time he collides with an enemy a life is lost.
+
+When all lives are lost the game ends with a dialog showing the score.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,4 @@
+body {
+    text-align: center;
+    background-image: url("../images/horse-desert-graphic.jpg");
+}
diff --git a/images/Gem Blue.png b/images/Gem Blue.png
diff --git a/images/Gem Green.png b/images/Gem Green.png
diff --git a/images/Gem Orange.png b/images/Gem Orange.png
diff --git a/images/Heart.png b/images/Heart.png
diff --git a/images/Key.png b/images/Key.png
diff --git a/images/Rock.png b/images/Rock.png
diff --git a/images/Selector.png b/images/Selector.png
diff --git a/images/Star.png b/images/Star.png
diff --git a/images/char-boy.png b/images/char-boy.png
diff --git a/images/char-cat-girl.png b/images/char-cat-girl.png
diff --git a/images/char-horn-girl.png b/images/char-horn-girl.png
diff --git a/images/char-pink-girl.png b/images/char-pink-girl.png
diff --git a/images/char-princess-girl.png b/images/char-princess-girl.png
diff --git a/images/enemy-bug.png b/images/enemy-bug.png
diff --git a/images/grass-block.png b/images/grass-block.png
diff --git a/images/horse-desert-graphic.jpg b/images/horse-desert-graphic.jpg
diff --git a/images/stone-block.png b/images/stone-block.png
diff --git a/images/water-block.png b/images/water-block.png
diff --git a/index.html b/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>Effective JavaScript: Frogger</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+    <script src="js/resources.js"></script>
+    <script src="js/app.js"></script>
+    <script src="js/engine.js"></script>
+</body>
+</html>
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,132 @@
+// Enemies our player must avoid
+var Enemy = function(obj) {
+    // Variables applied to each of our instances go here,
+    // we've provided one for you to get started
+
+    // The image/sprite for our enemies, this uses
+    // a helper we've provided to easily load images
+    this.sprite = 'images/enemy-bug.png';
+    this.x =obj.x;
+    this.y=obj.y;
+    this.speed =obj.speed;
+};
+
+// Update the enemy's position, required method for game
+// Parameter: dt, a time delta between ticks
+Enemy.prototype.update = function(dt) {
+    if(this.x<=510){
+        this.x =this.x+this.speed*dt;
+    }else{
+         this.x = 0;
+    }
+
+    checkCollision(this);
+};
+    // You should multiply any movement by the dt parameter
+    // which will ensure the game runs at the same speed for
+    // all computers.
+
+// Draw the enemy on the screen, required method for game
+Enemy.prototype.render = function() {
+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+};
+
+// Now write your own player class
+// This class requires an update(), render() and
+// a handleInput() method.
+var Player = function() {
+    this.sprite = 'images/char-boy.png';
+    this.x = 200;
+    this.y = 400;
+    this.score = 0;
+    this.gameOver = false;
+    this.life = 3;
+}
+Player.prototype.update = function(){
+
+};
+
+Player.prototype.render = function(){
+    ctx.drawImage(Resources.get(this.sprite), this.x, this.y);
+    //displayScore
+};
+   //handle keyboard input,every time a key is pressed
+   // an event is registered,this sets the game
+   //controllers
+
+Player.prototype.handleInput = function(allowedKeys){
+
+    if(allowedKeys=='left'){
+        if(this.x>0){
+            this.x = this.x-100;
+        }else{
+            this.x = this.x
+        };
+    }else if(allowedKeys=='right'){
+        if(this.x<400){
+            this.x = this.x+100;
+        }else{
+            this.x = this.x;
+        }
+    }else if(allowedKeys=='up'){
+        if(this.y>0){
+            this.y = this.y-82;
+        }else{
+            this.y = this.y;
+        }
+    }else{
+        if(this.y<400){
+            this.y = this.y+82;
+        }else{
+            this.y = this.y;
+        }
+
+    }
+};
+//check collision actually checks if our player gets
+//in touch with the bugs
+//every time the player touches the bug he loses
+//a life until it is game over
+var checkCollision = function(enemy){
+    if((enemy.x>=player.x-50&&enemy.x<=player.x+70)&&(
+    enemy.y==player.y-10)){
+        player.x =200;
+        player.y =400;
+        if(player.life!=0){
+            player.life--;
+        }else{
+            player.gameOver=true;
+        }
+    }
+    if(player.y<0){
+        player.x =200;
+        player.y =400;
+        player.score++;
+    }
+}
+
+// Now instantiate your objects.
+// Place all enemy objects in an array called allEnemies
+// Place the player object in a variable called player
+var scoreDiv = document.createElement('div');
+var player = new Player();
+var enemy1 = new Enemy({x:-220, y:62, speed:100});
+var enemy2 = new Enemy({x:-100, y:144, speed:60});
+var enemy3 = new Enemy({x:-100, y:226, speed:40});
+var allEnemies = [
+enemy1, enemy2, enemy3
+];
+
+
+// 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]);
+});