181 app/scripts/gameView.js
View file
@@ -0,0 +1,181 @@

import Backbone from 'backbone';
import $ from 'jquery';
import router from './router';
import endGameModal from './endGameModal';
import footerView from './footer';
import startGameModal from './startGameModal';
import Player from './player';
import FallingObject from './fallingObj';




function Game(canvas) {
this.gameSize = {x: canvas.width,y: canvas.height};
this.ctx= canvas.getContext("2d");
this.canvas =canvas;
this.player = new Player(this.ctx,this.gameSize, this);
this.objects = []
var self = this;
this.input = 60;
this.score = 0;
this.lives = 3;
this.countdown;
this.paused = false;
this.lastSpawn = -1;
this.spawnRate = 1500;


$("#timer").text("Time: " + this.calculateTime(this.input));
$("#footerScore").text("Current Score: " + this.score);
$("#lives").text("Lives: " + this.lives);

$('#restartBtn').on('click', function() {
// requestAnimationFrame(self.tick.bind(self));
// self.tick();
// self.startInterval();
// self.resetView();
$('startGameModal').hide();
router.gamefunction();

})

$('#pause').on('click', () => {
this.paused = true;
clearInterval(this.countdown);
})

$('#play').on('click', () => {
this.paused = false;
requestAnimationFrame(self.tick.bind(self));
self.startInterval();
})
this.StartOfGame();
}

Game.prototype = {
StartOfGame: function() {
$("#screen").hide();
$(".StartScreen").show();
$('#startBtn').on('click', () => {
$(".StartScreen").hide();
$("#screen").show();
this.startInterval()
requestAnimationFrame(this.tick.bind(this));
})
this.player.draw()
},
calculateTime: function(timer) {
var mins = Math.floor(timer / 60);
var secs = timer % 60;
var time = (mins < 10 ? "0" : "") + mins + ":" + (secs < 10 ? "0" : "") + secs;
return time;
},

startInterval: function() {


$("#timer").text(this.calculateTime(this.input));

this.countdown = setInterval(() => {
this.input -= 1;
var data = this.calculateTime(this.input)
if (this.input > 0 && this.lives > 0) {
$("#timer").text(data);
// this.input--;
} else {
$("#timer").text("LOST!")
clearInterval(this.countdown);
}
}, 1000);
},



tick: function() {
this.time = Date.now();
this.ctx.clearRect(0, 0, this.gameSize.x, this.gameSize.y);
this.player.draw()
this.objects.forEach(obj => {
obj.draw()
})

if (this.time > (this.lastSpawn + this.spawnRate)) {
this.lastSpawn = this.time;
this.objects.push(new FallingObject(this.ctx, this.canvas));
}

this.player.update()
if (this.paused) {
cancelAnimationFrame(this.tick);
}


let hitTestPoint = (object) => {
if (this.player.center.x <= object.x - 50 || this.player.center.x >= object.x + 50) {
return false;
} else if (object.y >= this.player.center.y - 15 && object.y <= this.player.center.y + 15) {
return true;
} else {
return false;
}
}
this.objects = this.objects.filter((object) => {

if (hitTestPoint(object)) {
this.score += 100;
$("#footerScore").text("Current Score: " + this.score);
return false;
} else {
return true;
}
})

function reachedBottom(object,gameSize) {
if (object.y >= gameSize.y) {
return true;
} else {
return false;
}
}
this.objects = this.objects.filter((current, i, arr) => {
if (reachedBottom(current, this.gameSize )) {
this.lives -= 1;
$("#lives").text("Lives: " + this.lives);

return false;
} else {
return true;
}

})


let endGame = () => {
$("#screen").hide();
$("#score").text("Score: " + this.score);
$(".FinishScreen").show();

this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
}
if (this.lives === 0 || this.input === 0) {
cancelAnimationFrame(this.tick.bind(this));
endGame();
} else if (this.lives !== 0 && this.input !== 0 && !this.paused) {
requestAnimationFrame(this.tick.bind(this));
}
},
resetView: function() {
this.score = 0;
this.lives = 3;
this.input = 60;
this.objects = []
$("#footerScore").text("Current Score: " + this.score);
$("#lives").text("Lives: " + this.lives);
$("#timer").text("Time: " + this.calculateTime(this.input));
$(".FinishScreen").hide();
}
};

export default Game;
8 app/scripts/login.js
View file
@@ -13,12 +13,14 @@ var ctx = canvas.getContext("2d");

function loginInfo() {
let login = $(`
<div class="login">
<div class="loginPage">
<form class= "loginForm">
<h2 id="loginHead"> Login </h2>
<input type ="text" class="username" placeholder="username" />
<input type ="password" class="password" placeholder="password" />
<input type="submit" id="loginSubmit" class="submit" name="Login" value="Login">
<button id="signUp"> If you dont have an account sign up> </button>
</form>
</div>
`);
@@ -42,8 +44,8 @@ function loginInfo() {
},
contentType: 'application/json',
success: function(response){
session.username = username;
session.authtoken = response._kmd.authtoken;
session.set('username', response.username);
session.set('authtoken', response._kmd.authtoken);
router.navigate('game', {trigger:true});
$('.username').val('');
$('.password').val('');
46 app/scripts/logout.js
View file
@@ -0,0 +1,46 @@
import Backbone from 'backbone';
import entry from './entry';
import router from './router';
import settings from './settings';
import $ from 'jquery';
import session from './session';

function logoutInfo() {
console.log(session);
let navBtn;
if (localStorage.getItem('authtoken')){

navBtn = $(`
<div class="logout">
<input type="submit" id="logoutSubmit" class="submit" name="Logout" value="Logout">
</div>
`);

}else{
navBtn = $(`
<div class="login">
<input type="button" id="loginBtn" class="submit" name="Login" value="Login">
<input type="button" id="signUpBtn" class="submit" name="Sign Up" value="Sign Up">
</div>
`);
}
navBtn.find('#loginBtn').on('click', function(){
router.navigate('login', {trigger:true});
})
navBtn.find('input[type="submit"]').on('click',function(evt){
evt.preventDefault();

$.ajax({
type: 'POST',
url: `https://baas.kinvey.com/user/${settings.appId}/_logout`,
success: function() {
localStorage.removeItem('authtoken')
// this.clear()
router.navigate('login', {trigger:true});
}
})
})
return navBtn;
}

export default logoutInfo;
46 app/scripts/player.js
View file
@@ -0,0 +1,46 @@

import $ from 'jquery';



var Keyboarder = function() {
var keyState = {};
window.onkeydown = function(e) {
keyState[e.keyCode] = true;
};
window.onkeyup = function(e) {
keyState[e.keyCode] = false;
};
this.isDown = function(keyCode) {
return keyState[keyCode] === true;
};
this.KEYS = {LEFT: 37,RIGHT: 39};
}

function Player(canvas, gameSize, game) {
this.ctx = canvas;
this.game = game;
this.size = {x: 100,y: 20};
this.center = {x: gameSize.x,y: gameSize.y - this.size.x};
this.keyboarder = new Keyboarder();

this.update = function() {
if (this.keyboarder.isDown(this.keyboarder.KEYS.LEFT)) {
this.center.x = Math.max(25, this.center.x - 15);
this.draw(gameSize)
} else if (this.keyboarder.isDown(this.keyboarder.KEYS.RIGHT)) {
this.center.x = Math.min($(window).width() - 25, this.center.x + 15);
this.draw(game.gameSize)
}
}


};
Player.prototype = {
draw: function() {
this.ctx.fillRect(this.center.x - this.size.x / 2,
this.center.y - this.size.y / 2,
this.size.x, this.size.y);
}
}
export default Player;
21 app/scripts/router.js
View file
@@ -6,15 +6,9 @@ import $ from 'jquery';
import footerView from './footer';
import endGameModal from './endGameModal';
import startGameModal from './startGameModal';



function resetCanvas() {
var canvas = document.getElementById("screen");
var ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
}

import logoutInfo from './logout';
import resetCanvas from './game';
import Game from './gameView';

const Router = Backbone.Router.extend({
routes: {
@@ -25,22 +19,25 @@ function resetCanvas() {
'/*': 'redirectFunction'
},
loginfunction: function(){
$('#container').empty(gameView).append(loginInfo());
$('#container').empty().append(loginInfo());
// ctx.clearRect(0, 0, canvas.width, canvas.height);
resetCanvas();
},
signUpFunction: function(){
console.log('signup func');
$('#container').empty().append(signUpInfo());
},

leaderboardFunction: function(){
$('#container').empty().append(highScoreView());

},
gamefunction: function(){
console.log('hi');
$('#container').empty().append(footerView().append(startGameModal()).append(endGameModal()));
gameView();
$('#container').empty().append(footerView().append(startGameModal()).append(logoutInfo()).append(endGameModal()));
var canvas= resetCanvas();
var game = new Game(canvas);

},
redirectFunction: function(){
window.location.hash= 'game';
7 app/scripts/session.js
View file
@@ -56,11 +56,16 @@ const Session = Backbone.Model.extend({
 $.ajax({
     type: 'POST',
     url: `https://baas.kinvey.com/user/${settings.appId}/_logout`,
// headers: {
// Authorization: `Kinvey ${this.get('authtoken')}`
// }
   })
   localStorage.removeItem('authtoken')
   this.clear()
   store.settings.history.push('login')
 },
});

export default Session;
let session= new Session();

export default session;
0 app/scripts/store.js
View file
Empty file.
7 app/scss/main.scss
View file
@@ -4,6 +4,7 @@ body {
background-color: ivory;
margin:0;
padding:0;
overflow: hidden;
}


@@ -100,7 +101,7 @@ color: white;

p#lives{
position: absolute;
margin-left: 67rem;
// margin-left: 67rem;
margin-top: 2.5rem;
font-size: 1.5rem;
font-family: oswald;
@@ -117,11 +118,11 @@ color: white;
}

input#pause{
margin-top: 2rem;
margin-top: 0rem;
position: absolute;
}

.login{
.loginPage{
border: 2px solid #127DA7;
width: 20rem;
height: 23rem;
9 dist/index.html
View file
@@ -8,12 +8,13 @@
<body>

<div id="container">
<div class="StartScreen" style="display:none">
<h1> Start Game </h1>
<button id="startBtn" value="Start"> Start Game </button>
</div>
</div>

<div class="StartScreen" style="display:none">
<h1> Start Game </h1>
<button id="startBtn" value="Start"> Start Game </button>
</div>


<canvas id="screen" />

8 dist/main.css
View file
646 dist/main.js
View file

Large diffs are not rendered by default.