Skip to content

Reva335/HW2-Game

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Farmer Harvest Game

An enhanced JavaScript mini-game where players control a farmer to collect crops within a time limit. This project demonstrates ES6 modules, arrow functions, this binding, and modern JavaScript practices.

New Features

Q2(a): Different Crop Types with Distinct Point Values

  • Wheat 🌾: 1 point (most common)
  • Pumpkin 🎃: 3 points (medium rarity)
  • Golden Apple 🍎: 5 points (rare, most valuable)

Each crop type has unique visual styling and spawn probabilities.

Q2(b): Difficulty Curve

  • Crop spawn rate increases as time progresses
  • Starts at 0.8 seconds between spawns
  • Reaches up to 3x faster spawn rate by the end
  • Creates escalating challenge and urgency

Q2(d): Moving Obstacles (Crows)

  • Crows 🐦‍⬛: Move horizontally across the screen with bobbing animation
  • Reduce player score by 2 points when touched
  • Spawn occasionally from screen edges
  • Add dynamic challenge and risk/reward gameplay

How to Run the Game

  1. Prerequisites: Modern web browser with ES6 module support
  2. Setup: Simply open index.html in your browser
  3. Controls:
    • Arrow keys (←→↑↓) to move the farmer
    • P key to pause/resume
    • Start button to begin playing
    • Reset button to return to menu

Game Objective

Collect at least 15 points within 60 seconds to win. Different crops award different point values, and avoiding crows is crucial for maintaining your score.

Technical Implementation

ES6 Modules Structure

  • main.js - Entry point and game initialization
  • Game.js - Main game logic and state management
  • Farmer.js - Player character with movement and collision detection
  • Crop.js - Collectible crops with different types and point values
  • Obstacle.js - Static scarecrows and moving crows
  • Input.js - Keyboard input handling
  • Entity.js - Base class for all game objects

Arrow Functions Usage

Arrow functions are used throughout the codebase to preserve lexical this binding:

// Event listeners preserve Game instance context
this.ui.start.addEventListener("click", () => this.start());

// Array processing maintains correct scope
this.crops.filter(c => aabb(this.player, c));
this.crows.forEach(crow => crow.update(dt, this));

// RAF callback preserves Game instance
this.tick = (ts) => {
    this.update(dt);
    this.render();
    requestAnimationFrame(this.tick);
};

this Binding Examples

Arrow Functions: Preserve lexical this from enclosing scope

// In Game constructor - arrow function preserves Game instance
this.tick = (ts) => {
    this.update(dt); // 'this' refers to Game instance
};

Method References: Lose context when passed as callbacks

// Method loses 'this' context when passed as callback
this._onResize = this.onResize.bind(this); // Must use .bind()

Event Listeners: Need explicit binding for cleanup

// Input class - .bind() needed for proper cleanup
this._onKeyDown = this.onKeyDown.bind(this);
window.addEventListener("keydown", this._onKeyDown);

bind() Usage

.bind(this) is used in two specific scenarios:

  1. Event Listener Cleanup (Input.js):
this._onKeyDown = this.onKeyDown.bind(this);
// Allows: window.removeEventListener("keydown", this._onKeyDown);
  1. Resize Handler Cleanup (Game.js):
this._onResize = this.onResize.bind(this);
// Allows: window.removeEventListener("resize", this._onResize);

Code Quality Features

  • JSDoc Comments: All classes and methods documented with type information
  • Modular Architecture: Clean separation of concerns across ES6 modules
  • Modern JavaScript: Uses const/let, template literals, arrow functions
  • Error Handling: Graceful fallbacks for missing DOM elements
  • Performance: Efficient collision detection and rendering

Browser Compatibility

Requires modern browser with ES6 module support:

  • Chrome 61+
  • Firefox 60+
  • Safari 11+
  • Edge 16+

Assignment Requirements Completed

  • Q1: Arrow functions, this binding, and bind() usage with documentation
  • Q2: Two new gameplay features (crop types + difficulty curve + moving obstacles)
  • Q3: ES6 modules with proper import/export and JSDoc comments
  • Q4: Written reflection on JavaScript concepts and improvement suggestions

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors