Giter Club home page Giter Club logo

js-project's Introduction

The Snake Game

JS PROJECT

  • This Website was created for the sole purpose of completing the second Milestone Project for the Code Institute's Full Stack Developer course. It was built using the knowledge gained from the HTML, CSS, User Centric Design, JavaScript Fundamentals and Interactive Frontend Development modules. A full list of technologies used can be found in the technologies section of this document.

Live project

The live SnakeGame can be found View here

Screenshot

Table of contents

  • User experience
    • User Stories
      • Snake Game
    • Design
      • Colour Scheme
      • Typography
      • Imagery
    • Features
      • Current Features
      • Future Features
    • Technologies Used
      • Languages Used.
      • Frameworks Libraries and Programs
    • Testing
      • Testing User Stories
      • Code Testing
    • Deployment
      • Github, Gitpod, Git and Gitub pages
    • Credits
      • Code
      • Media
      • Content.
      • Acknowledgements Table of contents generated with markdown-toc

Design

Colour Scheme

  • The two main colours used to create the game are blue colour #hsl, and a yellow colour #hsl representing the snake and food. Other colours were also used for border and background colour between the two main colours to create sections when playing the game .
  • I also used black colour for my borders respectively and also cream colour #ccc for my game board to display the snake and the food .

Typography

  • In built text font was used in creating the snake game from inception to conclusion.

Imagery

  • No physical images will be used on the site. The snake image will be drawn with code by using Scalable Vector Graphics (SVG) to display this on the HTML page.

TECHNOLOGIES USED

Languages Used.

  • HTML5
  • CSS3
  • JAVASCRIPT

Frameworks Libraries and Programs

  • Git
    • Git was used as a version control in the terminal.
  • Github
    • Github was used to create and store the project repository.
  • Gitpod
    • Gitpod was used to create my files and code the project.

Feature

Current Features

  • Reponsive

    • This is the first responsive snake game which is available on all screen sizes
  • Features

  • Existing Features

    • Game Instructions.
    • Snake image.
    • Win/Lose Scores.
    • User input.
    • Snake Game button to start and re-start game.

Features Left to Implement

  • Game modes: 'Easy' or 'Hard' mode will be added in a future release. Easy mode will start with no figure parts displayed, this will leave 10 guesses. Hard mode will start with the snake and the food structure already drawn, this will leave 6 guesses.

Testing

  • Test Strategy
  • Summary
    • Testing is required on The Snake JavaScript game created for JS Project . All features and user stories documented in the README are to be tested.

    • HTML code must pass through the W3C HTML Validator.

    • CSS code must pass through the W3C CSS Validator.

    • JavaScript code must pass through the JS Validator.

Deployment

Github, Gitpod, Git and Gitub pages

  • How to run the project:.

    • I first created a repository cloning the Code Institutes template on my github page.
    • Once created I opened the page in Gitpod.
    • I then used the terminal to create my index.html file ie, touch index.html.
    • I then created my assets folder , to hold snakeGame.js,food.js,input.js,snake.js and matrix.js.
    • I then created the style.css file within the css folder.
  • Git

    • Once I created the main files and folders I then used the git add . command to add them to the staging area.

    • Once they were staged I then used git commit -m "initial commit" to commit them to github.

    • I then used git push to push the files onto my gihub page.

    • I used these steps to commit the project regularly throughout the development to keep everything saved and up to date on my github.

    • To make my project live I then used github pages.

    • Open a workspace in gitpod in my github

    • create a javascript project in my gitpod

How to play the game

  • Download the game
  • Run it
  • Start playing with the arrow keys.
  • If you lose, it will restart by it's self so you can continue playing the game

Content

  • All content was written by myself.

Acknowledgements

  • Code Institute for getting me to this point
  • My Mentor for his help with this project.

js-project's People

Contributors

aquesidilly avatar

Watchers

James Cloos 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.