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

refactored, reorganized, and state change to loop back to beginning after race.

Browse Source
This commit is contained in:
Tom Tibble
2020-04-04 16:58:20 -05:00
parent d6df811a48
commit a7683b519e
7 changed files with 324 additions and 318 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
.idea/workspace.xml generated
View File

@@ -2,82 +2,108 @@
<project version="4">
<component name="ChangeListManager">
<list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
<change afterPath="$PROJECT_DIR$/foreground_drawing.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/audio.js" beforeDir="false" afterPath="$PROJECT_DIR$/audio.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/background.js" beforeDir="false" afterPath="$PROJECT_DIR$/background.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/game.js" beforeDir="false" afterPath="$PROJECT_DIR$/game.js" afterDir="false" />
<change beforePath="$PROJECT_DIR$/index.html" beforeDir="false" afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" />
<ignored path="$PROJECT_DIR$/tmp/" />
<option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
<option name="TRACKING_ENABLED" value="true" />
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FUSProjectUsageTrigger">
<session id="-728345993">
<usages-collector id="statistics.lifecycle.project">
<counts>
<entry key="project.closed" value="1" />
<entry key="project.open.time.2" value="1" />
<entry key="project.open.time.7" value="1" />
<entry key="project.opened" value="2" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.edit">
<counts>
<entry key="html" value="27" />
<entry key="js" value="1243" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.edit">
<counts>
<entry key="HTML" value="27" />
<entry key="JavaScript" value="1243" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.extensions.open">
<counts>
<entry key="js" value="3" />
</counts>
</usages-collector>
<usages-collector id="statistics.file.types.open">
<counts>
<entry key="JavaScript" value="3" />
</counts>
</usages-collector>
</session>
</component>
<component name="FileEditorManager">
<leaf SIDE_TABS_SIZE_LIMIT_KEY="225">
<file leaf-file-name="index.html" pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
<state relative-caret-position="374">
<caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="audio.js" pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/audio.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2464">
<caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
<state relative-caret-position="680">
<caret line="40" column="7" lean-forward="true" selection-start-line="40" selection-start-column="7" selection-end-line="40" selection-end-column="7" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="game.js" pinned="false" current-in-tab="true">
<file pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="14">
<caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
<state relative-caret-position="209">
<caret line="190" column="54" selection-start-line="190" selection-start-column="44" selection-end-line="190" selection-end-column="54" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="a_horse.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/a_horse.png">
<provider selected="true" editor-type-id="images" />
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_array.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="306">
<caret line="18" column="2" lean-forward="true" selection-start-line="18" selection-start-column="2" selection-end-line="18" selection-end-column="2" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="horse_san_69.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/horse_san_69.png">
<provider selected="true" editor-type-id="images" />
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/foreground_drawing.js">
<provider selected="true" editor-type-id="text-editor">
<state>
<caret column="35" lean-forward="true" selection-start-column="35" selection-end-column="35" />
</state>
</provider>
</entry>
</file>
<file leaf-file-name="CrotchRocket_93_raw.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
<provider selected="true" editor-type-id="images" />
</entry>
</file>
<file leaf-file-name="DEMON_HORZE_666.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
<provider selected="true" editor-type-id="images" />
</entry>
</file>
<file leaf-file-name="stonewall_000.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
<provider selected="true" editor-type-id="images" />
</entry>
</file>
<file leaf-file-name="BlackJack_10.png" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
<provider selected="true" editor-type-id="images" />
</entry>
</file>
<file leaf-file-name="background.js" pinned="false" current-in-tab="false">
<file pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2702">
<caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
<state relative-caret-position="187">
<caret line="11" column="28" selection-start-line="11" selection-start-column="28" selection-end-line="11" selection-end-column="28" />
</state>
</provider>
</entry>
@@ -93,23 +119,6 @@
</component>
<component name="FindInProjectRecents">
<findStrings>
<find>shadow</find>
<find>swaypatter</find>
<find>math.</find>
<find>random</find>
<find>var</find>
<find>play</find>
<find>startcountdown</find>
<find>changeposition</find>
<find>runrace</find>
<find>countdown</find>
<find>horse_image_ar</find>
<find>drawracebackground</find>
<find>inithorses</find>
<find>horse_Array</find>
<find>line</find>
<find>finished</find>
<find>drawcountdown</find>
<find>coun</find>
<find>horseheigh</find>
<find>ctx.</find>
@@ -123,6 +132,23 @@
<find>draw</find>
<find>draw horses</find>
<find>final results</find>
<find>start</find>
<find>star</find>
<find>drawrace</find>
<find>drawracebac</find>
<find>runra</find>
<find>seconds</find>
<find>drawstar</find>
<find>BG_CTXdraw</find>
<find>drawStar</find>
<find>drawSta</find>
<find>SECONDS</find>
<find>drawracebackg</find>
<find>cyclesremainign</find>
<find>handler</find>
<find>inithorses</find>
<find>restarting</find>
<find>coundown</find>
</findStrings>
<replaceStrings>
<replace>cyclesRemaining</replace>
@@ -137,9 +163,13 @@
<list>
<option value="$PROJECT_DIR$/resources/background.js" />
<option value="$PROJECT_DIR$/main.css" />
<option value="$PROJECT_DIR$/resources/forground_drawing.js" />
<option value="$PROJECT_DIR$/forground_drawing.js" />
<option value="$PROJECT_DIR$/foreground_drawing.js" />
<option value="$PROJECT_DIR$/audio.js" />
<option value="$PROJECT_DIR$/index.html" />
<option value="$PROJECT_DIR$/background.js" />
<option value="$PROJECT_DIR$/resources/horse_array.js" />
<option value="$PROJECT_DIR$/index.html" />
<option value="$PROJECT_DIR$/game.js" />
</list>
</option>
@@ -150,14 +180,10 @@
<detection-done>true</detection-done>
<sorting>DEFINITION_ORDER</sorting>
</component>
<component name="NodePackageJsonFileManager">
<packageJsonPaths />
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-1" />
<option name="y" value="-17" />
<option name="width" value="1368" />
<option name="height" value="786" />
<component name="ProjectFrameBounds">
<option name="x" value="39" />
<option name="width" value="1701" />
<option name="height" value="1054" />
</component>
<component name="ProjectLevelVcsManager" settingsEditedManually="true" />
<component name="ProjectView">
@@ -169,27 +195,14 @@
<subPane>
<expand>
<path>
<item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
<item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
<item name="CrivitzDerby" type="b2602c69:ProjectViewProjectNode" />
<item name="CrivitzDerby" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
<item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
<item name="CrivitzDerby" type="b2602c69:ProjectViewProjectNode" />
<item name="CrivitzDerby" type="462c0819:PsiDirectoryNode" />
<item name="resources" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
<item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
<item name="resources" type="462c0819:PsiDirectoryNode" />
<item name="horse_images" type="462c0819:PsiDirectoryNode" />
</path>
<path>
<item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
<item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
<item name="resources" type="462c0819:PsiDirectoryNode" />
<item name="horse_images" type="462c0819:PsiDirectoryNode" />
<item name="final" type="462c0819:PsiDirectoryNode" />
</path>
</expand>
<select />
</subPane>
@@ -205,6 +218,7 @@
</component>
<component name="RecentsManager">
<key name="MoveFile.RECENT_KEYS">
<recent name="C:\Users\tomdt\Dev\CrivitzDerby" />
<recent name="$PROJECT_DIR$" />
</key>
</component>
@@ -221,7 +235,9 @@
</option>
</component>
<component name="RunManager">
<configuration name="index.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/HorseRaceGame/index.html" />
<configuration name="index.html" type="JavascriptDebugType" factoryName="JavaScript Debug" temporary="true" nameIsGenerated="true" uri="http://localhost:63342/HorseRaceGame/index.html">
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="JavaScript Debug.index.html" />
@@ -241,32 +257,34 @@
<workItem from="1562211282530" duration="37792000" />
<workItem from="1563080090211" duration="25669000" />
<workItem from="1569291993530" duration="184000" />
<workItem from="1585964564085" duration="8983000" />
<workItem from="1586030603124" duration="6776000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="63645000" />
<option name="totallyTimeSpent" value="79404000" />
</component>
<component name="ToolWindowManager">
<frame x="-1" y="-17" width="1368" height="786" extended-state="6" />
<frame x="39" y="0" width="1701" height="1054" extended-state="0" />
<layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" />
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.16837041" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Find" order="1" weight="0.32934782" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info anchor="bottom" id="TODO" order="6" />
<window_info anchor="bottom" id="Docker" order="7" show_stripe_button="false" />
<window_info anchor="bottom" id="Event Log" order="7" side_tool="true" />
<window_info anchor="bottom" id="Version Control" order="7" />
<window_info anchor="bottom" id="Run" order="2" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info active="true" anchor="bottom" id="Terminal" order="7" visible="true" weight="0.32882884" />
<window_info id="Favorites" order="2" side_tool="true" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
<window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
<window_info active="true" anchor="bottom" id="Terminal" order="8" visible="true" weight="0.23260869" />
<window_info anchor="bottom" id="Event Log" order="9" side_tool="true" />
<window_info anchor="bottom" id="Version Control" order="10" />
<window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
<window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
<window_info anchor="bottom" id="Message" order="0" />
<window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
<window_info anchor="bottom" id="Find" order="1" />
<window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
</layout>
</component>
<component name="TypeScriptGeneratedFilesManager">
@@ -277,21 +295,26 @@
</component>
<component name="XDebuggerManager">
<breakpoint-manager>
<option name="time" value="1" />
<breakpoints>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/game.js</url>
<line>94</line>
<option name="timeStamp" value="1" />
</line-breakpoint>
<line-breakpoint enabled="true" type="javascript">
<url>file://$PROJECT_DIR$/game.js</url>
<line>38</line>
<properties lambdaOrdinal="-1" />
<option name="timeStamp" value="2" />
</line-breakpoint>
</breakpoints>
</breakpoint-manager>
</component>
<component name="editorHistoryManager">
<entry file="file://$PROJECT_DIR$/index.html">
<entry file="file://$PROJECT_DIR$/main.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/audio.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2464">
<caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
<state relative-caret-position="280">
<caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
</state>
</provider>
</entry>
@@ -313,110 +336,45 @@
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/background.js">
<entry file="file://$PROJECT_DIR$/foreground_drawing.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2702">
<caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
<state>
<caret column="35" lean-forward="true" selection-start-column="35" selection-end-column="35" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="462">
<caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="196">
<caret line="14" column="23" lean-forward="true" selection-start-line="14" selection-start-column="23" selection-end-line="14" selection-end-column="23" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/main.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="280">
<caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="868">
<caret line="62" column="48" selection-start-line="62" selection-start-column="21" selection-end-line="62" selection-end-column="48" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="1764">
<caret line="126" column="29" lean-forward="true" selection-start-line="126" selection-start-column="29" selection-end-line="126" selection-end-column="29" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/main.css">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="280">
<caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/audio.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2464">
<caret line="176" column="11" selection-start-line="176" selection-start-column="11" selection-end-line="176" selection-end-column="11" />
<state relative-caret-position="680">
<caret line="40" column="7" lean-forward="true" selection-start-line="40" selection-start-column="7" selection-end-line="40" selection-end-column="7" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="210">
<caret line="15" column="40" selection-start-line="15" selection-start-column="40" selection-end-line="15" selection-end-column="40" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/horse_san_69.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/a_horse.png">
<provider selected="true" editor-type-id="images" />
</entry>
<entry file="file://$PROJECT_DIR$/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="2702">
<caret line="193" column="82" selection-start-line="193" selection-start-column="82" selection-end-line="193" selection-end-column="82" />
<state relative-caret-position="187">
<caret line="11" column="28" selection-start-line="11" selection-start-column="28" selection-end-line="11" selection-end-column="28" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_array.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="306">
<caret line="18" column="2" lean-forward="true" selection-start-line="18" selection-start-column="2" selection-end-line="18" selection-end-column="2" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/index.html">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="374">
<caret line="22" column="7" lean-forward="true" selection-start-line="22" selection-start-column="7" selection-end-line="22" selection-end-column="7" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="14">
<caret line="33" column="30" selection-start-line="33" selection-start-column="30" selection-end-line="33" selection-end-column="30" />
<state relative-caret-position="209">
<caret line="190" column="54" selection-start-line="190" selection-start-column="44" selection-end-line="190" selection-end-column="54" />
</state>
</provider>
</entry>

2
audio.js
View File

@@ -43,7 +43,7 @@ const gunshots = [
src:['resources/audio/starter_guns/347591__nicjonesaudio__assault-rifle-1.wav']
}),
new Howl({
src:['/home/tibz/Dev/HorseRaceGame/resources/audio/starter_guns/362652__trngle__cat-meow(1).wav']
src:['resources/audio/starter_guns/362652__trngle__cat-meow(1).wav']
}),
new Howl({
src:['resources/audio/starter_guns/382735__schots__gun-shot.aiff']

40
background.js
View File

@@ -1,13 +1,21 @@
const fencePostGap = 200;
let fenceOffset = fencePostGap;
let finishLinePosition = -1000;
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
@@ -26,7 +34,7 @@ function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMo
ctx.fillRect(0, height - (2 * horseSize) , width, height);
// Draw Distance left, or draw finishline
if (isMoving) {
if (isMoving && gameState !== "preRace") {
if (cyclesRemaining > 0) {
drawRemainingDistance(ctx, width, horseSize, cyclesRemaining);
}
@@ -39,6 +47,9 @@ function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMo
finishLinePosition -= finishLineSpeed;
}
}
else {
}
// Draw grass
ctx.fillStyle = '#32CD32';
@@ -170,34 +181,37 @@ function drawWinnerCloseUp(ctx, width, height, horseSize, finalPlaces){
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.font = "40px Arial";
ctx.strokeStyle = '#000000';
ctx.lineWidth = 3;
ctx.strokeText("Winner!!!", horseSize* 3, height - (horseSize * 3));
ctx.fillStyle = '#ffffff';
ctx.fillText("Winner!!!", horseSize* 3, height - (horseSize * 3));
ctx.lineWidth =1;
winnerTextCounter ++;
if (winnerTextCounter > 50){
showWinnerText = false;
}
}
else {
ctx.font = "40px Arial";
ctx.strokeStyle = '#000000';
ctx.lineWidth = 3;
ctx.strokeText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3)+60);
ctx.fillStyle = '#ffffff';
ctx.fillText(finalPlaces[0].name, horseSize* 3, height - (horseSize * 3) + 60);
ctx.lineWidth =1;
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);
}

38
foreground_drawing.js Normal file
View File

@@ -0,0 +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();
}

157
game.js
View File

@@ -2,27 +2,9 @@
* Created by tomdt on 6/23/2017.
*/
let cyclesRemaining = 1000;
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 GAME_CANVAS = document.getElementById("gamecanvas");
@@ -31,7 +13,7 @@ const BG_CANVAS = document.getElementById("bgcanvas");
const BG_CTX = BG_CANVAS.getContext("2d");
const CTX = GAME_CANVAS.getContext("2d");
const COUNTDOWN_START_SECS = 30;
const COUNTDOWN_START_SECS = 25;
// Size parameters, they will be adjusted to fit the size of the screen
let WIDTH = GAME_CANVAS.width;
@@ -41,41 +23,63 @@ let horseWidth = WIDTH / 8;
let horseHeight = WIDTH / 8;
// state tracking
let cyclesRemaining = 1000;
let gameState = "preRace"; // this should probably be an enum later
const horses = [];
const finalPlaces = [];
let horses = [];
let finalPlaces = [];
let finishLineScan = 0;
let fanfarePlayedFlag = false;
let placeCount = 1;
//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, // shuld 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
];
//Start game loop
window.onload = ( ) => {
// initBackground();
initHorses();
// The game loop should be a setInterval that way the screen size can be adjusted.
// I think its a bit easier to keep track of the state from one loop vs function callbacks
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;
initBackground();
initHorses();
}
function gameLoop(){
switch(gameState){
case "preRace":
screenReset();
drawStartScreen(CTX ,BG_CTX, WIDTH, HEIGHT, horseHeight);
if (horses.length === 4){
gameState = 'countdownStart';
console.log ("Horses loaded, transitioning to countdown");
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":
@@ -104,6 +108,17 @@ function gameLoop(){
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:
@@ -114,18 +129,12 @@ function gameLoop(){
function runRace(ctx,bg_ctx){
cyclesRemaining --;
//handle race background
drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight, cyclesRemaining, true);
//Figure out horse postitions
const x = WIDTH / 2;
const y = HEIGHT / 2;
const lane_1_height = HEIGHT - (horseHeight * 1.25);
//todo- change these sway varibles to be "trot" objects, or something, at put it in a horse object, so we can reuse these better
// horse 1 & 2 are hilarious, horse 3&4 are more normal paced
const lane_1_height = HEIGHT - (horseHeight * 1.25);
const horse_1_sway = Math.sin(cyclesRemaining) * 10;
@@ -140,6 +149,10 @@ function runRace(ctx,bg_ctx){
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();
@@ -148,51 +161,13 @@ function runRace(ctx,bg_ctx){
//draw shadows under horses
fg_drawShadows(ctx, horses, horseHeight, horseWidth);
// ctx.ellipse(x, y, radiusX, radiusY, rotation, startAngle, endAngle [, anticlockwise]);
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();
// draw horses
ctx.drawImage(horses[3].image, horses[3].x , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[2].image, horses[2].x , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[1].image, horses[1].x , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
ctx.drawImage(horses[0].image, horses[0].x , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
// 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'){
@@ -203,8 +178,6 @@ function runRace(ctx,bg_ctx){
let foundHorseIndex = null;
console.log(finishLineScan);
for (let i = 0; i < horses.length; i++) {
//horse has finished
if (horses[i].x >= finishLineScan && horses[i].place === null){
@@ -215,15 +188,13 @@ function runRace(ctx,bg_ctx){
}
if(foundHorseIndex != null){
finalPlaces.push(horses[foundHorseIndex]);
horses[foundHorseIndex].place = 1;
horses[foundHorseIndex].place = placeCount ++;
console.log("Horse Finished - " + foundHorseIndex);
}
// horses.splice(foundHorseIndex);
if (finalPlaces.length === 4){
// gameState = "finished";
stopGallop();
// this will actually set the gamestate to finished for every frame, but it shouldnt matter since the gamestate never goes anywhere after finsihed
// give it a bit of time before setting gameState to finished
setTimeout(() => {
gameState = "finished";
}, 2000)
@@ -233,9 +204,13 @@ function runRace(ctx,bg_ctx){
}
function initHorses() {
function initHorses(prevWinner) {
console.log("initHorses");
if (prevWinner){
}
const temp_horse_array = [];
//grab random horses

34
index.html
View File

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

19
resources/horse_array.js Normal file
View File

@@ -0,0 +1,19 @@
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"},
];