145 lines
3.9 KiB
JavaScript
145 lines
3.9 KiB
JavaScript
/**
|
|
* 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);
|
|
//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 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
|
|
horse_image.onload = function() {
|
|
const horse = {
|
|
image: horse_image
|
|
// 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 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();
|
|
|
|
}
|
|
|