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

Added thingas

Browse Source
This commit is contained in:
ttibble90
2021-02-26 22:54:51 -06:00
parent 7b8a502ef3
commit 1873b4671e
26 changed files with 4144 additions and 4135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
.idea/HorseRaceGame.iml generated
View File

@@ -1,12 +1,12 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4"> <module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager"> <component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$"> <content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" /> <excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" /> <excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" /> <excludeFolder url="file://$MODULE_DIR$/tmp" />
</content> </content>
<orderEntry type="inheritedJdk" /> <orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" /> <orderEntry type="sourceFolder" forTests="false" />
</component> </component>
</module> </module>

10
.idea/misc.xml generated
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="JavaScriptSettings"> <component name="JavaScriptSettings">
<option name="languageLevel" value="ES6" /> <option name="languageLevel" value="ES6" />
</component> </component>
</project> </project>

14
.idea/modules.xml generated
View File

@@ -1,8 +1,8 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="ProjectModuleManager"> <component name="ProjectModuleManager">
<modules> <modules>
<module fileurl="file://$PROJECT_DIR$/.idea/HorseRaceGame.iml" filepath="$PROJECT_DIR$/.idea/HorseRaceGame.iml" /> <module fileurl="file://$PROJECT_DIR$/.idea/HorseRaceGame.iml" filepath="$PROJECT_DIR$/.idea/HorseRaceGame.iml" />
</modules> </modules>
</component> </component>
</project> </project>

10
.idea/vcs.xml generated
View File

@@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<project version="4"> <project version="4">
<component name="VcsDirectoryMappings"> <component name="VcsDirectoryMappings">
<mapping directory="$PROJECT_DIR$" vcs="Git" /> <mapping directory="$PROJECT_DIR$" vcs="Git" />
</component> </component>
</project> </project>

10
README.md
View File

@@ -1,5 +1,5 @@
# CrivitzDerby # CrivitzDerby
A crappy game. A crappy game.
https://kindacrappygames.github.io/CrivitzDerby/ https://kindacrappygames.github.io/CrivitzDerby/

354
audio.js
View File

@@ -1,178 +1,178 @@
// this should load all of the effects into memory. // this should load all of the effects into memory.
// Neighs, random horse noises // Neighs, random horse noises
const effects = [ const effects = [
new Howl({ new Howl({
src:['resources/audio/neighs/418428__soundslikewillem__neighing-horse.wav'] src:['resources/audio/neighs/418428__soundslikewillem__neighing-horse.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/neighs/61605__andune__schnauf.wav'] src:['resources/audio/neighs/61605__andune__schnauf.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/neighs/418427__soundslikewillem__snorting-horse.wav'] src:['resources/audio/neighs/418427__soundslikewillem__snorting-horse.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/neighs/53261__stomachache__horse.wav'] src:['resources/audio/neighs/53261__stomachache__horse.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/neighs/448090__breviceps__theremin-horse.wav'] src:['resources/audio/neighs/448090__breviceps__theremin-horse.wav']
}) })
]; ];
// starter guns // starter guns
const gunshots = [ const gunshots = [
new Howl({ new Howl({
src:['resources/audio/starter_guns/145206__lensflare8642__m16-gun-3-round-burst.mp3'] src:['resources/audio/starter_guns/145206__lensflare8642__m16-gun-3-round-burst.mp3']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/170417__eelke__bang-03-clean.mp3'] src:['resources/audio/starter_guns/170417__eelke__bang-03-clean.mp3']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/200245__noah-fletcher__homeade-gun-shot1-no-echo.wav'] src:['resources/audio/starter_guns/200245__noah-fletcher__homeade-gun-shot1-no-echo.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/244394__werra__bang-explosion-metallic.wav'] src:['resources/audio/starter_guns/244394__werra__bang-explosion-metallic.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/244587__timbre__a-synthetic-bang.wav'] src:['resources/audio/starter_guns/244587__timbre__a-synthetic-bang.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/344142__brokenphono__gunshot-002.wav'] src:['resources/audio/starter_guns/344142__brokenphono__gunshot-002.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/347591__nicjonesaudio__assault-rifle-1.wav'] src:['resources/audio/starter_guns/347591__nicjonesaudio__assault-rifle-1.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/362652__trngle__cat-meow(1).wav'] src:['resources/audio/starter_guns/362652__trngle__cat-meow(1).wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/382735__schots__gun-shot.aiff'] src:['resources/audio/starter_guns/382735__schots__gun-shot.aiff']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/391965__ssierra1202__wood-bang.wav'] src:['resources/audio/starter_guns/391965__ssierra1202__wood-bang.wav']
}), }),
new Howl({ new Howl({
src:['resources/audio/starter_guns/474094__piotr123__bang.wav'] src:['resources/audio/starter_guns/474094__piotr123__bang.wav']
}) })
]; ];
const five = [ const five = [
new Howl({ new Howl({
src:['resources/audio/countdowns/five.wav'] src:['resources/audio/countdowns/five.wav']
}), }),
]; ];
const four = [ const four = [
new Howl({ new Howl({
src:['resources/audio/countdowns/four.wav'] src:['resources/audio/countdowns/four.wav']
}), }),
]; ];
const three = [ const three = [
new Howl({ new Howl({
src:['resources/audio/countdowns/three.wav'] src:['resources/audio/countdowns/three.wav']
}), }),
]; ];
const two = [ const two = [
new Howl({ new Howl({
src:['resources/audio/countdowns/two.wav'] src:['resources/audio/countdowns/two.wav']
}), }),
]; ];
const one = [ const one = [
new Howl({ new Howl({
src:['resources/audio/countdowns/one.wav'] src:['resources/audio/countdowns/one.wav']
}), }),
]; ];
// gallops // gallops
const gallops = [ const gallops = [
new Howl({ new Howl({
src:['resources/audio/gallops/322448__deadxcreed__horse-gallop-loop.wav'], src:['resources/audio/gallops/322448__deadxcreed__horse-gallop-loop.wav'],
loop: true loop: true
}), }),
new Howl({ new Howl({
src:['resources/audio/gallops/106896__robinhood76__02234-fake-horse-steps.wav'], src:['resources/audio/gallops/106896__robinhood76__02234-fake-horse-steps.wav'],
loop: true loop: true
}), }),
]; ];
const fanfare = [ const fanfare = [
new Howl({ new Howl({
src:['resources/audio/fanfare/100422__robinhood76__01851-cartoon-fanfare.wav'], src:['resources/audio/fanfare/100422__robinhood76__01851-cartoon-fanfare.wav'],
}), }),
new Howl({ new Howl({
src:['resources/audio/fanfare/198874__bone666138__fanfare.wav'], src:['resources/audio/fanfare/198874__bone666138__fanfare.wav'],
}), }),
new Howl({ new Howl({
src:['resources/audio/fanfare/321937__pel2na__two-kazoo-fanfare.wav'], src:['resources/audio/fanfare/321937__pel2na__two-kazoo-fanfare.wav'],
}), }),
new Howl({ new Howl({
src:['resources/audio/fanfare/413204__joepayne__clean-trumpet-fanfare-with-wobble.mp3'], src:['resources/audio/fanfare/413204__joepayne__clean-trumpet-fanfare-with-wobble.mp3'],
}), }),
new Howl({ new Howl({
src:['resources/audio/fanfare/418526__audeption__fasching-fanfare-karnevals-tusch-tataa-long.wav'], src:['resources/audio/fanfare/418526__audeption__fasching-fanfare-karnevals-tusch-tataa-long.wav'],
}), }),
new Howl({ new Howl({
src:['resources/audio/fanfare/470083__sheyvan__music-orchestral-victory-fanfare.wav'], src:['resources/audio/fanfare/470083__sheyvan__music-orchestral-victory-fanfare.wav'],
}), }),
]; ];
function playRandomNeigh(){ function playRandomNeigh(){
const index = Math.floor(Math.random() * effects.length); const index = Math.floor(Math.random() * effects.length);
effects[index].play(); effects[index].play();
} }
// function starterGun(){ // function starterGun(){
// const index = Math.floor(Math.random() * gunshots.length); // const index = Math.floor(Math.random() * gunshots.length);
// gunshots[index].play(); // gunshots[index].play();
// } // }
function playCountdownAudio(seconds){ function playCountdownAudio(seconds){
let index; let index;
switch (seconds) { switch (seconds) {
case 5: case 5:
index = Math.floor(Math.random() * five.length); index = Math.floor(Math.random() * five.length);
five[index].play(); five[index].play();
break; break;
case 4: case 4:
index = Math.floor(Math.random() * four.length); index = Math.floor(Math.random() * four.length);
four[index].play(); four[index].play();
break; break;
case 3: case 3:
index = Math.floor(Math.random() * three.length); index = Math.floor(Math.random() * three.length);
three[index].play(); three[index].play();
break; break;
case 2: case 2:
index = Math.floor(Math.random() * two.length); index = Math.floor(Math.random() * two.length);
two[index].play(); two[index].play();
break; break;
case 1: case 1:
index = Math.floor(Math.random() * one.length); index = Math.floor(Math.random() * one.length);
one[index].play(); one[index].play();
break; break;
case 0: case 0:
index = Math.floor(Math.random() * gunshots.length); index = Math.floor(Math.random() * gunshots.length);
gunshots[index].play(); gunshots[index].play();
startGallop(); startGallop();
break; break;
} }
} }
function startGallop(){ function startGallop(){
gallops[0].play(); gallops[0].play();
gallops[1].play(); gallops[1].play();
} }
function stopGallop(){ function stopGallop(){
gallops[0].stop(); gallops[0].stop();
gallops[1].stop(); gallops[1].stop();
} }
function playFanfare(){ function playFanfare(){
const index = Math.floor(Math.random() * fanfare.length); const index = Math.floor(Math.random() * fanfare.length);
fanfare[index].play(); fanfare[index].play();
} }

432
background.js
View File

@@ -1,217 +1,217 @@
const fencePostGap = 200; const fencePostGap = 200;
const finishLineSpeed = 7; const finishLineSpeed = 7;
let fenceOffset = fencePostGap; let fenceOffset = fencePostGap;
let finishLinePosition = -1000; let finishLinePosition = -1000;
let finishLineDrawn = false; let finishLineDrawn = false;
let showWinnerText = true; let showWinnerText = true;
let winnerTextCounter = 0; let winnerTextCounter = 0;
function initBackground () { function initBackground () {
finishLinePosition = -1000; finishLinePosition = -1000;
finishLineDrawn = false; finishLineDrawn = false;
showWinnerText = true; showWinnerText = true;
winnerTextCounter = 0; winnerTextCounter = 0;
} }
function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){ function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){
// Create gradient // Create gradient
const grd = ctx.createRadialGradient( width /2, height/2, 0.000, width/2, height/2, width/2); const grd = ctx.createRadialGradient( width /2, height/2, 0.000, width/2, height/2, width/2);
// Add colors // Add colors
grd.addColorStop(0.101, 'rgba(255, 255, 255, 1.000)'); grd.addColorStop(0.101, 'rgba(255, 255, 255, 1.000)');
grd.addColorStop(1.000, 'rgba(116, 224, 224, 1.000)'); grd.addColorStop(1.000, 'rgba(116, 224, 224, 1.000)');
// Fill with gradient // Fill with gradient
ctx.fillStyle = grd; ctx.fillStyle = grd;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
// Draw Track // Draw Track
ctx.fillStyle = '#CD853F'; ctx.fillStyle = '#CD853F';
ctx.fillRect(0, height - (2 * horseSize) , width, height); ctx.fillRect(0, height - (2 * horseSize) , width, height);
// Draw Distance left, or draw finishline // Draw Distance left, or draw finishline
if (isMoving && gameState !== "preRace") { if (isMoving && gameState !== "preRace") {
if (cyclesRemaining > 0) { if (cyclesRemaining > 0) {
drawRemainingDistance(ctx, width, horseSize, cyclesRemaining); drawRemainingDistance(ctx, width, horseSize, cyclesRemaining);
} }
else { else {
if (!finishLineDrawn) { if (!finishLineDrawn) {
finishLineDrawn = true; finishLineDrawn = true;
finishLinePosition = width; finishLinePosition = width;
} }
drawFinishLine(ctx, horseSize, height); drawFinishLine(ctx, horseSize, height);
finishLinePosition -= finishLineSpeed; finishLinePosition -= finishLineSpeed;
} }
} }
else { else {
} }
// Draw grass // Draw grass
ctx.fillStyle = '#32CD32'; ctx.fillStyle = '#32CD32';
ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2); ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2);
drawGuides(ctx, width, height, horseSize); drawGuides(ctx, width, height, horseSize);
drawFence(ctx, width, ( height - (2 * horseSize)) , horseSize, isMoving); drawFence(ctx, width, ( height - (2 * horseSize)) , horseSize, isMoving);
} }
function drawGuides(ctx, width, height, horseSize){ function drawGuides(ctx, width, height, horseSize){
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, height - (horseSize/2)); ctx.moveTo(0, height - (horseSize/2));
ctx.lineTo(width, height - (horseSize/2)); ctx.lineTo(width, height - (horseSize/2));
ctx.stroke(); ctx.stroke();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, height - (horseSize)); ctx.moveTo(0, height - (horseSize));
ctx.lineTo(width, height - (horseSize)); ctx.lineTo(width, height - (horseSize));
ctx.stroke(); ctx.stroke();
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, height - (horseSize * 1.5)); ctx.moveTo(0, height - (horseSize * 1.5));
ctx.lineTo(width, height - (horseSize * 1.5)); ctx.lineTo(width, height - (horseSize * 1.5));
ctx.stroke(); ctx.stroke();
} }
function drawFence(ctx, width, fenceline, horseSize, isMoving) { function drawFence(ctx, width, fenceline, horseSize, isMoving) {
ctx.fillStyle = '#322e1b'; ctx.fillStyle = '#322e1b';
const postHeight = (horseSize /2); const postHeight = (horseSize /2);
const postTop = fenceline - postHeight; const postTop = fenceline - postHeight;
for (let x = fenceOffset; x < width; x+=fencePostGap) { for (let x = fenceOffset; x < width; x+=fencePostGap) {
const postStart = x; const postStart = x;
ctx.fillStyle = '#322e1b'; ctx.fillStyle = '#322e1b';
ctx.fillRect(postStart, postTop , 7, postHeight); ctx.fillRect(postStart, postTop , 7, postHeight);
} }
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, postTop); ctx.moveTo(0, postTop);
ctx.lineTo(width, postTop); ctx.lineTo(width, postTop);
ctx.stroke(); ctx.stroke();
if(isMoving){ if(isMoving){
fenceOffset -=5; fenceOffset -=5;
} }
if (fenceOffset < 0) { fenceOffset = fencePostGap}; if (fenceOffset < 0) { fenceOffset = fencePostGap};
} }
function drawRemainingDistance(ctx, width, horseSize, cyclesRemaining){ function drawRemainingDistance(ctx, width, horseSize, cyclesRemaining){
const remainingString = (cyclesRemaining /10).toFixed(1) + " Yards Remaining"; const remainingString = (cyclesRemaining /10).toFixed(1) + " Yards Remaining";
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.font = "30px Arial"; ctx.font = "30px Arial";
ctx.fillText(remainingString, (width / 2) - 150, (horseSize / 2)); ctx.fillText(remainingString, (width / 2) - 150, (horseSize / 2));
} }
function drawCountdown(ctx, width, height, horseSize, seconds, horses){ function drawCountdown(ctx, width, height, horseSize, seconds, horses){
console.log("draw countdown"); console.log("draw countdown");
console.log(horses); console.log(horses);
drawRaceBackground(ctx,width,height,horseSize, 0, false); drawRaceBackground(ctx,width,height,horseSize, 0, false);
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.font = "120px Arial"; ctx.font = "120px Arial";
ctx.fillText(seconds, (width / 2) - 50, (horseSize )); ctx.fillText(seconds, (width / 2) - 50, (horseSize ));
for (let i = 0; i < horses.length; i++) { for (let i = 0; i < horses.length; i++) {
drawHorseNamesinLane(ctx, horses[i], i, horseSize, height); drawHorseNamesinLane(ctx, horses[i], i, horseSize, height);
} }
} }
function drawFinishLine(ctx, horseSize, height){ function drawFinishLine(ctx, horseSize, height){
ctx.fillStyle = '#FFFFFF'; ctx.fillStyle = '#FFFFFF';
ctx.fillRect(finishLinePosition, height - (2 * horseSize) , 8 , height); ctx.fillRect(finishLinePosition, height - (2 * horseSize) , 8 , height);
} }
function drawHorseNamesinLane(ctx,horse, lane, horseSize, height) { function drawHorseNamesinLane(ctx,horse, lane, horseSize, height) {
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.font = "40px Arial"; ctx.font = "40px Arial";
ctx.fillText(horse.name, horseSize, height - (lane * (horseSize / 2 )) -20); ctx.fillText(horse.name, horseSize, height - (lane * (horseSize / 2 )) -20);
ctx.fillText( "Created by: " + horse.owner, horseSize * 5, height - (lane * (horseSize / 2 )) -20); ctx.fillText( "Created by: " + horse.owner, horseSize * 5, height - (lane * (horseSize / 2 )) -20);
} }
function drawResults(ctx, width, height, horseSize, finalPlaces){ function drawResults(ctx, width, height, horseSize, finalPlaces){
drawRaceBackground(ctx,width,height,horseSize, 0, false); drawRaceBackground(ctx,width,height,horseSize, 0, false);
// draw rectangle // draw rectangle
ctx.fillStyle = '#dddddd'; ctx.fillStyle = '#dddddd';
ctx.fillRect(horseSize*2, height - (.5 * horseSize) , (horseSize *4), - (horseSize * 3)); ctx.fillRect(horseSize*2, height - (.5 * horseSize) , (horseSize *4), - (horseSize * 3));
ctx.fillStyle = '#9999FF'; ctx.fillStyle = '#9999FF';
ctx.fillRect(horseSize*2 + 3, height - (.5 * horseSize) -3 , (horseSize *4) -6, - (horseSize * 3) + 6 ); ctx.fillRect(horseSize*2 + 3, height - (.5 * horseSize) -3 , (horseSize *4) -6, - (horseSize * 3) + 6 );
const first = "1ST - " + finalPlaces[0].name; const first = "1ST - " + finalPlaces[0].name;
const second = "2ND - " + finalPlaces[1].name; const second = "2ND - " + finalPlaces[1].name;
const third = "3RD - " + finalPlaces[2].name; const third = "3RD - " + finalPlaces[2].name;
const fourth = "4TH - " + finalPlaces[3].name; const fourth = "4TH - " + finalPlaces[3].name;
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.font = "40px Arial"; ctx.font = "40px Arial";
ctx.fillText("Final Results", horseSize* 3, height - (horseSize * 3)); ctx.fillText("Final Results", horseSize* 3, height - (horseSize * 3));
ctx.fillText(first, horseSize* 2.5, height - (horseSize * 2.5)); ctx.fillText(first, horseSize* 2.5, height - (horseSize * 2.5));
ctx.fillText(second, horseSize* 2.5, height - (horseSize * 2)); ctx.fillText(second, horseSize* 2.5, height - (horseSize * 2));
ctx.fillText(third, horseSize* 2.5, height -(horseSize * 1.5)); ctx.fillText(third, horseSize* 2.5, height -(horseSize * 1.5));
ctx.fillText(fourth,horseSize* 2.5, height - (horseSize)); ctx.fillText(fourth,horseSize* 2.5, height - (horseSize));
} }
function drawWinnerCloseUp(ctx, width, height, horseSize, finalPlaces){ function drawWinnerCloseUp(ctx, width, height, horseSize, finalPlaces){
drawRaceBackground(ctx,width,height,horseSize, 0, false); drawRaceBackground(ctx,width,height,horseSize, 0, false);
// draw rectangle // draw rectangle
ctx.fillStyle = '#dddddd'; ctx.fillStyle = '#dddddd';
ctx.fillRect(horseSize*2, height - (.5 * horseSize) , (horseSize *4), - (horseSize * 3)); ctx.fillRect(horseSize*2, height - (.5 * horseSize) , (horseSize *4), - (horseSize * 3));
ctx.fillStyle = '#9999FF'; ctx.fillStyle = '#9999FF';
ctx.fillRect(horseSize*2 + 3, height - (.5 * horseSize) -3 , (horseSize *4) -6, - (horseSize * 3) + 6 ); ctx.fillRect(horseSize*2 + 3, height - (.5 * horseSize) -3 , (horseSize *4) -6, - (horseSize * 3) + 6 );
ctx.drawImage(finalPlaces[0].image, horseSize * 2.5 , height - (.5 * horseSize) -5 , (horseSize *3) + 10 , - (horseSize * 3) + 10 ); ctx.drawImage(finalPlaces[0].image, horseSize * 2.5 , height - (.5 * horseSize) -5 , (horseSize *3) + 10 , - (horseSize * 3) + 10 );
ctx.font = "40px Arial"; ctx.font = "40px Arial";
ctx.fillStyle = '#ffffff'; ctx.fillStyle = '#ffffff';
ctx.strokeStyle = '#000000'; ctx.strokeStyle = '#000000';
ctx.lineWidth =1; ctx.lineWidth =1;
//should hopefully flicker every 60 "frames" //should hopefully flicker every 60 "frames"
if (showWinnerText){ if (showWinnerText){
ctx.strokeText("Winner!!!", horseSize* 3, height - (horseSize * 3)); ctx.strokeText("Winner!!!", horseSize* 3, height - (horseSize * 3));
ctx.fillText("Winner!!!", horseSize* 3, height - (horseSize * 3)); ctx.fillText("Winner!!!", horseSize* 3, height - (horseSize * 3));
winnerTextCounter ++; winnerTextCounter ++;
if (winnerTextCounter > 50){ if (winnerTextCounter > 50){
showWinnerText = false; showWinnerText = false;
} }
} }
else { else {
ctx.strokeText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3)+60); ctx.strokeText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3)+60);
ctx.fillText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3) + 60); ctx.fillText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3) + 60);
winnerTextCounter --; winnerTextCounter --;
if (winnerTextCounter < 1){ if (winnerTextCounter < 1){
showWinnerText = true; showWinnerText = true;
} }
} }
// click to continue should always be present // click to continue should always be present
ctx.strokeText("Click to start a new game!", horseSize* 3, height - horseSize ); ctx.strokeText("Click to start a new game!", horseSize* 3, height - horseSize );
ctx.fillText("Click to start a new game!", horseSize* 3, height - horseSize ); ctx.fillText("Click to start a new game!", horseSize* 3, height - horseSize );
} }
function drawStartScreen (ctx, bgctx, width, height, horseSize){ function drawStartScreen (ctx, bgctx, width, height, horseSize){
drawRaceBackground(ctx, width, height, horseSize, 999999, true); drawRaceBackground(ctx, width, height, horseSize, 999999, true);
} }

74
foreground_drawing.js
View File

@@ -1,38 +1,38 @@
function fg_drawShadows(ctx, horses,horseHeight, horseWidth) { function fg_drawShadows(ctx, horses,horseHeight, horseWidth) {
ctx.fillStyle = "rgba(0,0,0,0.25)"; ctx.fillStyle = "rgba(0,0,0,0.25)";
ctx.beginPath(); ctx.beginPath();
ctx.ellipse( ctx.ellipse(
horses[3].x + (horseWidth /2) , // center of horses position horses[3].x + (horseWidth /2) , // center of horses position
HEIGHT - (horseHeight * 1.75),// center of lane HEIGHT - (horseHeight * 1.75),// center of lane
(horseWidth * .75) / 2, (horseWidth * .75) / 2,
(horseHeight * .25) / 2, (horseHeight * .25) / 2,
0, 0, Math.PI *2); 0, 0, Math.PI *2);
ctx.fill(); ctx.fill();
ctx.beginPath(); ctx.beginPath();
ctx.ellipse( ctx.ellipse(
horses[2].x + (horseWidth /2) , // center of horses position horses[2].x + (horseWidth /2) , // center of horses position
HEIGHT - (horseHeight * 1.25),// center of lane HEIGHT - (horseHeight * 1.25),// center of lane
(horseWidth * .75) / 2, (horseWidth * .75) / 2,
(horseHeight * .25) / 2, (horseHeight * .25) / 2,
0, 0, Math.PI *2); 0, 0, Math.PI *2);
ctx.fill(); ctx.fill();
ctx.beginPath(); ctx.beginPath();
ctx.ellipse( ctx.ellipse(
horses[1].x + (horseWidth /2) , // center of horses position horses[1].x + (horseWidth /2) , // center of horses position
HEIGHT - (horseHeight * .75),// center of lane HEIGHT - (horseHeight * .75),// center of lane
(horseWidth * .75) / 2, (horseWidth * .75) / 2,
(horseHeight * .25) / 2, (horseHeight * .25) / 2,
0, 0, Math.PI *2); 0, 0, Math.PI *2);
ctx.fill(); ctx.fill();
ctx.beginPath(); ctx.beginPath();
ctx.ellipse( ctx.ellipse(
horses[0].x + (horseWidth /2) , // center of horses position horses[0].x + (horseWidth /2) , // center of horses position
HEIGHT - (horseHeight * .25),// center of lane HEIGHT - (horseHeight * .25),// center of lane
(horseWidth * .75) / 2, (horseWidth * .75) / 2,
(horseHeight * .25) / 2, (horseHeight * .25) / 2,
0, 0, Math.PI *2); 0, 0, Math.PI *2);
ctx.fill(); ctx.fill();
} }

882
game.js
View File

@@ -1,442 +1,442 @@
/** /**
* Created by tomdt on 6/23/2017. * Created by tomdt on 6/23/2017.
*/ */
const GAME_CANVAS = document.getElementById("gamecanvas"); const GAME_CANVAS = document.getElementById("gamecanvas");
const BG_CANVAS = document.getElementById("bgcanvas"); const BG_CANVAS = document.getElementById("bgcanvas");
const BG_CTX = BG_CANVAS.getContext("2d"); const BG_CTX = BG_CANVAS.getContext("2d");
const CTX = GAME_CANVAS.getContext("2d"); const CTX = GAME_CANVAS.getContext("2d");
const COUNTDOWN_START_SECS = 25; const COUNTDOWN_START_SECS = 35;
// Size parameters, they will be adjusted to fit the size of the screen // Size parameters, they will be adjusted to fit the size of the screen
let WIDTH = GAME_CANVAS.width; let WIDTH = GAME_CANVAS.width;
let HEIGHT = GAME_CANVAS.height; let HEIGHT = GAME_CANVAS.height;
let horseWidth = WIDTH / 8; let horseWidth = WIDTH / 8;
let horseHeight = WIDTH / 8; let horseHeight = WIDTH / 8;
// state tracking // state tracking
let cyclesRemaining = 1000; let cyclesRemaining = 1000;
let gameState = "preRace"; // this should probably be an enum later let gameState = "preRace"; // this should probably be an enum later
let horses = []; let horses = [];
let finalPlaces = []; let finalPlaces = [];
let finishLineScan = 0; let finishLineScan = 0;
let fanfarePlayedFlag = false; let fanfarePlayedFlag = false;
let placeCount = 1; let placeCount = 1;
let roundScored = false; let roundScored = false;
let scoreboard = JSON.parse(window.localStorage.getItem("cd_scoreboard")) || {}; let scoreboard = JSON.parse(window.localStorage.getItem("cd_scoreboard")) || {};
//UI event handlers //UI event handlers
let clickHandlerLoaded = false; let clickHandlerLoaded = false;
// sound effect triggers // sound effect triggers
const soundEffectTriggers = [Math.floor(Math.random() * (100)) + 700, // should be between 700 and 800 const soundEffectTriggers = [Math.floor(Math.random() * (100)) + 700, // should be between 700 and 800
Math.floor(Math.random() * (100)) + 300, // should be between 300 and 400 Math.floor(Math.random() * (100)) + 300, // should be between 300 and 400
// Math.floor(Math.random() * (100)) + 200, //between 200 - 300 // Math.floor(Math.random() * (100)) + 200, //between 200 - 300
]; ];
//Start game loop //Start game loop
window.onload = ( ) => { window.onload = ( ) => {
console.log("-- Scoreboard Check --"); console.log("-- Scoreboard Check --");
console.log(scoreboard); console.log(scoreboard);
initGame(); initGame();
// The game loop should be a setInterval that way the screen size can be adjusted // The game loop should be a setInterval that way the screen size can be adjusted
setInterval(gameLoop, 20); // a touch <60 FPS setInterval(gameLoop, 20); // a touch <60 FPS
}; };
function initGame(){ function initGame(){
cyclesRemaining = 1000; cyclesRemaining = 1000;
gameState = "preRace"; // this should probably be an enum later gameState = "preRace"; // this should probably be an enum later
horses = []; horses = [];
finalPlaces = []; finalPlaces = [];
finishLineScan = 0; finishLineScan = 0;
fanfarePlayedFlag = false; fanfarePlayedFlag = false;
clickHandlerLoaded = false; clickHandlerLoaded = false;
roundScored = false; roundScored = false;
initBackground(); initBackground();
initHorses(); initHorses();
} }
function gameLoop(){ function gameLoop(){
switch(gameState){ switch(gameState){
case "preRace": case "preRace":
screenReset(); screenReset();
drawStartScreen(CTX ,BG_CTX, WIDTH, HEIGHT, horseHeight); drawStartScreen(CTX ,BG_CTX, WIDTH, HEIGHT, horseHeight);
if (horses.length === 4){ if (horses.length === 4){
if (!clickHandlerLoaded){ if (!clickHandlerLoaded){
let handler = function (event) { let handler = function (event) {
gameState = 'countdownStart'; gameState = 'countdownStart';
console.log ("Horses loaded, transitioning to countdown"); console.log ("Horses loaded, transitioning to countdown");
removeEventListener('click', handler, false); removeEventListener('click', handler, false);
clickHandlerLoaded = false; clickHandlerLoaded = false;
} ; } ;
window.addEventListener("click",handler,false); window.addEventListener("click",handler,false);
clickHandlerLoaded = true; clickHandlerLoaded = true;
} }
} }
break; break;
case "countdownStart": case "countdownStart":
startCountdown(COUNTDOWN_START_SECS,BG_CTX); startCountdown(COUNTDOWN_START_SECS,BG_CTX);
break; break;
case "running": case "running":
screenReset(); screenReset();
runRace(CTX,BG_CTX); runRace(CTX,BG_CTX);
break; break;
case "finishing": case "finishing":
screenReset(); screenReset();
runRace(CTX,BG_CTX); runRace(CTX,BG_CTX);
break; break;
case "finished": case "finished":
//quick and dirty fanfare check //quick and dirty fanfare check
if (!fanfarePlayedFlag){ if (!fanfarePlayedFlag){
playFanfare(); playFanfare();
fanfarePlayedFlag = true; fanfarePlayedFlag = true;
setTimeout(()=>{ setTimeout(()=>{
gameState = "WinnerCloseUp"; gameState = "WinnerCloseUp";
}, 7 * 1000); }, 7 * 1000);
} }
CTX.clearRect(0, 0, WIDTH, HEIGHT); CTX.clearRect(0, 0, WIDTH, HEIGHT);
drawResults(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces); drawResults(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces);
break; break;
case "WinnerCloseUp": case "WinnerCloseUp":
drawWinnerCloseUp(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces); drawWinnerCloseUp(BG_CTX, WIDTH, HEIGHT, horseHeight, finalPlaces);
if (!clickHandlerLoaded){ if (!clickHandlerLoaded){
let handler = function () { let handler = function () {
console.log("Restarting game....") console.log("Restarting game....")
initGame(); initGame();
gameState = "preRace" gameState = "preRace"
removeEventListener('click', handler, false); removeEventListener('click', handler, false);
clickHandlerLoaded = false; clickHandlerLoaded = false;
}; };
clickHandlerLoaded = true; clickHandlerLoaded = true;
addEventListener('click', handler, false); addEventListener('click', handler, false);
} }
break; break;
default: default:
break; break;
} }
} }
function runRace(ctx,bg_ctx){ function runRace(ctx,bg_ctx){
cyclesRemaining --; cyclesRemaining --;
//handle race background //handle race background
drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight, cyclesRemaining, true); drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight, cyclesRemaining, true);
//todo- change these sway varibles to be "trot" objects, or something, at put it in a horse object, so we can reuse these better //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 // horse 1 & 2 are hilarious, horse 3&4 are more normal paced
const lane_1_height = HEIGHT - (horseHeight * 1.25); const lane_1_height = HEIGHT - (horseHeight * 1.25);
const horse_1_sway = Math.sin(cyclesRemaining) * 10; const horse_1_sway = Math.sin(cyclesRemaining) * 10;
const lane_2_height = HEIGHT - (horseHeight * 1.75); const lane_2_height = HEIGHT - (horseHeight * 1.75);
const horse_2_sway = Math.cos(cyclesRemaining) * 10; const horse_2_sway = Math.cos(cyclesRemaining) * 10;
const lane_3_height = HEIGHT - (horseHeight * 2.25); const lane_3_height = HEIGHT - (horseHeight * 2.25);
const horse_3_sway = Math.sin(cyclesRemaining/2) * 10; const horse_3_sway = Math.sin(cyclesRemaining/2) * 10;
const lane_4_height = HEIGHT - (horseHeight * 2.75); const lane_4_height = HEIGHT - (horseHeight * 2.75);
const horse_4_sway = Math.cos(cyclesRemaining/2) * 10; const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
horses[0].y = (lane_1_height + horse_1_sway); horses[0].y = (lane_1_height + horse_1_sway);
horses[1].y = (lane_2_height + horse_2_sway); horses[1].y = (lane_2_height + horse_2_sway);
horses[2].y = (lane_3_height + horse_3_sway); horses[2].y = (lane_3_height + horse_3_sway);
horses[3].y = (lane_4_height + horse_4_sway); horses[3].y = (lane_4_height + horse_4_sway);
updateHorsePositions(); updateHorsePositions();
checkForSoundEffects(cyclesRemaining); checkForSoundEffects(cyclesRemaining);
//draw shadows under horses //draw shadows under horses
fg_drawShadows(ctx, horses, horseHeight, horseWidth); fg_drawShadows(ctx, horses, horseHeight, horseWidth);
// draw horses - order is important!!! // draw horses - order is important!!!
ctx.drawImage(horses[3].image, horses[3].x , horses[3].y , horseWidth, horseHeight); ctx.drawImage(horses[3].image, horses[3].x , horses[3].y , horseWidth, horseHeight);
ctx.drawImage(horses[2].image, horses[2].x , horses[2].y , horseWidth, horseHeight); ctx.drawImage(horses[2].image, horses[2].x , horses[2].y , horseWidth, horseHeight);
ctx.drawImage(horses[1].image, horses[1].x , horses[1].y , horseWidth, horseHeight); ctx.drawImage(horses[1].image, horses[1].x , horses[1].y , horseWidth, horseHeight);
ctx.drawImage(horses[0].image, horses[0].x , horses[0].y , horseWidth, horseHeight); ctx.drawImage(horses[0].image, horses[0].x , horses[0].y , horseWidth, horseHeight);
if (cyclesRemaining <= 0 ){ if (cyclesRemaining <= 0 ){
if (gameState === 'running'){ if (gameState === 'running'){
console.log("checking for winners now"); console.log("checking for winners now");
finishLineScan = WIDTH - horseWidth; finishLineScan = WIDTH - horseWidth;
gameState = "finishing"; gameState = "finishing";
} }
let foundHorseIndex = null; let foundHorseIndex = null;
for (let i = 0; i < horses.length; i++) { for (let i = 0; i < horses.length; i++) {
//horse has finished //horse has finished
if (horses[i].x >= finishLineScan && horses[i].place === null){ if (horses[i].x >= finishLineScan && horses[i].place === null){
if (!foundHorseIndex || horses[foundHorseIndex].x < horses[i].x) { if (!foundHorseIndex || horses[foundHorseIndex].x < horses[i].x) {
foundHorseIndex = i; foundHorseIndex = i;
} }
} }
} }
if(foundHorseIndex != null){ if(foundHorseIndex != null){
finalPlaces.push(horses[foundHorseIndex]); finalPlaces.push(horses[foundHorseIndex]);
horses[foundHorseIndex].place = placeCount ++; horses[foundHorseIndex].place = placeCount ++;
console.log("Horse Finished - " + foundHorseIndex); console.log("Horse Finished - " + foundHorseIndex);
} }
// horses.splice(foundHorseIndex); // horses.splice(foundHorseIndex);
if (finalPlaces.length === 4){ if (finalPlaces.length === 4){
if (!roundScored){ if (!roundScored){
addWinnerToScoreboard(finalPlaces); addWinnerToScoreboard(finalPlaces);
getAlltimeWinnerFromScoreboard(); getAlltimeWinnerFromScoreboard();
roundScored = true; roundScored = true;
} }
stopGallop(); stopGallop();
// give it a bit of time before setting gameState to finished // give it a bit of time before setting gameState to finished
setTimeout(() => { setTimeout(() => {
gameState = "finished"; gameState = "finished";
}, 2000) }, 2000)
} }
finishLineScan -= finishLineSpeed; finishLineScan -= finishLineSpeed;
} }
} }
function initHorses(prevWinner) { function initHorses(prevWinner) {
console.log("initHorses"); console.log("initHorses");
if (prevWinner){ if (prevWinner){
} }
const temp_horse_array = []; const temp_horse_array = [];
//grab random horses //grab random horses
while (temp_horse_array.length < 4) { while (temp_horse_array.length < 4) {
let validPick = true; let validPick = true;
// pick an index // pick an index
let pick = Math.floor(Math.random() * horse_array.length); let pick = Math.floor(Math.random() * horse_array.length);
// check if its taken // check if its taken
for (let i =0; i < temp_horse_array.length; i ++){ for (let i =0; i < temp_horse_array.length; i ++){
if (temp_horse_array[i].name === horse_array[pick].name){ validPick = false;} if (temp_horse_array[i].name === horse_array[pick].name){ validPick = false;}
} }
//push to temp array //push to temp array
if (validPick){ if (validPick){
temp_horse_array.push(horse_array[pick]); temp_horse_array.push(horse_array[pick]);
} }
console.log(temp_horse_array); console.log(temp_horse_array);
} }
// build horse game play objects // build horse game play objects
for (let i =0; i < 4; i ++ ){ for (let i =0; i < 4; i ++ ){
console.log(i); console.log(i);
const horse_image = new Image(); const horse_image = new Image();
horse_image.src = temp_horse_array[i].img; horse_image.src = temp_horse_array[i].img;
const temphorse = temp_horse_array[i]; const temphorse = temp_horse_array[i];
horse_image.onload = function() { horse_image.onload = function() {
const horse = { const horse = {
image: horse_image, image: horse_image,
name: temphorse.name, name: temphorse.name,
owner: temphorse.owner, owner: temphorse.owner,
x:0, x:0,
y:0, y:0,
currentSpeed: null, currentSpeed: null,
currentDestination:null, currentDestination:null,
place: null, place: null,
changePositionCycles:[ changePositionCycles:[
Math.floor(Math.random() * (100)) + 700, // should be between 700 and 800 Math.floor(Math.random() * (100)) + 700, // should be between 700 and 800
Math.floor(Math.random() * (100)) + 450, // shuld be between 450 and 550 Math.floor(Math.random() * (100)) + 450, // shuld be between 450 and 550
Math.floor(Math.random() * (100)) + 200, //between 200 - 300 Math.floor(Math.random() * (100)) + 200, //between 200 - 300
] ]
}; };
horses.push(horse); horses.push(horse);
} }
} }
} }
function screenReset(){ function screenReset(){
HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight; HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth; WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
horseWidth = horseHeight = WIDTH / 8; horseWidth = horseHeight = WIDTH / 8;
} }
function startCountdown(seconds, bg_ctx){ function startCountdown(seconds, bg_ctx){
playCountdownAudio(seconds); playCountdownAudio(seconds);
if (gameState === "countdownStart" ) { if (gameState === "countdownStart" ) {
gameState = "countdownRunning"; gameState = "countdownRunning";
} }
console.log ("Coundown: " + seconds); console.log ("Coundown: " + seconds);
if (seconds > 0) { if (seconds > 0) {
screenReset(); screenReset();
drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds, horses); drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds, horses);
setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000); setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000);
} }
else { else {
gameState = "running"; gameState = "running";
} }
} }
function updateHorsePositions(){ function updateHorsePositions(){
for (let i = 0; i < horses.length; i++) { for (let i = 0; i < horses.length; i++) {
const horse = horses[i]; const horse = horses[i];
// update to current destination // update to current destination
if (horse.currentDestination === null){ if (horse.currentDestination === null){
horse.currentDestination = Math.floor(Math.random() * (WIDTH - horseWidth)); horse.currentDestination = Math.floor(Math.random() * (WIDTH - horseWidth));
} }
if (horse.currentSpeed === null){ if (horse.currentSpeed === null){
horse.currentSpeed= Math.floor(Math.random() * 5) + 3; horse.currentSpeed= Math.floor(Math.random() * 5) + 3;
} }
if (horse.x > horse.currentDestination + 5 ){ if (horse.x > horse.currentDestination + 5 ){
horse.x -= horse.currentSpeed / 2; horse.x -= horse.currentSpeed / 2;
} }
else if (horse.x < horse.currentDestination - 5){ else if (horse.x < horse.currentDestination - 5){
horse.x += horse.currentSpeed; horse.x += horse.currentSpeed;
} }
//add x sway //add x sway
horse.x += swayPatternFunctions[i].x(cyclesRemaining); horse.x += swayPatternFunctions[i].x(cyclesRemaining);
// blow away destination if horse has hit its reset point // blow away destination if horse has hit its reset point
for (let i =0; i < horse.changePositionCycles.length; i ++){ for (let i =0; i < horse.changePositionCycles.length; i ++){
if (cyclesRemaining === horse.changePositionCycles[i]){ if (cyclesRemaining === horse.changePositionCycles[i]){
horse.currentDestination = null; horse.currentDestination = null;
horse.currentSpeed = null; horse.currentSpeed = null;
} }
} }
//last second reset for giggles! //last second reset for giggles!
if(cyclesRemaining === 50 ){ if(cyclesRemaining === 50 ){
horse.currentDestination = null; horse.currentDestination = null;
horse.currentSpeed = null; horse.currentSpeed = null;
} }
} }
} }
function checkForSoundEffects(cycle){ function checkForSoundEffects(cycle){
for (let i = 0; i < soundEffectTriggers.length; i++) { for (let i = 0; i < soundEffectTriggers.length; i++) {
if (cycle === soundEffectTriggers[i]){ if (cycle === soundEffectTriggers[i]){
playRandomNeigh(); playRandomNeigh();
} }
} }
} }
swayPatternFunctions = [ swayPatternFunctions = [
{x:(cycle)=>{ return Math.cos(cycle/3) * 10;}, y:(cycle)=>{return Math.sin(cycle) * 10} }, {x:(cycle)=>{ return Math.cos(cycle/3) * 10;}, y:(cycle)=>{return Math.sin(cycle) * 10} },
{x:(cycle)=>{ return Math.sin(cycle/3) * 10;}, y:(cycle)=>{ return Math.cos(cycle) * 10;}}, {x:(cycle)=>{ return Math.sin(cycle/3) * 10;}, y:(cycle)=>{ return Math.cos(cycle) * 10;}},
{x:(cycle)=>{ return Math.cos(cycle/4) * 10;}, y:(cycle)=>{ return Math.sin(cycle/2) * 10}}, {x:(cycle)=>{ return Math.cos(cycle/4) * 10;}, y:(cycle)=>{ return Math.sin(cycle/2) * 10}},
{x:(cycle)=>{ return Math.sin(cycle/4) * 10;}, y:(cycle)=>{ return Math.cos(cycle/2) * 10}} {x:(cycle)=>{ return Math.sin(cycle/4) * 10;}, y:(cycle)=>{ return Math.cos(cycle/2) * 10}}
]; ];
function addWinnerToScoreboard(finalPlaceArray){ function addWinnerToScoreboard(finalPlaceArray){
let makeFirst = true; let makeFirst = true;
let makeSecond = true; let makeSecond = true;
let makeThird = true; let makeThird = true;
let makeFourth = true; let makeFourth = true;
// check for existing horses in scoreboard // check for existing horses in scoreboard
for( const horseScoreListing in scoreboard){ for( const horseScoreListing in scoreboard){
if (horseScoreListing === finalPlaceArray[0].name){ if (horseScoreListing === finalPlaceArray[0].name){
makeFirst = false; makeFirst = false;
scoreboard[horseScoreListing].totalRaces ++; scoreboard[horseScoreListing].totalRaces ++;
scoreboard[horseScoreListing].firstPlaces ++; scoreboard[horseScoreListing].firstPlaces ++;
} else if (horseScoreListing === finalPlaceArray[1].name){ } else if (horseScoreListing === finalPlaceArray[1].name){
makeSecond = false; makeSecond = false;
scoreboard[horseScoreListing].totalRaces ++; scoreboard[horseScoreListing].totalRaces ++;
scoreboard[horseScoreListing].secondPlaces ++; scoreboard[horseScoreListing].secondPlaces ++;
} else if (horseScoreListing === finalPlaceArray[2].name){ } else if (horseScoreListing === finalPlaceArray[2].name){
makeThird = false; makeThird = false;
scoreboard[horseScoreListing].totalRaces ++; scoreboard[horseScoreListing].totalRaces ++;
scoreboard[horseScoreListing].thirdPlaces ++; scoreboard[horseScoreListing].thirdPlaces ++;
} else if (horseScoreListing === finalPlaceArray[3].name){ } else if (horseScoreListing === finalPlaceArray[3].name){
makeFourth = false; makeFourth = false;
scoreboard[horseScoreListing].totalRaces ++; scoreboard[horseScoreListing].totalRaces ++;
scoreboard[horseScoreListing].forthPlaces ++; scoreboard[horseScoreListing].forthPlaces ++;
} }
} }
// //
if (makeFirst){ if (makeFirst){
scoreboard[finalPlaceArray[0].name] = {totalRaces: 1, firstPlaces: 1, secondPlaces: 0, thirdPlaces: 0, forthPlaces:0} scoreboard[finalPlaceArray[0].name] = {totalRaces: 1, firstPlaces: 1, secondPlaces: 0, thirdPlaces: 0, forthPlaces:0}
} }
if (makeSecond){ if (makeSecond){
scoreboard[finalPlaceArray[1].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 1, thirdPlaces: 0, forthPlaces:0} scoreboard[finalPlaceArray[1].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 1, thirdPlaces: 0, forthPlaces:0}
} }
if (makeThird){ if (makeThird){
scoreboard[finalPlaceArray[2].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 1, forthPlaces:0} scoreboard[finalPlaceArray[2].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 1, forthPlaces:0}
} }
if (makeFourth){ if (makeFourth){
scoreboard[finalPlaceArray[3].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 0, forthPlaces:1} scoreboard[finalPlaceArray[3].name] = {totalRaces: 1, firstPlaces: 0, secondPlaces: 0, thirdPlaces: 0, forthPlaces:1}
} }
// Save Scoreboard to local variable again. // Save Scoreboard to local variable again.
window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard)); window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard));
} }
function getAlltimeWinnerFromScoreboard(){ function getAlltimeWinnerFromScoreboard(){
console.log(scoreboard); console.log(scoreboard);
let mostwins = 0; let mostwins = 0;
let winningHorse = ""; let winningHorse = "";
for( const horseScoreListing in scoreboard){ for( const horseScoreListing in scoreboard){
if (scoreboard[horseScoreListing].firstPlaces > mostwins) { if (scoreboard[horseScoreListing].firstPlaces > mostwins) {
mostwins = scoreboard[horseScoreListing].firstPlaces; mostwins = scoreboard[horseScoreListing].firstPlaces;
winningHorse = horseScoreListing; winningHorse = horseScoreListing;
} }
} }
if (mostwins > 0 ){ if (mostwins > 0 ){
console.log("The winningest horse of all time is " +winningHorse+ " with a total of " +mostwins+ " wins"); console.log("The winningest horse of all time is " +winningHorse+ " with a total of " +mostwins+ " wins");
} }
} }
function deleteScoreboard() { function deleteScoreboard() {
scoreboard = {}; scoreboard = {};
window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard)); window.localStorage.setItem("cd_scoreboard", JSON.stringify(scoreboard));
} }
let deletecheck = false; let deletecheck = false;
window.addEventListener("keypress", (e)=>{ window.addEventListener("keypress", (e)=>{
if (e.key === 'd'){ if (e.key === 'd'){
if (deletecheck === false){ if (deletecheck === false){
deletecheck = true; deletecheck = true;
console.log("Press again to delete scoreboard, press any other key to cancel"); console.log("Press again to delete scoreboard, press any other key to cancel");
} }
else { else {
console.log("deleting scoreboard"); console.log("deleting scoreboard");
deleteScoreboard() deleteScoreboard()
} }
}else { }else {
deletecheck = false deletecheck = false
} }
if (e.key === "s"){ if (e.key === "s"){
console.log(scoreboard); console.log(scoreboard);
} }
if(e.key ===" "){ if(e.key ===" "){
document.body.click(); document.body.click();
} }
},false); },false);

44
index.html
View File

@@ -1,23 +1,23 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<title> <title>
Crivitz Derby Crivitz Derby
</title> </title>
<link rel="stylesheet" href="main.css"> <link rel="stylesheet" href="main.css">
</head> </head>
<body> <body>
<canvas id="fgcanvas"></canvas> <canvas id="fgcanvas"></canvas>
<canvas id="gamecanvas"></canvas> <canvas id="gamecanvas"></canvas>
<canvas id="bgcanvas"></canvas> <canvas id="bgcanvas"></canvas>
<script src="resources/libs/howler.js"> </script> <script src="resources/libs/howler.js"> </script>
<script src="resources/horse_array.js"></script> <script src="resources/horse_array.js"></script>
<script src="audio.js"></script> <script src="audio.js"></script>
<script src="background.js" ></script> <script src="background.js" ></script>
<script src="foreground_drawing.js" ></script> <script src="foreground_drawing.js" ></script>
<script src="game.js" ></script> <script src="game.js" ></script>
</body> </body>
</html> </html>

58
main.css
View File

@@ -1,30 +1,30 @@
html, body{ html, body{
height: 100%; height: 100%;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
} }
#gamecanvas{ #gamecanvas{
z-index: 200; z-index: 200;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
/*display: block;*/ /*display: block;*/
/*margin: auto;*/ /*margin: auto;*/
/*border: 5px solid black;*/ /*border: 5px solid black;*/
height: 100%; height: 100%;
width: 100%; width: 100%;
} }
#bgcanvas{ #bgcanvas{
z-index: 10; z-index: 10;
position: absolute; position: absolute;
top: 0px; top: 0px;
left: 0px; left: 0px;
/*display: block;*/ /*display: block;*/
/*margin: auto;*/ /*margin: auto;*/
/*border: 5px solid black;*/ /*border: 5px solid black;*/
height: 100%; height: 100%;
width: 100%; width: 100%;
} }

45
resources/horse_array.js
View File

@@ -1,19 +1,28 @@
const horse_array = [ const horse_array = [
{img: "./resources/horse_images/final/a_horse.png", name: "A Horse" , owner: "Ola"}, {img: "./resources/horse_images/final/a_horse.png", name: "A Horse" , owner: "Ola"},
{img: "./resources/horse_images/final/BlackJack_10.png", name: "BlackJack", owner: "Jenn"}, {img: "./resources/horse_images/final/BlackJack_10.png", name: "BlackJack", owner: "Jenn"},
{img: "resources/horse_images/final/char_azNEIGHHble.png", name: "Char AzNIEGHHble" , owner: "Riley"}, {img: "resources/horse_images/final/char_azNEIGHHble.png", name: "Char AzNIEGHHble" , owner: "Riley"},
{img: "./resources/horse_images/final/CrotchRocket_93_raw.png", name: "CROTCH ROCKET", owner: "Ben"}, {img: "./resources/horse_images/final/CrotchRocket_93_raw.png", name: "CROTCH ROCKET", owner: "Ben"},
{img: "./resources/horse_images/final/DEMON_HORZE_666.png", name: "DEMON HORZE" , owner: "Ski"}, {img: "./resources/horse_images/final/DEMON_HORZE_666.png", name: "DEMON HORZE" , owner: "Ski"},
{img: "./resources/horse_images/final/dickzilla.png", name: "DickZilla" , owner: "Alex"}, {img: "./resources/horse_images/final/dickzilla.png", name: "DickZilla" , owner: "Alex"},
{img: "./resources/horse_images/final/f-TheHaters.png", name: "Fuck the Haters" , owner: "Carlos"}, {img: "./resources/horse_images/final/f-TheHaters.png", name: "Fuck the Haters" , owner: "Carlos"},
{img: "./resources/horse_images/final/GH.png", name: "GH" , owner: "Skoo"}, {img: "./resources/horse_images/final/GH.png", name: "GH" , owner: "Skoo"},
{img: "./resources/horse_images/final/Horse_cock.png", name: "Horse Cock" , owner: "Ben"}, {img: "./resources/horse_images/final/Horse_cock.png", name: "Horse Cock" , owner: "Ben"},
{img: "./resources/horse_images/final/horse_san_69.png", name: "Horse-San" , owner: "Riley"}, {img: "./resources/horse_images/final/horse_san_69.png", name: "Horse-San" , owner: "Riley"},
{img: "./resources/horse_images/final/killme112.png", name: "Kill Me" , owner: "Quinn"}, {img: "./resources/horse_images/final/killme112.png", name: "Kill Me" , owner: "Quinn"},
{img: "./resources/horse_images/final/lil_sebastian.png", name: "Lil' Sebastian" , owner: "Horsey Heaven"}, {img: "./resources/horse_images/final/lil_sebastian.png", name: "Lil' Sebastian" , owner: "Horsey Heaven"},
{img: "./resources/horse_images/final/stonewall_000.png", name: "Stonewall", owner: "Davie"}, {img: "./resources/horse_images/final/stonewall_000.png", name: "Stonewall", owner: "Davie"},
{img: "./resources/horse_images/final/nobody_cares.png", name: "Nobody Cares", owner: "Brendan"}, {img: "./resources/horse_images/final/nobody_cares.png", name: "Nobody Cares", owner: "Brendan"},
{img: "./resources/horse_images/final/Raibow_sparkle.png", name: "Rainbow Sparkle", owner: "Cyndi"}, {img: "./resources/horse_images/final/Raibow_sparkle.png", name: "Rainbow Sparkle", owner: "Cyndi"},
{img: "./resources/horse_images/final/arthur_horsegan.png", name: "Arthur Horsegan", owner: "Zucchini"},
{img: "./resources/horse_images/final/arthur_morgan.png", name: "Arthur Morgan", owner: "Carlos"},
{img: "./resources/horse_images/final/bob.png", name: "Bob", owner: "Ski"},
{img: "./resources/horse_images/final/elmers.png", name: "Elmers", owner: "Quinn"},
{img: "./resources/horse_images/final/hugsy.png", name: "Hugsy", owner: "Jenn"},
{img: "./resources/horse_images/final/ikea.png", name: "Ikea", owner: "Quinn"},
{img: "./resources/horse_images/final/platty.png", name: "Platty", owner: "Ski"},
{img: "./resources/horse_images/final/saweetie.png", name: "Saweetie", owner: "Ola"},
{img: "./resources/horse_images/final/Shitty_ponyta.png", name: "Shitty Ponyta", owner: "Zucchini"},
{img: "./resources/horse_images/final/Hand_Banana.png", name: "Hand Banana", owner: "Carl"},
]; ];

BIN
resources/horse_images/final/Hand_Banana.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

BIN
resources/horse_images/final/Shitty_ponyta.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.0 MiB

BIN
resources/horse_images/final/arthur_horsegan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
resources/horse_images/final/arthur_morgan.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 675 KiB

BIN
resources/horse_images/final/bob.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 812 KiB

BIN
resources/horse_images/final/elmers.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 MiB

BIN
resources/horse_images/final/hugsy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
resources/horse_images/final/ikea.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 941 KiB

BIN
resources/horse_images/final/platty.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 425 KiB

BIN
resources/horse_images/final/saweetie.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.4 MiB

2
resources/libs/howler.core.min.js vendored
View File

File diff suppressed because one or more lines are too long

6314
resources/libs/howler.js
View File

File diff suppressed because it is too large Load Diff

6
resources/libs/howler.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
resources/libs/howler.spatial.min.js vendored
View File

File diff suppressed because one or more lines are too long