added horses running around and stuff

.idea/HorseRaceGame.iml

@@ -0,0 +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>
+</module>

.idea/misc.xml

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

.idea/modules.xml

@@ -0,0 +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>
+</project>

.idea/workspace.xml

@@ -0,0 +1,248 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="" />
+    <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="FileEditorManager">
+    <leaf>
+      <file leaf-file-name="index.html" 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="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>
+      </file>
+      <file leaf-file-name="main.css" pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/main.css">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="277">
+              <caret line="20" column="15" selection-start-line="20" selection-start-column="15" selection-end-line="20" selection-end-column="15" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="game.js" 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="210">
+              <caret line="18" column="52" selection-start-line="18" selection-start-column="52" selection-end-line="18" selection-end-column="52" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file leaf-file-name="background.js" 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="333">
+              <caret line="70" column="19" selection-start-line="70" selection-start-column="19" selection-end-line="70" selection-end-column="19" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="FileTemplateManagerImpl">
+    <option name="RECENT_TEMPLATES">
+      <list>
+        <option value="JavaScript File" />
+      </list>
+    </option>
+  </component>
+  <component name="FindInProjectRecents">
+    <findStrings>
+      <find>scree</find>
+      <find>console.log</find>
+    </findStrings>
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/resources/background.js" />
+        <option value="$PROJECT_DIR$/index.html" />
+        <option value="$PROJECT_DIR$/main.css" />
+        <option value="$PROJECT_DIR$/background.js" />
+        <option value="$PROJECT_DIR$/game.js" />
+      </list>
+    </option>
+  </component>
+  <component name="JsBuildToolGruntFileManager" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsBuildToolPackageJson" detection-done="true" sorting="DEFINITION_ORDER" />
+  <component name="JsGulpfileManager">
+    <detection-done>true</detection-done>
+    <sorting>DEFINITION_ORDER</sorting>
+  </component>
+  <component name="NodePackageJsonFileManager">
+    <packageJsonPaths />
+  </component>
+  <component name="ProjectFrameBounds" extendedState="6">
+    <option name="y" value="-3" />
+    <option name="width" value="1366" />
+    <option name="height" value="771" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
+              <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
+            </path>
+            <path>
+              <item name="HorseRaceGame" type="b2602c69:ProjectViewProjectNode" />
+              <item name="HorseRaceGame" 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>
+      </pane>
+      <pane id="Scope" />
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="WebServerToolWindowFactoryState" value="false" />
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="nodejs_interpreter_path.stuck_in_default_project" value="undefined stuck path" />
+    <property name="nodejs_npm_path_reset_for_default_project" value="true" />
+  </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+    </key>
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </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" />
+    <recent_temporary>
+      <list>
+        <item itemvalue="JavaScript Debug.index.html" />
+      </list>
+    </recent_temporary>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="" />
+      <created>1562211281380</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1562211281380</updated>
+      <workItem from="1562211282530" duration="16638000" />
+    </task>
+    <servers />
+  </component>
+  <component name="TimeTrackingManager">
+    <option name="totallyTimeSpent" value="16638000" />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="-1366" y="-771" width="1366" height="771" extended-state="6" />
+    <editor active="true" />
+    <layout>
+      <window_info active="true" content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="bottom" id="Docker" show_stripe_button="false" />
+      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Version Control" show_stripe_button="false" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="bottom" id="Terminal" visible="true" weight="0.32882884" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info id="Favorites" side_tool="true" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <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="Inspection" order="5" weight="0.4" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+    </layout>
+  </component>
+  <component name="TypeScriptGeneratedFilesManager">
+    <option name="version" value="1" />
+  </component>
+  <component name="VcsContentAnnotationSettings">
+    <option name="myLimit" value="2678400000" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <option name="time" value="1" />
+    </breakpoint-manager>
+  </component>
+  <component name="editorHistoryManager">
+    <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="277">
+          <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$/background.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="333">
+          <caret line="70" column="19" selection-start-line="70" selection-start-column="19" selection-end-line="70" selection-end-column="19" />
+        </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/BlackJack_10.png">
+      <provider selected="true" editor-type-id="images" />
+    </entry>
+    <entry file="file://$PROJECT_DIR$/game.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="210">
+          <caret line="18" column="52" selection-start-line="18" selection-start-column="52" selection-end-line="18" selection-end-column="52" />
+        </state>
+      </provider>
+    </entry>
+  </component>
+</project>

background.js

@@ -0,0 +1,73 @@
+
+const fencePostGap = 200;
+let fenceOffset = fencePostGap;
+
+
+function drawRaceBackground(ctx, width, height, horseSize){
+
+    // 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);
+
+
+    ctx.fillStyle = '#CD853F';
+    ctx.fillRect(0, height - (2 * horseSize) , width, height);
+    ctx.fillStyle = '#32CD32';
+    ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2);
+
+    const fenceline = ( height - (2 * horseSize));
+
+    drawGuides(ctx, width, height, horseSize, fenceline);
+    drawFence(ctx, width, fenceline, horseSize );
+
+}
+
+function drawGuides(ctx, width, height, horseSize, fenceline){
+
+    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) {
+
+    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();
+
+    fenceOffset -=5;
+    if (fenceOffset < 0) { fenceOffset = fencePostGap};
+}

game.js

@@ -0,0 +1,148 @@
+/**
+ * Created by tomdt on 6/23/2017.
+ */
+
+
+
+
+const spriteWidth = 20;
+const spriteHeight = 20;
+
+const yMoveLimit = 400;
+
+let framecount = 0;
+
+const horse_image_array = [
+    "./resources/horse_images/final/stonewall_000.png",
+    "./resources/horse_images/final/DEMON_HORZE_666.png",
+    "./resources/horse_images/final/CrotchRocket_93_raw.png",
+    "./resources/horse_images/final/BlackJack_10.png"
+];
+
+
+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");
+
+// 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
+const gameState = "running";  // this should probably be an enum later
+
+const horses = [];
+
+
+//Start game loop
+window.onload = ( ) => {
+     //  initBackground();
+
+
+    initHorses();
+
+    setInterval(gameLoop, 20); //  a touch <60 FPS
+
+};
+
+function gameLoop(){
+    screenSizeAdjust();
+
+    //
+    switch(gameState){
+        case "running":
+            runRace(CTX,BG_CTX);
+            break;
+        default:
+            break;
+    }
+}
+
+function runRace(ctx,bg_ctx){
+    framecount ++;
+
+    //handle race background
+    drawRaceBackground(bg_ctx, WIDTH, HEIGHT, horseHeight);
+
+
+    const x = WIDTH / 2;
+    const y = HEIGHT / 2;
+
+    const lane_1_height = HEIGHT - (horseHeight * 1.25);
+    const horse_1_sway = Math.sin(framecount) * 10;
+    const horse_1_X_sway = Math.cos(framecount/3) * 10;
+
+    const lane_2_height = HEIGHT - (horseHeight * 1.75);
+    const horse_2_sway = Math.cos(framecount) * 10;
+    const horse_2_X_sway = Math.sin(framecount/3) * 10;
+
+    const lane_3_height = HEIGHT - (horseHeight * 2.25);
+    const horse_3_sway = Math.sin(framecount/2) * 10;
+    const horse_3_X_sway = Math.cos(framecount/4) * 10;
+
+    const lane_4_height = HEIGHT - (horseHeight * 2.75);
+    const horse_4_sway = Math.cos(framecount/2) * 10;
+    const horse_4_X_sway = Math.sin(framecount/4) * 10;
+
+    if (horses.length > 3){
+     //   console.log("Horse 0 at x: "+ x + "  y: "+ y);
+        ctx.drawImage(horses[3].image, horse_4_X_sway , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
+        ctx.drawImage(horses[2].image, horse_3_X_sway , (lane_3_height + horse_3_sway) , horseWidth, horseHeight);
+        ctx.drawImage(horses[1].image, horse_2_X_sway , (lane_2_height + horse_2_sway) , horseWidth, horseHeight);
+        ctx.drawImage(horses[0].image, horse_1_X_sway , (lane_1_height + horse_1_sway) , horseWidth, horseHeight);
+    }
+}
+
+
+function initHorses() {
+    console.log("initHorses");
+    for (let i =0; i < 4; i ++ ){
+        const horse_image = new Image();
+        horse_image.src = horse_image_array[i]; // todo - change to grab random horse image
+        horse_image.onload = function() {
+            const horse = {
+                image: horse_image
+                // todo - Draw the rest of the fucking owl
+            }
+            horses.push(horse);
+            console.log("horseImagePushed");
+            console.log(horses[0]);
+        }
+    }
+
+}
+
+
+function screenSizeAdjust(){
+    HEIGHT = GAME_CANVAS.height = BG_CANVAS.height = window.innerHeight;
+    WIDTH = GAME_CANVAS.width = BG_CANVAS.width = window.innerWidth;
+
+    horseWidth = horseHeight = WIDTH / 8;
+}
+
+
+
+function drawPlayer(ctx){
+    let xStart = xPosition;
+    let yStart = yPosition + spriteHeight;
+    ctx.fillStyle = "red";
+    ctx.beginPath();
+    ctx.moveTo(xStart,yStart); // bottom left corner
+    ctx.lineTo(xStart + (spriteWidth/2), yPosition);
+    ctx.lineTo(xStart + spriteWidth, yStart);
+    ctx.lineTo(xStart +(spriteWidth/2), yPosition +(spriteHeight/2));
+    ctx.lineTo(xStart,yStart);
+    ctx.fill();
+
+}
+

index.html

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

main.css

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