v0.4.3 - Bugfixes

Check changelog for current changes. Still need to get rid of #46 and #47 before I say v0.4.5 is done. Going to look into #20 and #29 as well for v0.4.5.

CHANGELOG.txt

@@ -4,6 +4,40 @@ Known Bugs can be found at the issues page on GitHub here: https://github.com/cr
 
 ####################################################################################################################
 
+v0.4.5 --- Released:
+
+	Additions:
+		Gameplay:
+			- Expanded map to 4x it's size (6400x3840)
+			- Changed Player's weapons to be on the outside of their body
+				- Player's weapons also go transparent when they are invincible
+			- Changed players to be fully colored in (just black for now)
+		UI:
+			- Moved Player name to be on top of player
+			- Moved Player Ammo up a pixel
+			- Player name and Ammo are less transparent
+
+	Changes:
+		- Changed grid.png to be 4x it's original size (Was: 1600x900, Now: 6400x3840)
+
+	Fixes:
+		- Player will try to respawn if respawn area is occupied by a block - Fixes #43
+		- Grid was not updating player's positions correctly - Fixes #44, #45
+		- Client wouldn't check for ammo when attempting to shoot - Fixes #40
+		- Added offsets to mouse calculation for other deadzones - Fixes #39
+
+	Other:
+		- Added GitHub Issue template
+		- Updated README.md
+
+	SPECIAL THANKS:
+	Art Assets:
+		Clinton Bone
+	Debuggers:
+		Marko Vehmas
+
+####################################################################################################################
+
 v0.4.0 --- Released: 5-2-2017
 	Additions:
 		Gameplay:
@@ -41,16 +75,17 @@ v0.4.0 --- Released: 5-2-2017
 		- Only send cGame.ctxUI to drawName/drawAmmo
 		- Bullets fly directly towards mouse, no offset - prevents #31
 		- Changed cPlayer.drawSelf() and cBullet.drawSelf() to only pass in ctx not cGame entirely
-	
+
 	Other:
 		- Began documenting changes in changelogs.
 		- Updated LICENSE.md
-		- Created a GitHub issues template
-
+
 SPECIAL THANKS:
+Art Assets:
+	Clinton Bone
 Debuggers:
 	Reed Kendall, Alex Meyer, Tony Dols, Marko Vehmas
 Assistance:
 	Seth Berrier
 
-####################################################################################################################
+####################################################################################################################

ISSUE_TEMPLATE.md

@@ -0,0 +1,22 @@
+**Please fill out this Issue template to the best of your ability!**
+
+####Type of Issue
+- [x] This Issue is a Bug
+- [ ] This Issue is a Feature Request
+- [ ] This Issue is a Design Issue/Request
+
+**Hint:** *Design Issues or Requests are changes to existing features, not new ones.*
+
+###Description of the Issue:
+
+
+
+###Steps to reproduce the Issue (For Bugs):
+
+- [x] I am using Google Chrome
+- [ ] I am using Mozilla Firefox
+- [ ] I am using *YOUR_BROWSER*
+
+
+
+###Additional comments or information:

README.md

@@ -1,2 +1,49 @@
-# bands
-A real-time online multiplayer CTF shooter game
+# buildnshoot.io v0.4.5
+An online multiplayer shooter game
+
+**Please post any bugs or feature requests on the [Issues page](https://github.com/crkellen/bands/issues)!**
+
+##How to play:
+###Controls:
+**Movement:** Move using the WASD keys.
+**Aiming:** Aim using your mouse. Where the mouse points, you will aim.
+**Shooting:** Shoot by pressing Left Mouse Button.
+**Building:** Switch to Build Mode by pressing Right Mouse Button. Then press Left Mouse Button to build on a tile adjacent to you. **Note:** You cannot build if a player is occupying the tile!
+
+###Goals:
+Currently the game is just a endless fighter, but soon there will be objectives for each team to compete for. I have not finalized the goals yet, and there may end up being multiple game modes.
+
+###Tips:
+- Blocks can be destroyed by shooting them!
+- You can see when the other players have to reload, use this to your advantage!
+
+##Weapons:
+Currently there is only a single weapon implemented. More will be added later! Full stats will be added later once they are closer to being finalized.
+
+###Rifle:
+High Damage, Slow Fire Rate, Medium Reload Time, Medium Clip Size, Fast Projectile Speed, Good Short-Range Accuracy, Good Long-Range Accuracy.
+
+###SMG (Not Implemented):
+Low Damage, Fast Fire Rate, Long Reload Time, Large Clip Size, Average Projectile Speed, Fair Short-Range Accuracy, Fair Long-Range Accuracy.
+
+###Shotgun (Not Implemented):
+High Damage, Average Fire Rate, Short Reload Time, Small Clip Size, Average Projectile Speed, Good Short-Range Accuracy, Poor Long-Range Accuracy.
+
+##Updates:
+**Please check the CHANGELOG.txt for a list of current updates**
+
+###Planned Features:
+- Two teams, players will join either team (with balancing)
+- Objectives, this may be a Capture the Flag objective or capture zones, or something else entirely
+- At least two other weapons, SMG and Shotgun listed above
+- Images for the players, weapons, bullets, blocks
+- Rifle will be a hitscan not a projectile
+- Some sort of non-intrusive Ad system for monetization
+
+##Other Information:
+You can see my other work on my personal website at [http://lutzkellen.com/](http://lutzkellen.com/).
+
+##License:
+I am leaving this open source because I think it may help someone else make their own games.
+For any questions please contact me.
+[GNU](LICENSE)

client/js/Game.js

@@ -67,7 +67,6 @@ export class cPlayer {
   drawSelf(ctx, xView, yView) {
     //let x = this.x - cGame.cPlayers[cGame.selfID].x + cGame.ctx.canvas.width/2;
     //let y = this.y - cGame.cPlayers[cGame.selfID].y + cGame.ctx.canvas.height/2;
-
     let x = this.x - xView;
     let y = this.y - yView;
 
@@ -83,12 +82,15 @@ export class cPlayer {
     //User feedback for respawn invincibility
     if( this.invincible === true ) {
       ctx.strokeStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
     } else {
       ctx.strokeStyle = 'black'; //#TODO: This will change to team color later
+      ctx.fillStyle = 'black';
     }
 
     ctx.beginPath();
     ctx.arc(x, y, 20, 0, 2*Math.PI);
+    ctx.fill();
     ctx.stroke();
     //ctx.drawImage(Imgs.player, 0, 0, Imgs.player.width, Imgs.player.height, x - width/2, y - height/2, width, height);
     //ctx.fillStyle = '#008BCC';
@@ -98,10 +100,16 @@ export class cPlayer {
     let targetX = this.mX - ctx.canvas.width/2;
     let targetY = this.mY - ctx.canvas.height/2;
     //Check if within the deadzones
-    if( xView === 0 ) {
+    if( xView === 0 ) {     //LEFT
+      targetX = this.mX - x;
+    }
+    if( xView === 4800 ) {  //RIGHT
       targetX = this.mX - x;
     }
-    if( yView === 0 ) {
+    if( yView === 0 ) {     //TOP
+      targetY = this.mY - y;
+    }
+    if( yView === 3040 ) {  //BOTTOM
       targetY = this.mY - y;
     }
 
@@ -110,7 +118,12 @@ export class cPlayer {
     ctx.save();
     ctx.translate(x, y);
     ctx.rotate(theta);
-    ctx.fillStyle = '#008BCC';
+    ctx.translate(30, 0); //Move the gun to the outside of the player
+    if( this.invincible === true ) {
+      ctx.fillStyle = 'rgba(65, 135, 255, 0.5)';
+    } else {
+      ctx.fillStyle = 'rgba(65, 135, 255, 1)';
+    }
     //ctx.drawImage(Imgs.gun, 0, 0);
     ctx.fillRect(19/2 * -1, 8/2 * -1, 19, 8);
     ctx.restore();
@@ -120,17 +133,17 @@ export class cPlayer {
     let x = this.x - xView;
     let y = this.y - yView;
 
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
-    ctx.fillText(this.name, x - this.name.length * 2.5, y - 25);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillText(this.name, x - this.name.length * 2.5, y);
   } //cPlayer.drawName()
 
   drawAmmo(ctx, xView, yView) {
     let x = this.x - xView;
     let y = this.y - yView;
 
     let ammoString = `${this.ammo}/${this.maxAmmo}`;
-    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
-    ctx.fillText(ammoString, x - 8, y + 17);
+    ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+    ctx.fillText(ammoString, x - 8, y + 16);
   } //cPlayer.drawAmmo()
 } //class cPlayer
 
@@ -326,58 +339,33 @@ export class Map {
   } //Map.constructor()
 
   generate() {
-    /*
-    var ctx = document.createElement('canvas').getContext('2d');
-    ctx.canvas.width = this.width;
-    ctx.canvas.height = this.height;
-
-    var rows = ~~(this.width/44) + 1;
-    var columns = ~~(this.height/44) + 1;
-
-    var color = 'red';
-    ctx.save();
-    ctx.fillStyle = 'red';
-    for (var x = 0, i = 0; i < rows; x+=44, i++) {
-      ctx.beginPath();
-      for (var y = 0, j=0; j < columns; y+=44, j++) {
-        ctx.rect (x, y, 40, 40);
-      }
-      color = (color == 'red' ? 'blue' : 'red');
-      ctx.fillStyle = color;
-      ctx.fill();
-      ctx.closePath();
-    }
-    ctx.restore();
-
-    // store the generate map as this image texture
     this.image = new Image();
-    this.image.src = ctx.canvas.toDataURL('image/png');
+    this.image.src = Imgs.grid.src;
 
-    // clear context
-    ctx = null;
-    */
-    var ctx = document.createElement('canvas').getContext('2d');
+    /*//#FIXME: ISSUE #48
+    let ctx = document.createElement('canvas').getContext('2d');
     ctx.canvas.width = this.width;
     ctx.canvas.height = this.height;
 
-    var rows = this.width / 1600; //Width of grid image
-    var cols = this.height / 960; //Height of grid image
+    let rows = this.width / 1600; //Width of grid image
+    let cols = this.height / 960; //Height of grid image
 
-    var gridImage = new Image();
+    let gridImage = new Image();
     gridImage.src = Imgs.grid.src;
     //Layer the image four times larger
-    //ctx.save();
-    for( var x = 0, i = 0; i < rows; x += 1600, i++ ) {
-      for( var y = 0, j = 0; j < cols; y += 960, j++ ) {
+    ctx.save();
+    for( let x = 0, i = 0; i < rows; x += 1600, i++ ) {
+      for( let y = 0, j = 0; j < cols; y += 960, j++ ) {
         ctx.drawImage(gridImage, x, y);
       }
     }
-    //ctx.restore();
+    ctx.restore();
 
     this.image = new Image();
     this.image.src = ctx.canvas.toDataURL('image/png');
 
     ctx = null;
+    */
   } //Map.generate()
 
   draw(ctx, xView, yView) {
@@ -407,7 +395,6 @@ export class Map {
     //Match destination with source to not scale the image
     dWidth = sWidth;
     dHeight = sHeight;
-
     ctx.drawImage(this.image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
   } //Map.draw()
 } //class Map

client/js/client.js

@@ -2,23 +2,27 @@ const ctx = document.getElementById('canvas-game').getContext('2d');
 ctx.translate(0.5, 0.5);
 const ctxUI = document.getElementById('canvas-ui').getContext('2d');
 
+//World constants
+const WORLD_WIDTH = 6400;
+const WORLD_HEIGHT = 3840;
+
 import { Game, cPlayer, cBullet, cBlock, Camera, Map } from './Game';
 var io = require('socket.io-client');
 //Replace with hosting IP (144.13.22.62) 'http://localhost'
 var socket = io();
 var cGame = new Game(ctx, ctxUI);
 var playerName = '';
 
-var GameMap = new Map(6400, 3840);
+var GameMap = new Map(WORLD_WIDTH, WORLD_HEIGHT);
 GameMap.generate(cGame.ctx);
 
 let cam = {
   xView: 0,
   yView: 0,
   canvasWidth: cGame.ctx.canvas.width,
   canvasHeight: cGame.ctx.canvas.height,
-  worldWidth: 6400,
-  worldHeight: 3840
+  worldWidth: WORLD_WIDTH,
+  worldHeight: WORLD_HEIGHT
 };
 var GameCamera = new Camera(cam);
 
@@ -173,19 +177,28 @@ $(document).ready( () => {
         //Check if within the deadzones
         let mouse = getMousePos(cGame.ctx, e);
         if( cGame.selfID !== null ) {
-          if( GameCamera.xView === 0 ) {
-            x = mouse.x - cGame.cPlayers[cGame.selfID].x - GameCamera.xView;
+          //Offset the calculation if in a deadzone
+          let xOffset = cGame.cPlayers[cGame.selfID].x - GameCamera.xView;
+          let yOffset = cGame.cPlayers[cGame.selfID].y - GameCamera.yView;
+          if( GameCamera.xView === 0 ) {      //LEFT
+            x = mouse.x - xOffset;
+          }
+          if( GameCamera.xView === 4800 ) {      //RIGHT
+            x = mouse.x - xOffset;
+          }
+          if( GameCamera.yView === 0 ) {      //TOP
+            y = mouse.y - yOffset;
           }
-          if( GameCamera.yView === 0 ) {
-            y = mouse.y - cGame.cPlayers[cGame.selfID].y - GameCamera.yView;
+          if( GameCamera.yView === 3040 ) {   //BOTTOM
+            y = mouse.y - yOffset;
           }
         }
         //Update mouse angle
         let angle = Math.atan2(y, x) / Math.PI * 180;
         socket.emit('keyPress', {inputID: 'mouseAngle', state: angle});
 
         //Shoot
-        if(cGame.canShoot === true) {
+        if( cGame.canShoot === true && cGame.cPlayers[cGame.selfID].ammo > 0 ) {
           cGame.canShoot = false;
           socket.emit('keyPress', {inputID: 'attack', state: true});
           setTimeout( () => {
@@ -378,6 +391,7 @@ setInterval( () => {
   if( !cGame.selfID ) {
     return;
   }
+  //console.info(GameCamera.yView);
   cGame.ctx.clearRect(0, 0, cGame.ctx.canvas.width, cGame.ctx.canvas.height);
   GameCamera.update();
   GameMap.draw(cGame.ctx, GameCamera.xView, GameCamera.yView);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "bands-io",
-  "version": "0.4.0",
+  "version": "0.4.3",
   "description": "A real-time online multiplayer CTF shooter game",
   "main": "src/app.js",
   "scripts": {