Code Monkey home page Code Monkey logo

game01's Introduction

 Project #1: The Spooktacular House

Overview

In this game, users will try to eliminate creatures in a haunted house by clicking on them as they randomly appear in windows. Player wins the game by making it through all three rounds before running out of lives.

Landing Page Design

The design for the landing page can be found at this site.

login-design

Limitations

  • This landing page was just a design and not an actual page so I was not able to get the exact image that was used in the background of this landing page.

Game Design

Wireframe

game-design

  • The box to the left will hold user information collected from the form and game such as: username, points, time left, and lives left.
  • The boxes to the right represent the windows that creatures will randomly appear in.

Approach

  • setInterval was used to have the divs grow and shrink as the timer counted down
  • Math.random was used to randomize the intervals of each window growing and shrinking
  • Math.random was also used to randomize which image from the array of images will be displayed in each div
  • jQuery was used to target divs and add event handlers to indicate when clicked

Unsolved Problems

  • I would have liked to add all levels in one object in a js file but I was unable to figure out a streamline way to make this work.
  • I would also like to extend this game to have a two players option.

Technology Used

  • HTML/CSS
  • JavaScript
  • jQuery
  • Flexbox

game01's People

Contributors

krystynakono avatar

Watchers

James Cloos avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.