diff options
Diffstat (limited to 'src/cosmic-cargo/static/draw.js')
| -rw-r--r-- | src/cosmic-cargo/static/draw.js | 381 |
1 files changed, 381 insertions, 0 deletions
diff --git a/src/cosmic-cargo/static/draw.js b/src/cosmic-cargo/static/draw.js new file mode 100644 index 0000000..abce8d7 --- /dev/null +++ b/src/cosmic-cargo/static/draw.js @@ -0,0 +1,381 @@ +var username = undefined; // for saving score +function draw() { + switch(gameState){ + case "title": + draw_title(); + break; + case "main": + draw_main(); + break; + case "event": + draw_event(); + break; + case "shop": + draw_shop(); + break; + case "status": + draw_status(); + break; + case "event_result": + draw_event_result(); + break; + case "shop_result": + draw_shop_result(); + break; + case "options": + draw_options(); + break; + case "gameover": + draw_gameover(); + break; + case "win": + draw_win(); + break; + case "setup": + draw_setup(); + break; + } +} +function draw_setup(){ + color(3); + ctx.fillRect(0, 0, width, height); + var names = party.reduce( (acc, el) => { + if(acc == ""){ + return el.name + } else { + return `${acc}, ${el.name}` + } + }, "") + let text = `You are a space trucker in the distant year 2019. Your latest mission: transport essential cargo from Octilion to a new colony on Replaris. Without a shipment of goods within the next Earth-year, they won't survive. You assemble your most able crew: ${names}.`; + font(8, text, 3, 7, true); + font(8, ")press any key)", 30, height - 2); +} +function draw_win(){ + color(3); + ctx.fillRect(0, 0, width, height); + // game over text + font(12, "You've arrived!", 3, 12); + font(8, "Score:", 3, 24); + font(8, `${getAliveMembers().length} alive members * 400`, 3, 34); + font(8, `${ship.cargo} tons of cargo * 100`, 3, 44); + font(8, `${Math.floor(ship.credits)} credits`, 3, 54); + font(8, `Took ${ship.current_day} days )${10*(350-ship.current_day)})`, 3, 64); + var total = getAliveMembers().length*400 + ship.cargo*100 + ship.credits + (10*(350-ship.current_day)); + font(8, `Total: ${Math.floor(total)}`, 3, 120); + // set score + if(!submittedScore){ + username = submitScore("cosmic cargo", total, username); + submittedScore = true + } +} +function draw_gameover(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + // game over text + font(12, "Game over!", 3, 12); + let allDead = getAliveMembers().length == 0; + if(allDead){ + font(8, "Your crew all died", 3, 24); + } else { + font(8, "You ran out of fuel", 3, 24); + } + font(8, "Score:", 3, 44); + font(8, `${Math.floor(ship.credits)} credits`, 3, 54); + font(8, `Took ${ship.current_day} days`, 3, 64); + var total = ship.credits + ship.current_day; + font(8, `Total: ${Math.floor(total)}`, 3, 120); + if(!submittedScore){ + username = submitScore("cosmic cargo", total, username); + submittedScore = true + } +} +function draw_stars(w, h){ + color(1); + for(var x = 0; x < w; x++){ + for(var y = 0; y < h; y++){ + let chance = 1; // chance% of drawing a star + if(random_chance(0.01)){ + ctx.fillRect(x, y, 1, 1); + } + } + } +} +function draw_title(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + // stars + draw_stars(width, height); + // title + font(13, "COSMIC CARGO", 5, 20); + font(8, "A space trucking game", 3, 30); + // Only display this if the game is loaded + if(imagesLoaded){ + font(8, ")press any key)", 27, height - 20); + } +} +function draw_main(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + // ship rectangle + draw_stars(width, height/2); + ctx.beginPath(); + ctx.lineWidth = "2"; + ctx.rect(1, height/2, width-2, height/2 -1); + ctx.stroke(); + // ship + if(t % 6 < 3){ + ctx.drawImage(images["ship1"], 20, 28); + } else { + ctx.drawImage(images["ship2"], 20, 28); + } + // map + ctx.drawImage(images["map"], 0, height/2); + // map rectangle + color(1) + // Day and distance notification + font(8, `Day ${ship.current_day}`, 3, 82); + font(8, `${Math.floor(ship.fuel)} Fuel`, 3, 129); + font(8, `${ship.distance} lightyears`, 3, 139); + // map progress + color(0); + ctx.lineWidth = "1"; + // Draw dashed + ctx.setLineDash([2]) + ctx.beginPath(); + ctx.moveTo(9, 104) + ctx.lineTo(43, 92) + ctx.lineTo(76, 112) + ctx.lineTo(98, 81) + ctx.lineTo(147, 103) + ctx.stroke(); + // Draw indicators + ctx.beginPath(); + var coords = line_to_from_progress(.11, 43, 92, 76, 112); + ctx.arc(coords[0], coords[1], 1.5, 0, 2 * Math.PI); + ctx.fill(); + ctx.beginPath(); + coords = line_to_from_progress(.11, 98, 81, 147, 103); + ctx.arc(coords[0], coords[1], 1.5, 0, 2 * Math.PI); + ctx.fill(); + // Planet 1 + ctx.beginPath(); + ctx.arc(9, 104, 1.5, 0, 2 * Math.PI); + ctx.fill(); + // Planet 2 + ctx.beginPath(); + ctx.arc(43, 92, 1.5, 0, 2 * Math.PI); + ctx.fill(); + // Planet 3 + ctx.beginPath(); + ctx.arc(76, 112, 1.5, 0, 2 * Math.PI); + ctx.fill(); + // Planet 4 + ctx.beginPath(); + ctx.arc(98, 81, 1.5, 0, 2 * Math.PI); + ctx.fill(); + // Planet 5 + ctx.beginPath(); + ctx.arc(147, 103, 1.5, 0, 2 * Math.PI); + ctx.fill(); + + // Draw solid on top + let progress = ship.distance / ship.end_distance; + ctx.setLineDash([0]) + ctx.beginPath(); + ctx.moveTo(9, 104) + var shipCoords = [-20, -20]; + if(progress < 0.25){ + shipCoords = line_to_from_progress(progress, 9, 104, 43, 92); + ctx.lineTo(shipCoords[0], shipCoords[1]) + } else { + ctx.lineTo(43, 92) + if (progress < 0.5){ + shipCoords = line_to_from_progress(progress - .25, 43, 92, 76, 112); + ctx.lineTo(shipCoords[0], shipCoords[1]) + } + else { + ctx.lineTo(76, 112) + if(progress < 0.75){ + shipCoords = line_to_from_progress(progress - .5, 76, 112, 98, 81); + ctx.lineTo(shipCoords[0], shipCoords[1]) + } else { + ctx.lineTo(98, 81) + shipCoords = line_to_from_progress(progress - .75, 98, 81, 147, 103); + ctx.lineTo(shipCoords[0], shipCoords[1]) + } + } + } + ctx.stroke(); + draw_ship_indicator(shipCoords); +} +function draw_ship_indicator(coords){ + ctx.beginPath(); + ctx.arc(coords[0], coords[1], 2, 0, 2 * Math.PI); + ctx.fill(); +} +function line_to_from_progress(norm_progress, x1, y1, x2, y2){ + var newX = x1 + (x2-x1)*4*norm_progress + var newY = y1 + (y2-y1)*4*norm_progress + return [newX, newY] +} +function draw_event(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + font(12, `${currentEvent.name}`, 3, 13); + font(8, `${currentEvent.desc}`, 3, 25, true); + let choices = get_choices(currentEvent) + var i = 0; + for(let choice of choices){ + font(8, choice, 10, 100 + 10*i); + if(selectedChoice == i){ + font(8, `~`, 3, 100 + 10*i); + } + i++; + } +} +function draw_options(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + font(12, `Adjust volume`, 5, 13); + + let music_volume = `${audio[music[0]].volume*100}`.replace(/\.\d*/,"") + let sfx_volume = `${audio[sfx[0]].volume*100}`.replace(/\.\d*/,"") + font(8, `MUSIC: ${(music_volume)}`, 10, 22); + if(selectedChoice == 0){ + font(8, `~`, 4, 22); + } + font(8, `SFX: ${sfx_volume}`, 10, 32); + if(selectedChoice == 1){ + font(8, `~`, 4, 32); + } +} +function draw_status(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + // person list + var i = 0; + for(let person of party){ + var c = 2 + if(person.status == "Dead" || person.status == "Missing"){ + c = 0 + } + font(8, person.name, 3, 7 + 12*i, false, c); + font(8, person.status, 100, 7 + 12*i, false, c); + i++; + } + + font(8, `Cargo: ${ship.cargo} tons`, 3, 106); + font(8, `Credits: ${ship.credits}`, 3, 118); + font(8, `Fuel: ${Math.floor(ship.fuel)}`, 3, 130); + font(8, `Day ${ship.current_day}`, 3, 142); + font(8, `${ship.distance} of ${ship.end_distance}`, 75, 142); +} +function draw_shop(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + font(12, "Shop", 3, 13); + font(8, `Welcome to ${currentShop.name}! Enjoy your stay!`, 3, 25, true); + let choices = shop_choices(currentShop); + var i = 0; + for(let choice of choices){ + font(8, choice, 10, 100 + 10*i); + if(selectedChoice == i){ + font(8, `~`, 4, 100 + 10*i); + } + i++; + } +} +function draw_event_result(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + font(8, `${eventResult}`, 3, 11, true); + font(8, ")press any key)", 26, height - 8); +} +function draw_shop_result(){ + // background + color(3); + ctx.fillRect(0, 0, width, height); + font(8, `${shopResult}`, 3, 11, true); + font(8, ")press any key)", 26, height - 8); +} + +function split_into_parts(what, size){ + var parts = []; + var line = ""; + for(var word of what.split(" ")){ + if(line.length + word.length > size){ + parts.push(line.trim()); + line = ""; + } + line += " " + word; + } + if(line){ + parts.push(line); + } + return parts; +} +function font(size, what, x, y, wrap = false, c = 2) { + ctx.font = size + "px Gameboy"; + color(c); + if(wrap){ + // Match up to 22 characters, making sure to not end a line mid word + //var parts = what.match(/.{1,21}[\b\.'\?\)]/g); + var parts = split_into_parts(what, 21); + parts.forEach((element, i) => { + ctx.fillText(element.trim(), x, y + i*size); + }); + } else { + ctx.fillText(what, x, y); + } +} +function color(c) { + var color = ""; + switch (c){ + case 0: + color = "#FA0000"; + break; + case 1: + color = "#b4b4b4"; + break; + case 2: + color = "#fafafa"; + break; + case 3: + color = "#000000"; + break; + } + ctx.fillStyle = color; + ctx.strokeStyle = color; +} +function loadImages(imagefiles) { + loadcount = 0; + loadtotal = imagefiles.length; + imagesLoaded = false; + + // Load the images + var loadedimages = []; + for (var i=0; i<imagefiles.length; i++) { + // Create the image object + var image = new Image(); + + // Add onload event handler + image.onload = function () { + loadcount++; + if (loadcount == loadtotal) { + // Done loading + imagesLoaded = true; + } + }; + image.src = imagefiles[i]; + loadedimages[i] = image; + } + return loadedimages; +}
\ No newline at end of file |