Skip to content

Commit

Permalink
Added new key handler class
Browse files Browse the repository at this point in the history
  • Loading branch information
Courtney Nguyen committed May 24, 2016
1 parent b769b45 commit 45e0637
Show file tree
Hide file tree
Showing 5 changed files with 212 additions and 134 deletions.
125 changes: 62 additions & 63 deletions public/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,74 @@
<!doctype html>
<!-- really out of date.. check single-projects.php -->
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8">
<meta charset="utf-8">

<title>Kitty Game</title>
<title>Kitty Game</title>

<link rel="stylesheet" href="styles.css"/>
<link rel="stylesheet" href="styles.css"/>
</head>
<body>
<div id="wrapper">
<!--<canvas id="menu"></canvas>-->
<div id="wrapper">
<div id="start">
<input id="" type="submit" class="butt butt-good go-to-instructions center-blk" value="Play Game!"/>
</div>

<div id="start">
<h1 class="txt-center">Kitty Jump!</h1>
<div class="">
<div class="">
<h3>This is you:</h3>
<img src="images/kitty_cat.png" />
<p class="float-rt">
You have 9 lives: <img src="images/life.png" />x9
</p>
</div>
<div class="">
<div class="">
<h3>Eat kibbles:</h3>
<img src="images/kibble_O_lg.png"/><img src="images/kibble_X_lg.png"/>
<p class="float-rt">
AVOID hitting kibbles... You will lose points!
</p>
</div>
<div class="">
<h3>Do <span class="bold">NOT</span> eat candy:</h3>
<div id="game-over" class="invisible">
<h1 class="txt-center">GAME OVER</h1>
<a class="butt butt-good lt-butt start-game" href="#">Play again?</a>
<a id="main-menu" class="butt butt-exit rt-butt main-menu" href="#">Main Menu</a>s
</div>

<img class="wd-100" src="images/candy.png"/>
</div>
</div>
<div class="">
Press P to pause
</div>
</div>
<input id="" type="submit" class="butt butt-good start-game center-blk" value="Play Game!"/>
</div>
<div id="instructions" class="invisible">
<div class="instructions">
<h1>Instructions</h1>
<div class="row">
<div class="float-lt">
<h3>This is you:</h3>
<img src="./images/kitty_cat.png" />
<img src="./images/life.png" />x9
</div>
<div class="float-rt">
<h3>Do not eat candy:</h3>
<img class="wd-100" src="./images/candy.png"/>
</div>
</div>
<div class="row">
<div class="float-lt">
<h3>Eat kibbles:</h3>
<img src="./images/kibble_O_lg.png"/>
<img src="./images/kibble_X_lg.png"/>
</div>
<div class="float-rt">
Press P to pause
</div>
</div>
<button class="butt butt-good start-game">Play!</button>
<button class="butt butt-exit main-menu">Back</button>
</div>
</div>

<div id="game-over">
<h1 class="txt-center">GAME OVER</h1>
<a class="butt butt-good lt-butt start-game" href="#">Play again?</a><a id="main-menu" class="butt butt-exit rt-butt" href="#">Main Menu</a>
</div>

<div id="pause" class="invisible">
<h1 class="txt-center">PAUSED</h1>
<h3 class="txt-center">Press 'O' To Continue</h3>
</div>
<audio loop="true"></audio>
<canvas id="game" class="invisible"></canvas>
<button id="mute">MUTE</button>
</div>
</div>

<div id="pause">
<h1 class="txt-center">PAUSED</h1>
<h3 class="txt-center">Press 'O' To Continue</h3></div>
<script src="./js/keyHandler.js"></script>
<script language="javascript" src="lib/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="lib/jquery.hotkeys.js" type="text/javascript"></script>
<script language="javascript" src="lib/key_status.js" type="text/javascript"></script>
<script language="javascript" src="lib/util.js" type="text/javascript"></script>
<script language="javascript" src="lib/sprite.js" type="text/javascript"></script>
<!-- <script language="javascript" src="js/sound.js" ></script> -->
<script language="javascript" type="text/javascript" src="./js/powerbar.js"></script>
<script language="javascript" type="text/javascript" src="./js/main.js"></script>
</body>

<audio loop="true"></audio>
<canvas id="game"></canvas>
<button id="mute">MUTE</button>
</div>

<div id="mute">
<button>MUTE</button>
</div>

<script language="javascript" src="lib/jquery.min.js" type="text/javascript"></script>
<script language="javascript" src="lib/jquery.hotkeys.js" type="text/javascript"></script>
<script language="javascript" src="lib/key_status.js" type="text/javascript"></script>
<script language="javascript" src="lib/util.js" type="text/javascript"></script>
<script language="javascript" src="lib/sprite.js" type="text/javascript"></script>
<!-- <script language="javascript" src="js/sound.js" ></script> -->
<script language="javascript" type="text/javascript" src="./js/powerbar.js"></script>
<script language="javascript" type="text/javascript" src="./js/main.js"></script>
</body>


</html>
</html>
93 changes: 93 additions & 0 deletions public/js/keyHandler.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,93 @@
var keyState = [];

var KEY_LEFT=37, KEY_UP=38, KEY_RIGHT=39, KEY_DOWN=40, KEY_SPACE=32, KEY_P=80, KEY_W=87, KEY_A=65, KEY_S=83, KEY_D=68, KEY_J = 74;

function handleKeyPress(event){
//console.log(event.keyCode);
if(keyState[event.keyCode] != null){
var theState = keyState[event.keyCode];
theState.wasPressed = theState.pressed;
theState.pressed = true;
if(!theState.wasPressed){
// console.log(event.keyCode);
theState.pressAction();
}
}else{
keyState[event.keyCode] =
{
pressed: true,
wasPressed: false,
pressAction: pressAction,
releaseAction: releaseAction
}
}
}

function handleKeyRelease(event){
if(keyState[event.keyCode] != null){
var theState = keyState[event.keyCode];
theState.pressed = false;
theState.wasPressed = false;
if(!theState.pressed){
theState.releaseAction();
}
}else{
keyState[event.keyCode] =
{
pressed: false,
wasPressed: true,
pressAction: pressAction,
releaseAction: releaseAction
}
}
}

function setPressAction(keyCode, action){
if(keyState[keyCode] != null){
keyState[keyCode].pressAction = action;
}else{
keyState[keyCode] =
{
pressed: false,
wasPressed: true,
pressAction: action,
releaseAction: releaseAction
}
}
}

function setReleaseAction(keyCode, action){
if(keyState[keyCode] != null){
keyState[keyCode].releaseAction = action;
}else{
keyState[keyCode] =
{
pressed: false,
wasPressed: true,
pressAction: pressAction,
releaseAction: action
}
}
}

function getStringState(keyCode){
var result = "not pressed";
if(keyState[keyCode] != null){
if(keyState[keyCode].pressed){
result = "pressed";
}
}

return result;
}

function getKeyState(keyCode){
var result = false;
if(keyState[keyCode] != null){
if(keyState[keyCode].pressed){
result = true;
}
}

return result;
}
44 changes: 27 additions & 17 deletions public/js/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// var ROOT = '/wp-content/themes/clean-slate/js/kitty_jump/public/'; // need to get rid of hard code
// var ROOT = '/wp-content/themes/clean-slate/js/kitty_jump/public/'; // need to get rid of hard code
var ROOT = './';
var bgSound = new Audio(ROOT+'sound/meowmix.mp3');
var gameSound = new Audio(ROOT+'sound/monkeyspinning.mp3');
Expand All @@ -9,6 +9,9 @@ $(window).ready(function(){
kitty_jump.playGame();
});

$(document).bind('keydown', handleKeyPress);
$(document).bind('keyup', handleKeyRelease);

var kitty_jump = (function(){
var CANVAS_WIDTH = 650;
var CANVAS_HEIGHT = 500;
Expand All @@ -30,8 +33,9 @@ var kitty_jump = (function(){
var enemy = new Image();
var enemies = [];
var playerBullets = [];
var gravity = 1;
//var gravity = 1; // 9.8m/s^2 / FPS = .16
var powerBar = new Powerbar({x: 300, y: CANVAS_HEIGHT-30});
var time = 0;
var player = {
startY: CANVAS_HEIGHT-100,
x: 30,
Expand All @@ -52,9 +56,12 @@ var kitty_jump = (function(){
isJumping: false,
isFalling: false,
draw: function(){
if(this.isJumping && !this.isFalling){
if(this.isJumping){
this.jump(this.velocity);
}
// else {
// this.fall();
// }
context.drawImage(player.image, this.x, this.y);
},
shoot: function() {
Expand All @@ -77,22 +84,25 @@ var kitty_jump = (function(){
if(player.lives.count == 0)currentGameState = 300;
},
jump: function(velocity){
// this.velocityY = (velocity * this.time) - ((1/2) * gravity * Math.pow(this.time, 2));
this.velocityY = velocity;
if(this.isJumping){
this.velocityY -= velocity;
if(this.velocityY <= 0 || this.y <= 0){
if(this.velocityY < 0 || (this.y <= (this.height*2)) ){
this.isJumping = false;
this.isFalling = true;
}
this.y -= this.velocityY;
}
if(this.isFalling){
this.velocityY += velocity;
if(this.y >= this.startY){
this.isFalling = false;
this.isJumping = false;
this.velocityY = 0;
}
this.y -= (this.velocityY);
}
this.time = this.time + 1;
},
fall: function(){
this.velocityY = 6;
if(this.y >= this.startY){
this.isFalling = false;
this.isJumping = false;
}
this.y += (this.velocityY);
this.time = this.time + 1;
}
};

Expand Down Expand Up @@ -176,9 +186,9 @@ var kitty_jump = (function(){
if(keyup.w){
var velocity = powerBar.pause();
player.isJumping = true;
player.velocity = velocity;
// player.jump(velocity);

this.time = 0;
this.startY = this.y;
player.velocity = 1;
}
if(keydown.d) {
player.x += 5;
Expand Down
19 changes: 0 additions & 19 deletions public/lib/key_status.js
View file

This file was deleted.

Loading

0 comments on commit 45e0637

Please sign in to comment.