Skip to content

"Treasure Hunt" A web-based game showcasing drag-and-drop functionality in HTML, CSS, and JavaScript. Players take turns hiding treasures and bombs in boxes, challenging each other to find the gold while avoiding the bombs. A fun project for learning web development basics.

Notifications You must be signed in to change notification settings

PavanGuptaZ/treasure-hunt

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Treasure Hunt

Treasure Hunt, an interactive web-based game developed to demonstrate drag-and-drop functionality using HTML, CSS, and JavaScript. This game provides a fun and engaging way to test your luck and strategic thinking. Two players alternate roles between a hider and a seeker in a suspenseful quest to find hidden treasures amidst dangers.

treasure-hunt01

About Project

I created Treasure Hunt during my journey learning web development to better understand and implement fundamental web technologies. This project served as a hands-on approach to mastering HTML5, CSS3, and JavaScript, with a particular focus on enhancing my skills in handling various event listeners such as dragstart, dragend, dragover, dragenter, dragleave, and drop.

Game Rules

Treasure Hunt is played with the following rules:

  • The game board consists of 12 boxes.
  • Each round, one player takes on the role of the hider and the other as the seeker.

treasure-hunt02

  • The hider places a gold object and a bomb in two separate boxes of their choice.

treasure-hunt03

  • The seeker then attempts to find the gold within three tries:

treasure-hunt04

  • If the seeker finds the gold, they win.
  • If the seeker picks the box with the bomb, they lose immediately.
  • If the seeker fails to find the gold after three attempts, they also lose.

treasure-hunt05

Features:

  • Drag and Drop Interface: Utilize an intuitive drag-and-drop mechanic to place the gold and bomb in the boxes.
  • Dynamic Gameplay: Each game round is unpredictable, providing fresh and exciting challenges.
  • Multiplayer Fun: Designed for two players to challenge each other in turns.
  • Sleek Design: A simple yet appealing interface that keeps the focus on gameplay.

Technologies Used

  • HTML5
  • CSS3
  • JavaScript

Installation:

Clone this repository to your local machine.

git clone https://github.com/PavanGuptaZ/treasure-hunt.git

cd treasure-hunt
npm install
npm run dev

Project Structure

  • index.html - The entry point of the game. Contains the basic structure and game setup.
  • Treasure_hunt.css - Contains all the styling necessary for the game's visual elements.
  • Treasure_hunt.js - Includes the interactivity, game logic, and drag-and-drop functionality.
  • Images/ - Holds all the graphical assets used in the game, such as icons for the gold and the bomb.

Contributing

Interested in contributing to the Treasure Hunt game? Great! Simply fork the repository, make your changes, and submit a pull request.

About

"Treasure Hunt" A web-based game showcasing drag-and-drop functionality in HTML, CSS, and JavaScript. Players take turns hiding treasures and bombs in boxes, challenging each other to find the gold while avoiding the bombs. A fun project for learning web development basics.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published