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

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

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

6
.idea/vcs.xml generated Normal file
View File

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

109
.idea/workspace.xml generated
View File

@@ -2,26 +2,9 @@
<project version="4"> <project version="4">
<component name="ChangeListManager"> <component name="ChangeListManager">
<list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment=""> <list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
<change afterPath="$PROJECT_DIR$/.idea/HorseRaceGame.iml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/background.js" beforeDir="false" afterPath="$PROJECT_DIR$/background.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/modules.xml" afterDir="false" /> <change beforePath="$PROJECT_DIR$/game.js" beforeDir="false" afterPath="$PROJECT_DIR$/game.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/background.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/game.js" afterDir="false" />
<change afterPath="$PROJECT_DIR$/index.html" afterDir="false" />
<change afterPath="$PROJECT_DIR$/main.css" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/final/CrotchRocket_93_raw.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/final/DEMON_HORZE_666.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/BlackJack_10.xcf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/CrotchRocket_93_raw.xcf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/DEMON_HORZE_666.xcf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/gimp_file/stonewall_000_raw.xcf" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/BlackJack_10.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/CrotchRocket_93_raw.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/DEMON_HORZE_666.png" afterDir="false" />
<change afterPath="$PROJECT_DIR$/resources/horse_images/uncropped/stonewall_000_raw.jpg" afterDir="false" />
</list> </list>
<ignored path="$PROJECT_DIR$/.tmp/" /> <ignored path="$PROJECT_DIR$/.tmp/" />
<ignored path="$PROJECT_DIR$/temp/" /> <ignored path="$PROJECT_DIR$/temp/" />
@@ -53,11 +36,11 @@
</provider> </provider>
</entry> </entry>
</file> </file>
<file leaf-file-name="game.js" pinned="false" current-in-tab="false"> <file leaf-file-name="game.js" pinned="false" current-in-tab="true">
<entry file="file://$PROJECT_DIR$/game.js"> <entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1218"> <state relative-caret-position="350">
<caret line="36" column="70" selection-start-line="36" selection-start-column="70" selection-end-line="36" selection-end-column="70" /> <caret line="117" column="46" selection-start-line="117" selection-start-column="46" selection-end-line="117" selection-end-column="46" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -72,7 +55,7 @@
<provider selected="true" editor-type-id="images" /> <provider selected="true" editor-type-id="images" />
</entry> </entry>
</file> </file>
<file leaf-file-name="stonewall_000.png" pinned="false" current-in-tab="true"> <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"> <entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
<provider selected="true" editor-type-id="images" /> <provider selected="true" editor-type-id="images" />
</entry> </entry>
@@ -85,8 +68,8 @@
<file leaf-file-name="background.js" pinned="false" current-in-tab="false"> <file leaf-file-name="background.js" pinned="false" current-in-tab="false">
<entry file="file://$PROJECT_DIR$/background.js"> <entry file="file://$PROJECT_DIR$/background.js">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="333"> <state relative-caret-position="364">
<caret line="70" column="19" selection-start-line="70" selection-start-column="19" selection-end-line="70" selection-end-column="19" /> <caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
</state> </state>
</provider> </provider>
</entry> </entry>
@@ -104,7 +87,16 @@
<findStrings> <findStrings>
<find>scree</find> <find>scree</find>
<find>console.log</find> <find>console.log</find>
<find>gameloo</find>
<find>drawcoun</find>
<find>screensizead</find>
<find>drawrace</find>
<find>remainingdistance</find>
<find>dra</find>
</findStrings> </findStrings>
<replaceStrings>
<replace>cyclesRemaining</replace>
</replaceStrings>
</component> </component>
<component name="Git.Settings"> <component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" /> <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -130,7 +122,6 @@
<packageJsonPaths /> <packageJsonPaths />
</component> </component>
<component name="ProjectFrameBounds" extendedState="6"> <component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-1366" />
<option name="y" value="-771" /> <option name="y" value="-771" />
<option name="width" value="1366" /> <option name="width" value="1366" />
<option name="height" value="771" /> <option name="height" value="771" />
@@ -153,19 +144,6 @@
<item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" /> <item name="HorseRaceGame" type="462c0819:PsiDirectoryNode" />
<item name="resources" type="462c0819:PsiDirectoryNode" /> <item name="resources" type="462c0819:PsiDirectoryNode" />
</path> </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> </expand>
<select /> <select />
</subPane> </subPane>
@@ -214,24 +192,25 @@
<option name="number" value="Default" /> <option name="number" value="Default" />
<option name="presentableId" value="Default" /> <option name="presentableId" value="Default" />
<updated>1562211281380</updated> <updated>1562211281380</updated>
<workItem from="1562211282530" duration="17564000" /> <workItem from="1562211282530" duration="29769000" />
</task> </task>
<servers /> <servers />
</component> </component>
<component name="TimeTrackingManager"> <component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17564000" /> <option name="totallyTimeSpent" value="29769000" />
</component> </component>
<component name="ToolWindowManager"> <component name="ToolWindowManager">
<frame x="0" y="-771" width="1366" height="771" extended-state="6" /> <frame x="0" y="-771" width="1366" height="771" extended-state="6" />
<editor active="true" />
<layout> <layout>
<window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.2108389" /> <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="TODO" order="6" />
<window_info anchor="bottom" id="Docker" show_stripe_button="false" /> <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="Event Log" side_tool="true" />
<window_info anchor="bottom" id="Run" order="2" /> <window_info anchor="bottom" id="Run" order="2" />
<window_info anchor="bottom" id="Version Control" /> <window_info anchor="bottom" id="Version Control" />
<window_info id="Structure" order="1" side_tool="true" weight="0.25" /> <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
<window_info active="true" anchor="bottom" id="Terminal" visible="true" weight="0.32882884" /> <window_info anchor="bottom" id="Terminal" visible="true" weight="0.32882884" />
<window_info anchor="bottom" id="Debug" order="3" weight="0.4" /> <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
<window_info id="Favorites" side_tool="true" /> <window_info id="Favorites" side_tool="true" />
<window_info anchor="bottom" id="Find" order="1" /> <window_info anchor="bottom" id="Find" order="1" />
@@ -255,13 +234,6 @@
</breakpoint-manager> </breakpoint-manager>
</component> </component>
<component name="editorHistoryManager"> <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"> <entry file="file://$PROJECT_DIR$/main.css">
<provider selected="true" editor-type-id="text-editor"> <provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="277"> <state relative-caret-position="277">
@@ -269,20 +241,6 @@
</state> </state>
</provider> </provider>
</entry> </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$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="-1218">
<caret line="36" column="70" selection-start-line="36" selection-start-column="70" selection-end-line="36" selection-end-column="70" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png"> <entry file="file://$PROJECT_DIR$/resources/horse_images/final/BlackJack_10.png">
<provider selected="true" editor-type-id="images" /> <provider selected="true" editor-type-id="images" />
</entry> </entry>
@@ -295,5 +253,26 @@
<entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png"> <entry file="file://$PROJECT_DIR$/resources/horse_images/final/stonewall_000.png">
<provider selected="true" editor-type-id="images" /> <provider selected="true" editor-type-id="images" />
</entry> </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$/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="364">
<caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
</state>
</provider>
</entry>
<entry file="file://$PROJECT_DIR$/game.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="350">
<caret line="117" column="46" selection-start-line="117" selection-start-column="46" selection-end-line="117" selection-end-column="46" />
</state>
</provider>
</entry>
</component> </component>
</project> </project>

65
background.js
View File

@@ -1,9 +1,11 @@
const fencePostGap = 200; const fencePostGap = 200;
let fenceOffset = fencePostGap; let fenceOffset = fencePostGap;
let finishLinePosition = -1000;
const finishLineSpeed = 7;
let finishLineDrawn = false;
function drawRaceBackground(ctx, width, height, horseSize, cyclesRemaining, isMoving){
function drawRaceBackground(ctx, width, height, horseSize){
// Create gradient // Create gradient
const grd = ctx.createRadialGradient( width /2, height/2, 0.000, width/2, height/2, width/2); const grd = ctx.createRadialGradient( width /2, height/2, 0.000, width/2, height/2, width/2);
@@ -16,20 +18,34 @@ function drawRaceBackground(ctx, width, height, horseSize){
ctx.fillStyle = grd; ctx.fillStyle = grd;
ctx.fillRect(0, 0, width, height); ctx.fillRect(0, 0, width, height);
// Draw Track
ctx.fillStyle = '#CD853F'; ctx.fillStyle = '#CD853F';
ctx.fillRect(0, height - (2 * horseSize) , width, height); ctx.fillRect(0, height - (2 * horseSize) , width, height);
// Draw Distance left, or draw finishline
if (isMoving) {
if (cyclesRemaining > 0) {
drawRemainingDistance(ctx, width, horseSize, cyclesRemaining);
}
else {
if (!finishLineDrawn) {
finishLineDrawn = true;
finishLinePosition = width;
}
drawFinishLine(ctx, horseSize, height);
finishLinePosition -= finishLineSpeed;
}
}
// Draw grass
ctx.fillStyle = '#32CD32'; ctx.fillStyle = '#32CD32';
ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2); ctx.fillRect(0, height - (2.4 * horseSize) , width, horseSize/2);
const fenceline = ( height - (2 * horseSize)); drawGuides(ctx, width, height, horseSize);
drawFence(ctx, width, ( height - (2 * horseSize)) , horseSize, isMoving);
drawGuides(ctx, width, height, horseSize, fenceline);
drawFence(ctx, width, fenceline, horseSize );
} }
function drawGuides(ctx, width, height, horseSize, fenceline){ function drawGuides(ctx, width, height, horseSize){
ctx.fillStyle = "#000000"; ctx.fillStyle = "#000000";
ctx.beginPath(); ctx.beginPath();
@@ -49,7 +65,7 @@ function drawGuides(ctx, width, height, horseSize, fenceline){
} }
function drawFence(ctx, width, fenceline, horseSize) { function drawFence(ctx, width, fenceline, horseSize, isMoving) {
ctx.fillStyle = '#322e1b'; ctx.fillStyle = '#322e1b';
@@ -68,6 +84,35 @@ function drawFence(ctx, width, fenceline, horseSize) {
ctx.lineTo(width, postTop); ctx.lineTo(width, postTop);
ctx.stroke(); ctx.stroke();
if(isMoving){
fenceOffset -=5; fenceOffset -=5;
}
if (fenceOffset < 0) { fenceOffset = fencePostGap}; 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){
console.log("draw countdown");
drawRaceBackground(ctx,width,height,horseSize, 0, false);
ctx.fillStyle = "#000000";
ctx.font = "120px Arial";
ctx.fillText(seconds, (width / 2) - 50, (horseSize ));
}
function drawFinishLine(ctx, horseSize, height){
ctx.fillStyle = '#FFFFFF';
ctx.fillRect(finishLinePosition, height - (2 * horseSize) , 8 , height);
}

144
game.js
View File

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