Permalink
Browse files

initial commit with the start of a game going

  • Loading branch information...
fabean committed Sep 1, 2016
1 parent ffc42c9 commit 9ca7a7dc1d1ee347ffdb5a3120799784ebe38c52
Showing with 187 additions and 0 deletions.
  1. +1 −0 .gitignore
  2. +1 −0 .nvmrc
  3. +1 −0 css/normalize.min.css
  4. +12 −0 gulpfile.js
  5. +18 −0 index.html
  6. +130 −0 js/main.js
  7. +24 −0 package.json
View
@@ -0,0 +1 @@
+node_modules
View
1 .nvmrc
@@ -0,0 +1 @@
+6.5.0
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -0,0 +1,12 @@
+var gulp = require('gulp');
+var server = require('gulp-server-livereload');
+
+gulp.task('webserver', function() {
+ gulp.src('app')
+ .pipe(server({
+ fallback: 'index.html',
+ livereload: true,
+ directoryListing: true,
+ open: true
+ }));
+});
View
@@ -0,0 +1,18 @@
+<!doctype html>
+<html class="no-js" lang="">
+ <head>
+ <meta charset="utf-8">
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+ <title>BuffHammer</title>
+ <meta name="description" content="">
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+
+ <link rel="stylesheet" href="css/normalize.min.css">
+
+ </head>
+ <body>
+ <canvas id="buffhammer"></canvas>
+
+ <script src="js/main.js"></script>
+ </body>
+</html>
View
@@ -0,0 +1,130 @@
+let c,
+ ctx,
+ fps = 60,
+ backGround,
+ player = {
+ ship: {
+ color: '#fff',
+ x: 0,
+ y: 0,
+ speed: {
+ x: 5,
+ y: 5
+ },
+ width: 10,
+ height: 10
+ },
+ score: 0,
+ lives: 10,
+ },
+ keysDown = {};
+
+// I've made player an object with ship instead it because I would think lots of other things go in there too.
+
+window.requestAnimFrame = (function(){
+ return window.requestAnimationFrame ||
+ window.webkitRequestAnimationFrame ||
+ window.mozRequestAnimationFrame ||
+ function( callback ){
+ window.setTimeout(callback, 1000 / fps);
+ };
+})();
+
+window.onload = () => {
+ c = document.getElementById('buffhammer');
+ c.width = window.innerWidth;
+ c.height = window.innerHeight;
+
+ ctx = c.getContext('2d');
+
+ backGround = {
+ color: '#000',
+ x: 0,
+ y: 0,
+ width: c.width,
+ height: c.height
+ };
+
+ // Handle keyboard controls
+ addEventListener("keydown", function (e) {
+ keysDown[e.keyCode] = true;
+ }, false);
+ addEventListener("keyup", function (e) {
+ delete keysDown[e.keyCode];
+ }, false);
+
+ animationLoop();
+}
+
+let animationLoop = () => {
+ requestAnimFrame(animationLoop);
+ render();
+}
+
+let render = () => {
+ // all of your render code goes here
+ drawRect(backGround);
+
+ movePlayer();
+ drawRect(player.ship);
+
+ // write the score
+ let score = {
+ message: `Score: ${player.score}`,
+ x: 100,
+ y: 50
+ }
+ drawText(score);
+
+ // write the health
+ let health = {
+ message: `Lives Remaining: ${player.lives}`,
+ x: 500,
+ y: 50
+ }
+ drawText(health);
+}
+
+let movePlayer = () => {
+ if (38 in keysDown) { // Player holding up
+ if (10 <= player.ship.y) {
+ player.ship.y += -(player.ship.speed.y);
+ }
+ }
+ if (40 in keysDown) { // Player holding down
+ if (c.height-10 >= player.ship.y) {
+ player.ship.y += player.ship.speed.y;
+ }
+ }
+ if (37 in keysDown) { // Player holding left
+ if (10 <= player.ship.x) {
+ player.ship.x += -(player.ship.speed.x);
+ }
+ }
+ if (39 in keysDown) { // Player holding right
+ if (c.width-10 >= player.ship.x) {
+ player.ship.x += player.ship.speed.x;
+ }
+ }
+}
+
+// if you want to draw lots of circles you'll use this function
+let drawCircle = (circle) => {
+ ctx.fillStyle = circle.color;
+ ctx.beginPath();
+ ctx.arc(circle.x, circle.y, circle.radius, 0, Math.PI*2, true);
+ ctx.fill();
+}
+
+// if you want to draw lots of rectangles you'll use this function
+let drawRect = (rectangle) => {
+ ctx.fillStyle = rectangle.color;
+ ctx.fillRect(rectangle.x, rectangle.y, rectangle.width, rectangle.height);
+};
+
+// if you want to draw some text on the screen use this function
+let drawText = (text) => {
+ ctx.fillStyle = text.color | '#fff';
+ ctx.font = '20px Helvetica';
+ ctx.fillText(text.message, text.x, text.y);
+};
View
@@ -0,0 +1,24 @@
+{
+ "name": "buffhammer",
+ "version": "1.0.0",
+ "description": "A Canvas Game",
+ "main": "index.js",
+ "scripts": {
+ "test": "echo \"Error: no test specified\" && exit 1"
+ },
+ "repository": {
+ "type": "git",
+ "url": "git+https://github.com/fabean/buffhammer.git"
+ },
+ "author": "Josh Fabean",
+ "license": "ISC",
+ "bugs": {
+ "url": "https://github.com/fabean/buffhammer/issues"
+ },
+ "homepage": "https://github.com/fabean/buffhammer#readme",
+ "devDependencies": {
+ "gulp": "^3.9.1",
+ "gulp-serve": "^1.4.0",
+ "gulp-server-livereload": "^1.8.4"
+ }
+}

0 comments on commit 9ca7a7d

Please sign in to comment.