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">
<component name="ChangeListManager">
<list default="true" id="d9dac41b-fc54-4ab0-93ea-73586523c969" name="Default" comment="">
<change afterPath="$PROJECT_DIR$/.idea/HorseRaceGame.iml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/misc.xml" afterDir="false" />
<change afterPath="$PROJECT_DIR$/.idea/modules.xml" 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" />
<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/" />
<ignored path="$PROJECT_DIR$/temp/" />
@@ -53,11 +36,11 @@
</provider>
</entry>
</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">
<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 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>
@@ -72,7 +55,7 @@
<provider selected="true" editor-type-id="images" />
</entry>
</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">
<provider selected="true" editor-type-id="images" />
</entry>
@@ -85,8 +68,8 @@
<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 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>
@@ -104,7 +87,16 @@
<findStrings>
<find>scree</find>
<find>console.log</find>
<find>gameloo</find>
<find>drawcoun</find>
<find>screensizead</find>
<find>drawrace</find>
<find>remainingdistance</find>
<find>dra</find>
</findStrings>
<replaceStrings>
<replace>cyclesRemaining</replace>
</replaceStrings>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
@@ -130,7 +122,6 @@
<packageJsonPaths />
</component>
<component name="ProjectFrameBounds" extendedState="6">
<option name="x" value="-1366" />
<option name="y" value="-771" />
<option name="width" value="1366" />
<option name="height" value="771" />
@@ -153,19 +144,6 @@
<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>
@@ -214,24 +192,25 @@
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1562211281380</updated>
<workItem from="1562211282530" duration="17564000" />
<workItem from="1562211282530" duration="29769000" />
</task>
<servers />
</component>
<component name="TimeTrackingManager">
<option name="totallyTimeSpent" value="17564000" />
<option name="totallyTimeSpent" value="29769000" />
</component>
<component name="ToolWindowManager">
<frame x="0" y="-771" width="1366" height="771" extended-state="6" />
<editor active="true" />
<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="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" />
<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 id="Favorites" side_tool="true" />
<window_info anchor="bottom" id="Find" order="1" />
@@ -255,13 +234,6 @@
</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">
@@ -269,20 +241,6 @@
</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$/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">
<provider selected="true" editor-type-id="images" />
</entry>
@@ -295,5 +253,26 @@
<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$/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>
</project>

67
background.js
View File

@@ -1,9 +1,11 @@
const fencePostGap = 200;
let fenceOffset = fencePostGap;
let finishLinePosition = -1000;
const finishLineSpeed = 7;
let finishLineDrawn = false;
function drawRaceBackground(ctx, width, height, horseSize){
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);
@@ -16,20 +18,34 @@ function drawRaceBackground(ctx, width, height, horseSize){
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) {
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.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 );
drawGuides(ctx, width, height, horseSize);
drawFence(ctx, width, ( height - (2 * horseSize)) , horseSize, isMoving);
}
function drawGuides(ctx, width, height, horseSize, fenceline){
function drawGuides(ctx, width, height, horseSize){
ctx.fillStyle = "#000000";
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';
@@ -68,6 +84,35 @@ function drawFence(ctx, width, fenceline, horseSize) {
ctx.lineTo(width, postTop);
ctx.stroke();
fenceOffset -=5;
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){
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);
}

150
game.js
View File

@@ -2,16 +2,9 @@
* 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 = [
"./resources/horse_images/final/stonewall_000.png",
"./resources/horse_images/final/DEMON_HORZE_666.png",
@@ -34,8 +27,11 @@ let horseWidth = WIDTH / 8;
let horseHeight = WIDTH / 8;
// 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 finalPlaces = [];
let finishLineScan = 0;
//Start game loop
@@ -45,16 +41,32 @@ window.onload = ( ) => {
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
};
function gameLoop(){
screenSizeAdjust();
//
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":
screenReset();
runRace(CTX,BG_CTX);
break;
case "finishing":
screenReset();
runRace(CTX,BG_CTX);
break;
default:
@@ -63,39 +75,77 @@ function gameLoop(){
}
function runRace(ctx,bg_ctx){
framecount ++;
cyclesRemaining --;
//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 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 horse_1_sway = Math.sin(framecount) * 10;
const horse_1_X_sway = Math.cos(framecount/3) * 10;
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(framecount) * 10;
const horse_2_X_sway = Math.sin(framecount/3) * 10;
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(framecount/2) * 10;
const horse_3_X_sway = Math.cos(framecount/4) * 10;
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(framecount/2) * 10;
const horse_4_X_sway = Math.sin(framecount/4) * 10;
const horse_4_sway = Math.cos(cyclesRemaining/2) * 10;
const horse_4_X_sway = Math.sin(cyclesRemaining/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);
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);
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.onload = function() {
const horse = {
image: horse_image
image: horse_image,
x:0,
y:0,
place: null
// todo - other horse things.
}
};
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 screenReset(){
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();
function startCountdown(seconds, bg_ctx){
if (gameState === "countdownStart" ) {
gameState = "countdownRunning";
}
console.log ("Coundown: " + seconds);
if (seconds > 0) {
screenReset();
drawCountdown(bg_ctx, WIDTH, HEIGHT, horseHeight, seconds);
setTimeout (()=>{startCountdown( seconds - 1, bg_ctx)}, 1000);
}
else {
gameState = "running";
}
}