diff --git a/submissions/HelenGreent/js-oop/app.js b/submissions/HelenGreent/js-oop/app.js new file mode 100644 index 0000000000..eb1c4c7456 --- /dev/null +++ b/submissions/HelenGreent/js-oop/app.js @@ -0,0 +1,155 @@ +const canvas = { + width: 101, + height: 82, + number_of_blocks_x: 5, + number_of_blocks_y: 6, + padding_bottom: 62, +}; + +const enemyConfiguration = { + min_speed: 100, + top_initial_y: 60, + middle_initial_y: 145, + bottom_initial_y: 230, + padding: 50, +}; + +const playerConfiguration = { + initial_x: 200, + initial_y: 400, +}; + +const water_edge = 52; +const initial_enemy_x = -canvas.width; +const edge_x = canvas.width * canvas.number_of_blocks_x; +const edge_y = + canvas.height * canvas.number_of_blocks_y - canvas.padding_bottom; + +// Enemies our player must avoid +const Enemy = function (y) { + // Variables applied to each of our instances go here, + // we've provided one for you to get started + const random_speed = Math.floor(Math.random() * 200); + this.x = initial_enemy_x; + this.y = y; + this.speed = enemyConfiguration.min_speed + random_speed; + + // 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.speed * dt; + if (this.x > edge_x) { + this.x = -canvas.width; + } +}; + +// 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. +const Player = function (x, y) { + this.x = x; + this.y = y; + this.sprite = "images/char-boy.png"; +}; + +Player.prototype.update = function () { + this.checkCollision(); +}; + +Player.prototype.checkCollision = function () { + allEnemies.forEach(function (enemy) { + if ( + this.y - enemyConfiguration.padding < enemy.y && + this.y + enemyConfiguration.padding > enemy.y && + this.x - enemyConfiguration.padding < enemy.x && + this.x + enemyConfiguration.padding > enemy.x + ) { + this.lose(); + } + }, this); +}; + +Player.prototype.render = function () { + ctx.drawImage(Resources.get(this.sprite), this.x, this.y); +}; + +Player.prototype.handleInput = function (keyCode) { + if (this.y >= 0 && keyCode === "up") { + this.y -= canvas.height; + } + if (this.y < edge_y - canvas.height && keyCode === "down") { + this.y += canvas.height; + } + if (this.x > 0 && keyCode === "left") { + this.x -= canvas.width; + } + if (this.x < edge_x - canvas.width && keyCode === "right") { + this.x += canvas.width; + } + if (this.y < water_edge) { + this.wins(); + } +}; + +Player.prototype.resetPosition = function () { + this.x = playerConfiguration.initial_x; + this.y = playerConfiguration.initial_y; +}; + +Player.prototype.wins = function () { + setTimeout(() => { + alert("You win! Congratulation"); + this.resetPosition(); + }, 100); +}; + +Player.prototype.lose = function () { + setTimeout(() => { + this.resetPosition(); + }, 100); + alert("Game over. Try again!"); +}; + +// Now instantiate your objects. +// Place all enemy objects in an array called allEnemies +// Place the player object in a variable called player + +const allEnemies = [ + new Enemy(enemyConfiguration.top_initial_y), + new Enemy(enemyConfiguration.middle_initial_y), + new Enemy(enemyConfiguration.bottom_initial_y), +]; + +const player = new Player( + playerConfiguration.initial_x, + playerConfiguration.initial_y +); + +// This listens for key presses and sends the keys to your +// Player.handleInput() method. You don't need to modify this. +function handleClick(e) { + const allowedKeys = { + 37: "left", + 38: "up", + 39: "right", + 40: "down", + }; + + player.handleInput(allowedKeys[e.keyCode]); +} + +document.addEventListener("keyup", handleClick); diff --git a/submissions/HelenGreent/tiny-js-world/index.js b/submissions/HelenGreent/tiny-js-world/index.js deleted file mode 100644 index 3e7640d7af..0000000000 --- a/submissions/HelenGreent/tiny-js-world/index.js +++ /dev/null @@ -1,77 +0,0 @@ -/* Refer to https://github.com/OleksiyRudenko/a-tiny-JS-world for the task details - Complete the below for code reviewers' convenience: - - Code repository: https://github.com/helengreent/a-tiny-JS-world/tree/populate-world - Web app: https://helengreent.github.io/a-tiny-JS-world/ - */ -// ======== OBJECTS DEFINITIONS ======== -// Define your objects here - -const dog = { - species: "dog", - name: "Rex", - gender: "male", - legs: 4, - hands: 0, - saying: "woof", -}; - -const cat = { - species: "cat", - name: "Archie", - gender: "male", - legs: 4, - hands: 0, - saying: "meow", -}; - -const man = { - species: "human", - name: "Nate", - gender: "male", - legs: 2, - hands: 2, - saying: "Hello", -}; - -const woman = { - species: "human", - name: "Serena", - gender: "female", - legs: 2, - hands: 2, - saying: "Hey!", -}; - -const catWoman = { - species: "catWoman", - name: "Blair", - gender: "female", - legs: 2, - hands: 2, - saying: cat.saying, -}; - -const populations = [dog, cat, man, woman, catWoman]; -const properties = ["species", "name", "gender", "legs", "hands", "saying"]; - -// ======== OUTPUT ======== -/* Use print(message) for output. - Default tag for message is
. Use print(message,'div') to change containing element tag.
-   Message can contain HTML markup. You may also tweak index.html and/or styles.css.
-   However, please, REFRAIN from improving visuals at least until your code is reviewed
-   so code reviewers might focus on a single file that is index.js.
-   */
-/* Print examples:
-   print('ABC');
-   print('ABC');
-   print('ABC', 'div');
-
-   print('human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny');
-   print('human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny');
-   print('human; John; male; 2; 2; Hello world!; Rex, Tom, Jenny', 'div');
-   */
-
-const message = (arr, types) =>
-  arr.map((item) => types.map((type) => item[type]).join("; ")).join("\n");
-print(message(populations, properties));