tibz/CrivitzDerby
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added countdown and finishline, still need to add variety in X movement, intro and finish screen

Browse Source
This commit is contained in:
Tom Tibs
2019-07-07 23:14:02 -05:00
parent f066280c2f
commit 95c959a1d0
4 changed files with 207 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

152
game.js
View File

@@ -2,16 +2,9 @@
* Created by tomdt on 6/23/2017.
*/
let cyclesRemaining = 1000;
const spriteWidth = 20;
const spriteHeight = 20;
const yMoveLimit = 400;
let framecount = 0;
const horse_image_array = [
"./resources/horse_images/final/stonewall_000.png",
"./resources/horse_images/final/DEMON_HORZE_666.png",
@@ -34,8 +27,11 @@ let horseWidth = WIDTH / 8;
let horseHeight = WIDTH / 8;
// state tracking
const gameState = "running"; // this should probably be an enum later
let gameState = "preRace"; // this should probably be an enum later
const horses = [];
const finalPlaces = [];
let finishLineScan = 0;
//Start game loop
@@ -45,16 +41,32 @@ window.onload = ( ) => {
initHorses();
// The game loop should be a setInterval that way the screen size can be adjusted.
// I think its a bit easier to keep track of the state from one loop vs function callbacks
setInterval(gameLoop, 20); // a touch <60 FPS
};
function gameLoop(){
screenSizeAdjust();
//
switch(gameState){
case "preRace":
if (horses.length === 4){
gameState = 'countdownStart';
console.log ("Horses loaded, transitioning to countdown");
}
break;
case "countdownStart":
startCountdown(5,BG_CTX);
break;
case "running":
screenReset();
runRace(CTX,BG_CTX);
break;
case "finishing":
screenReset();
runRace(CTX,BG_CTX);
break;
default:
@@ -63,39 +75,77 @@ function gameLoop(){
}
function runRace(ctx,bg_ctx){
framecount ++;
cyclesRemaining --;
//handle race background
drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight);
drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight, cyclesRemaining, true);
//Figure out horse postitions
const x = WIDTH / 2;
const y = HEIGHT / 2;
const lane_1_height = HEIGHT - (horseHeight * 1.25);
//todo- change these sway varibles to be "trot" objects, or something, at put it in a horse object, so we can reuse these better
// horse 1 & 2 are hilarious, horse 3&4 are more normal paced
const horse_1_sway = Math.sin(framecount) * 10;
const horse_1_X_sway = Math.cos(framecount/3) * 10;
const horse_1_sway = Math.sin(cyclesRemaining) * 10;
const horse_1_X_sway = Math.cos(cyclesRemaining/3) * 10;
const lane_2_height = HEIGHT - (horseHeight * 1.75);
const horse_2_sway = Math.cos(framecount) * 10;
const horse_2_X_sway = Math.sin(framecount/3) * 10;
const horse_2_sway = Math.cos(cyclesRemaining) * 10;
const horse_2_X_sway = Math.sin(cyclesRemaining/3) * 10;
const lane_3_height = HEIGHT - (horseHeight * 2.25);
const horse_3_sway = Math.sin(framecount/2) * 10;
const horse_3_X_sway = Math.cos(framecount/4) * 10;
const horse_3_sway = Math.sin(cyclesRemaining/2) * 10;
const horse_3_X_sway = Math.cos(cyclesRemaining/4) * 10;
const lane_4_height = HEIGHT - (horseHeight * 2.75);
const horse_4_sway = Math.cos(framecount/2) * 10;
const horse_4_X_sway = Math.sin(framecount/4) * 10;
const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
const horse_4_X_sway = Math.sin(cyclesRemaining/4) * 10;
if (horses.length > 3){
// console.log("Horse 0 at x: "+ x + " y: "+ y);
ctx.drawImage(horses[3].image, horse_4_X_sway , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[2].image, horse_3_X_sway , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[1].image, horse_2_X_sway , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[0].image, horse_1_X_sway , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
horses[3].x = horse_4_X_sway;
horses[2].x = horse_3_X_sway;
horses[1].x = horse_2_X_sway;
horses[0].x = horse_1_X_sway;
// draw horses
ctx.drawImage(horses[3].image, horses[3].x , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[2].image, horses[2].x , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[1].image, horses[1].x , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[0].image, horses[0].x , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
if (cyclesRemaining <= 0 ){
if (gameState === 'running'){
console.log("checking for winners now");
finishLineScan = WIDTH - horseWidth;
gameState = "finishing";
}
let foundHorseIndex = null;
console.log(finishLineScan);
for (let i = 0; i < horses.length; i++) {
//horse has finished
if (horses[i].x >= finishLineScan && horses[i].place === null){
if (!foundHorseIndex || horses[foundHorseIndex].x < horses[i].x) {
foundHorseIndex = i;
}
}
}
if(foundHorseIndex != null){
finalPlaces.push(horses[foundHorseIndex]);
horses[foundHorseIndex].place = 1;
console.log("Horse Finished - " + foundHorseIndex);
}
// horses.splice(foundHorseIndex);
if (finalPlaces.length === 4){
gameState = "finished";
}
finishLineScan -= finishLineSpeed;
}
}
@@ -107,38 +157,36 @@ function initHorses() {
horse_image.src = horse_image_array[i]; // todo - change to grab random horse
horse_image.onload = function() {
const horse = {
image: horse_image
image: horse_image,
x:0,
y:0,
place: null
// todo - other horse things.
}
};
horses.push(horse);
console.log("horseImagePushed");
console.log(horses[0]);
}
}
}
function screenSizeAdjust(){
HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
horseWidth = horseHeight = WIDTH / 8;
function screenReset(){
HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
horseWidth = horseHeight = WIDTH / 8;
}
function drawPlayer(ctx){
let xStart = xPosition;
let yStart = yPosition + spriteHeight;
ctx.fillStyle = "red";
ctx.beginPath();
ctx.moveTo(xStart,yStart); // bottom left corner
ctx.lineTo(xStart + (spriteWidth/2), yPosition);
ctx.lineTo(xStart + spriteWidth, yStart);
ctx.lineTo(xStart +(spriteWidth/2), yPosition +(spriteHeight/2));
ctx.lineTo(xStart,yStart);
ctx.fill();
}
function startCountdown(seconds, bg_ctx){
if (gameState === "countdownStart" ) {
gameState = "countdownRunning";
}
console.log ("Coundown: " + seconds);
if (seconds > 0) {
screenReset();
drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds);
setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000);
}
else {
gameState = "running";
}
}