added randomization to X axis movement

This commit is contained in:
2019-07-08 00:28:32 -05:00
parent 95c959a1d0
commit baf2a621e1
2 changed files with 79 additions and 20 deletions

18
.idea/workspace.xml generated
View File

@@ -3,7 +3,6 @@
<component name="ChangeListManager">
<list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" 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" />
</list>
<ignored path="$PROJECT_DIR$/.tmp/" />
@@ -39,8 +38,8 @@
<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="350">
<caret line="117" column="46" selection-start-line="117" selection-start-column="46" selection-end-line="117" selection-end-column="46" />
<state relative-caret-position="336">
<caret line="231" column="42" selection-start-line="231" selection-start-column="42" selection-end-line="231" selection-end-column="42" />
</state>
</provider>
</entry>
@@ -68,7 +67,7 @@
<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="364">
<state relative-caret-position="154">
<caret line="26" column="31" selection-start-line="26" selection-start-column="31" selection-end-line="26" selection-end-column="31" />
</state>
</provider>
@@ -93,6 +92,7 @@
<find>drawrace</find>
<find>remainingdistance</find>
<find>dra</find>
<find>horses</find>
</findStrings>
<replaceStrings>
<replace>cyclesRemaining</replace>
@@ -192,12 +192,12 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1562211281380</updated>
<workItem from="1562211282530" duration="29769000" />
<workItem from="1562211282530" duration="33713000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="29769000" />
<option name="totallyTimeSpent" value="33713000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="-771" width="1366" height="771" extended-state="6" />
@@ -262,15 +262,15 @@
</entry>
<entry file="file://$PROJECT_DIR$/background.js">
<provider selected="true" editor-type-id="text-editor">
<state relative-caret-position="364">
<state relative-caret-position="154">
<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 relative-caret-position="336">
<caret line="231" column="42" selection-start-line="231" selection-start-column="42" selection-end-line="231" selection-end-column="42" />
</state>
</provider>
</entry>

79
game.js
View File

@@ -90,26 +90,28 @@ function runRace(ctx,bg_ctx){
//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 horse_1_sway = Math.sin(cyclesRemaining) * 10;
const horse_1_X_sway = Math.cos(cyclesRemaining/3) * 10;
const lane_2_height = HEIGHT - (horseHeight * 1.75);
const horse_2_sway = Math.cos(cyclesRemaining) * 10;
const horse_2_X_sway = Math.sin(cyclesRemaining/3) * 10;
const lane_3_height = HEIGHT - (horseHeight * 2.25);
const horse_3_sway = Math.sin(cyclesRemaining/2) * 10;
const horse_3_X_sway = Math.cos(cyclesRemaining/4) * 10;
const lane_4_height = HEIGHT - (horseHeight * 2.75);
const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
const horse_4_X_sway = Math.sin(cyclesRemaining/4) * 10;
horses[3].x = horse_4_X_sway;
horses[2].x = horse_3_X_sway;
horses[1].x = horse_2_X_sway;
horses[0].x = horse_1_X_sway;
updateHorsePositions();
// horses[3].x = horse_4_X_sway;
// horses[2].x = horse_3_X_sway;
// horses[1].x = horse_2_X_sway;
// horses[0].x = horse_1_X_sway;
//
// draw horses
ctx.drawImage(horses[3].image, horses[3].x , (lane_4_height + horse_4_sway) , horseWidth, horseHeight);
@@ -160,8 +162,15 @@ function initHorses() {
image: horse_image,
x:0,
y:0,
place: null
// todo - other horse things.
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);
}
@@ -190,3 +199,53 @@ function startCountdown(seconds, bg_ctx){
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;
}
}
}
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}}
];