GithubHelp home page GithubHelp logo

game-time's Introduction

Game Time -- Breakout

A browser-playable version of Breakout using Mocha test-driven development. Built off the Game Time Starter Kit. This version is full-featured and playable, including game over, levels of difficulty, live scoring, and high score.

Usage

Keyboard Controls

  • space bar to start or pause game
  • left arrow to move paddle to the left
  • right arrow to move paddle to the right

Authors

  • Lindsay Parker
  • Cole Worsley

Game Time Starter Kit (FE - Module 2)

Basic Game Time starter kit.

Initial Setup

One person from your project will sets up the repository. That one person should follow these steps:

  1. Clone this starter kit repository and rename the repository to game-time in one command
git clone [email protected]:turingschool-examples/game-time-starter-kit-FEm1.git game-time
  1. Change into the game-time directory

  2. Remove the default remote (origin)

git remote rm origin
  1. Create a new repository on GitHub named game-time

  2. Add your new repository remote to the game time starter kit - your remote URL and user name will be different in the command below

git remote add origin [email protected]:robbiejaeger/game-time.git
  1. Install the dependencies of the starter kit
npm install
  1. Add, commit, and push up to your repository
git add .
git commit -m "Initial commit using starter kit"
git push origin master
  1. Now add your team member(s) as collaborators to the repository. They can now clone down your game-time repository as normal.

  2. Once each partner clones down the repo, they need to run npm install to install the dependencies on their machine.

Run the Server

To see your code in action, you need to fire up a development server. Use the command:

npm start

Once the server is running, visit in your browser:

  • http://localhost:8080/webpack-dev-server/ to run your application.
  • http://localhost:8080/webpack-dev-server/test.html to run your test suite in the browser.

To build the static files:

npm run build

Run Tests in the Terminal

To run all of your tests:

npm test

File Organization

Webpack is a little opinionated about how files are organized. Here is a brief guide on how to organize development and test files.

Development Files

Node and webpack work together to help us organize our files and keep responsibilities separated.

For example, if we have the lib/index.js file and a lib/Block.js file:

lib/index.js

var Block = require('./Block');

var canvas = document.getElementById('game');
var context = canvas.getContext('2d');

var blocks = [];

blocks.push(new Block(50, 50, 10, 10, context));
blocks.push(new Block(100, 50, 10, 10, context));

requestAnimationFrame(function gameLoop() {
  context.clearRect(0, 0, canvas.width, canvas.height);

  this.blocks.forEach(function(block){
    block.draw()
    block.move()
  })

  requestAnimationFrame(gameLoop);
});

lib/Block.js

function Block(x, y, width, height, context) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.context = context;
}

Block.prototype.draw = function () {
  this.context.fillRect(this.x, this.y, this.width, this.height);
};

Block.prototype.move = function () {
  this.y++;
};

module.exports = Block;

All of the Block.js code could live in the index.js file, but that would go against our philosophy of separating responsibility between files.

There are two main things to pay attention to here:

  1. At the top of the index.js file, we require the Block.js file using the line of code var Block = require('./Block'); (we leave out the .js). This brings in the code from the Block.js file so we can use that file's code in the index.js file.

  2. In the Block.js file, the bottom line says module.exports = Block; which says what we want this file to export when we say require in other files, like in index.js.

So now we have two files that can share code between each other, but we have to pay attention to what we export and what we require. If we didn't do this, then when we try to make a new Block in the index.js file, it won't know what Block we're talking about!

Test Files

Near the end of game time, you will have multiple objects for your game that are tested separately with individual test files. The test/index.js file serves as an "entry point" for mocha to load all of the tests you write.

Test file organization is a bit different from development files. If we want to test the Block.js file from above, then this is how we would do it. For each object file (in this case block.js), we want to have a corresponding test file. So in the test directory, we would create a new file called test/Block-test.js. Here is what that file would look like:

test/Block-test.js

var chai = require('chai');
var assert = chai.assert;

var Block = require('../lib/Block');

describe('Block', function() {
  context('with default attributes', function() {
    // Your tests here...  
  });  
});

test/index.js

require('./Block-test')

Two main points to pay attention to:

  1. In the Block-test.js file, we require the Block.js file so that we can construct blocks in our tests.

  2. In the test/index.js file, we require the Block-test.js file so that we can view the test results in the browser (at http://localhost:8080/webpack-dev-server/test.html).

game-time's People

Contributors

lindsaywparker avatar coleworsley avatar robbiejaeger avatar nfosterky avatar

Watchers

 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.