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"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
<?xml version="1.0" encoding="UTF-8"?>
<module type="WEB_MODULE" version="4">
<component name="NewModuleRootManager">
<content url="file://$MODULE_DIR$">
<excludeFolder url="file://$MODULE_DIR$/.tmp" />
<excludeFolder url="file://$MODULE_DIR$/temp" />
<excludeFolder url="file://$MODULE_DIR$/tmp" />
</content>
<orderEntry type="inheritedJdk" />
<orderEntry type="sourceFolder" forTests="false" />
</component>
</module>

10
.idea/misc.xml generated
View File

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

14
.idea/modules.xml generated
View File

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

10
.idea/vcs.xml generated
View File

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

10
README.md
View File

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

354
audio.js
View File

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

432
background.js
View File

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

74
foreground_drawing.js
View File

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

882
game.js
View File

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

44
index.html
View File

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

58
main.css
View File

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

45
resources/horse_array.js
View File

@@ -1,19 +1,28 @@
const horse_array = [
{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/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/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/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/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/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/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/Raibow_sparkle.png", name: "Rainbow Sparkle", owner: "Cyndi"},
const horse_array = [
{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/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/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/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/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/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/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/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