WORK IN PROGRESS, PLEASE STAY TUNED AND HAPPY CODING!
This is a submission for the Web Game Challenge, Build a Game: Alien Edition
BuzzBeeAlienInvasion for the 9/24 Alien browser game challenge
What I Built
So far the idea is an alien invasion of bee - like creatures, who arrive here in this land in their wooden spaceship and fancy helmets, try eating all the land's flowers, you have a hand held bee smoker as a deterrant, see how long you can hold off the ever increasing bee creatures,
What happens to the alien bees when you smoke them out? the smoke acts as a wormhole and sends the bee back to it's home planet, Magnatoria, which orbits a Magnetar class star, the physics involved is mindblowing, but it is a part of their alien world's natural physics to shuffle around using them.
Demo
And the game code, which I will update upon working states as I dev :)
Version 0.0.5
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Title</title>
<style>
body {
background-color: black;
color: wheat;
}
#canvass {
position: absolute;
border: 1px solid lime;
left: 10px;
top: 10px;
width: 1026px;
height: 1026px;
}
</style>
</head>
<body>
<canvas id="canvass"></canvas>
<script>
//2nd/3rd letter:w=width,s=speed,h=height,d=direction,a=animationframe
//1st letter:b=background,c=player,e=enemy,s=ship,h=beeHole,w=weapon.
var bw = 1024,
bh = 1024,
bx = 0,
by = 0,
cw = 70,
ch = 120,
cd = 0,
ca = 0,
cam = 3,
cr = 0.25,
cx = 20,
cy = 20,
cxs = 0,
cys = 0,
cms = 4,
ew = 64,
eh = 64,
ed = 0,
ea = 0,
eam = 3,
er = 0.5,
ex = 100,
ey = 20,
exs = 0,
eys = 0,
ems = 4,
hw = 64,
hh = 64,
hd = 0,
ha = 0,
ham = 0,
hr = 0.25,
hx = 0,
hy = 0,
hxs = 0,
hys = 0,
hms = 8,
sw = 64,
sh = 64,
sd = 0,
sa = 0,
sam = 0,
sr = 0.25,
sx = 0,
sy = 0,
sxs = 0,
sys = 0,
sms = 2,
ww = 46,
wh = 46,
wd = 0,
wa = 0,
wam = 3,
wr = 0.25,
wx = 0,
wy = 0,
wxs = 0,
wys = 0,
wms = 8,
enemyState = 0,
playerState = 0,
maxSpeed = 4,
maxFrame = 3,
frameTimer = 0,
frameInterval = 100,
lastTime = 0,
stage = 0;
var time = 0,
gameOver = false,
stopwatch = 60000;
var keys = [];
var inputHandler;
const bpic = new Map().set(0, ["./bkg_0.png", "./bkg_1.png"]);
const cpic = new Map()
.set(0, ["./cha_000.png", "./cha_001.png", "./cha_002.png", "./cha_003.png"])
.set(1, ["./cha_010.png", "./cha_011.png", "./cha_012.png", "./cha_013.png"])
.set(2, ["./cha_020.png", "./cha_021.png", "./cha_022.png", "./cha_023.png"])
.set(3, ["./cha_030.png", "./cha_031.png", "./cha_032.png", "./cha_033.png"]);
const epic = new Map()
.set(0, ["./bee_000.png", "./bee_001.png", "./bee_002.png", "./bee_003.png"])
.set(1, ["./bee_010.png", "./bee_011.png", "./bee_012.png", "./bee_013.png"])
.set(2, ["./bee_020.png", "./bee_021.png", "./bee_022.png", "./bee_023.png"])
.set(3, ["./bee_030.png", "./bee_031.png", "./bee_032.png", "./bee_033.png"])
.set(4, ["./bee_100.png", "./bee_101.png", "./bee_102.png", "./bee_103.png"])
.set(5, ["./bee_110.png", "./bee_111.png", "./bee_112.png", "./bee_113.png"])
.set(6, ["./bee_120.png", "./bee_121.png", "./bee_122.png", "./bee_123.png"])
.set(7, ["./bee_130.png", "./bee_131.png", "./bee_132.png", "./bee_133.png"]);
const wpic = new Map().set(0, ["./gun_0.png", "./gun_1.png", "./gun_2.png", "./gun_3.png"]);
const lpic = new Map().set(0, ["./whiteLight_0.png", "./whiteLight_1.png", "./whiteLight_2.png"]);
const rlpic = new Map().set(0, ["./redLight_2.png", "./redLight_1.png", "./redLight_0.png"]);
const canvas = document.getElementById("canvass");
const ctx = canvas.getContext("2d");
const bimg = new Image();
const eimg = new Image();
const cimg = new Image();
document.addEventListener("DOMContentLoaded", (event) => {
inputHandler = new InputHandler();
bimg.onload = function () {
eimg.onload = function () {
cimg.onload = function () {
draw(ctx);
};
cimg.src = cpic.get(cd)[ca];
};
eimg.src = epic.get(ed)[ea];
};
bimg.src = bpic.get(0)[stage];
animate(0);
});
class InputHandler {
constructor(game) {
this.game = game;
this.keys = [];
window.addEventListener("keydown", (e) => {
if (
(e.key === "e" ||
e.key === "ArrowDown" ||
e.key === "ArrowUp" ||
e.key === "ArrowLeft" ||
e.key === "ArrowRight" ||
e.key === "s" ||
e.key === "w" ||
e.key === "a" ||
e.key === "d") &&
this.keys.indexOf(e.key) === -1
) {
this.keys.push(e.key);
}
});
window.addEventListener("keyup", (e) => {
if (
e.key === "e" ||
e.key === "ArrowDown" ||
e.key === "ArrowUp" ||
e.key === "ArrowLeft" ||
e.key === "ArrowRight" ||
e.key === "s" ||
e.key === "w" ||
e.key === "a" ||
e.key === "d"
) {
this.keys.splice(this.keys.indexOf(e.key), 1);
}
});
}
}
function draw(context) {
let bp = bpic.get(0)[stage];
let ep = epic.get(ed)[ea];
let cp = cpic.get(cd)[ca];
bimg.src = bp;
eimg.src = ep;
cimg.src = cp;
context.clearRect(0, 0, canvas.width, canvas.height);
//image,LXonImage,topYonImage,imageWidth,imageHeight,xOnCanvas,yOnCanvas,widthOnCanvas,heightOnCanvas
//2nd/3rd letter:w=width,s=speed,h=height,d=direction,a=animationframe
//1st letter:b=background,c=player,e=enemy,s=ship,h=beeHole,w=weapon.
context.drawImage(bimg, bx + 1, by + 1, bw, bh); // draw background inside canvas border
// draw in order of depth
if (cy > ey) {
context.drawImage(eimg, 0, 0, ew, eh, ex, ey, ew * er, eh * er); // draw enemy
context.drawImage(cimg, 0, 0, cw, ch, cx, cy, cw * cr, ch * cr); // draw player
} else {
context.drawImage(cimg, playerState * cw, 0, cw, ch, cx, cy, cw * cr, ch * cr); // draw player
context.drawImage(eimg, enemyState * ew, 0, ew, eh, ex, ey, ew * er, eh * er); // draw enemy
}
}
function animate(timeStamp) {
const deltaTime = timeStamp - lastTime;
//console.log("The time is:", timeStamp);
lastTime = timeStamp;
update(inputHandler.keys, deltaTime);
draw(ctx);
if (!gameOver) {
requestAnimationFrame(animate);
}
}
function update(input, deltaTime) {
// Game loop
//Keyboard input
if (input.includes("e")) {
// weapon code
console.log("E pressed");
} else if (input.includes("ArrowRight") || input.includes("d")) {
//Movement code
cxs = cms;
cd = 0;
console.log("right pressed, sxs,cys=(", cxs, ",", cys, "), x_y(", cx, ",", cy, "), frame=",ca);
} else if (input.includes("ArrowLeft") || input.includes("a")) {
cxs = -cms;
cd = 2;
console.log("left pressed, sxs,cys=(", cxs, ",", cys, "), x_y(", cx, ",", cy, "), frame=",ca);
} else if (
!input.includes("ArrowUp") &&
!input.includes("ArrowDown") &&
!input.includes("ArrowRight") &&
!input.includes("ArrowLeft") &&
!input.includes("d") &&
!input.includes("a") &&
!input.includes("w") &&
!input.includes("s")
) {
cxs = 0;
cys = 0;
}
if (input.includes("ArrowUp") || input.includes("w")) {
cys = -cms;
cd = 1;
console.log("up pressed, sxs,cys=(", cxs, ",", cys, "), x_y(", cx, ",", cy, "), frame=",ca);
} else if (input.includes("ArrowDown") || input.includes("s")) {
cys = cms;
cd = 3;
console.log("down pressed, sxs,cys=(", cxs, ",", cys, "), x_y(", cx, ",", cy, "), frame=",ca);
} else {
cys = 0;
}
if (cxs != 0 && cys != 0) {
//account for diagonal movement too fast
cxs = cxs * Math.sin(45);
cys = cys * Math.sin(45);
}
cxs = cxs * cr;
cys = cys * cr;
cx += cxs;
cy += cys;
cr = scaler(cy, 0.1, 1.25, 0, 1024);
if (cx < 0) {
// Set boundrys / collisions
cx = 0;
}
if (cx > bw - cw * cr) {
cx = bw - cw * cr;
}
if (cy > bh - ch * cr) {
cy = bh - ch * cr;
}
if (cy < ch * cr) {
cy = ch * cr;
}
if (frameTimer > frameInterval) {
frameTimer = 0;
// Sprite Animation
if (ea < eam && (exs != 0 || eys != 0)) {
// enemy
ea++;
} else {
ea = 0;
}
if (ca < cam && (cxs != 0 || cys != 0)) {
// player
ca++;
} else {
ca = 0;
}
}
frameTimer += deltaTime;
input = [];
}
function scaler(yPos, minScale, maxScale, gameTop, gameBottom) {
let currentScale = minScale + ((yPos - gameTop) * (maxScale - minScale)) / (gameBottom - gameTop);
return currentScale;
}
function updateMaps(theMap, theKey, newValue, atIndex) {
if (!theMap.has(theKey)) {
theMap.set(theKey, []);
}
let currentValue = theMap.get(theKey);
if (atIndex !== undefined && atIndex >= 0) {
currentValue[atIndex] = newValue;
} else {
currentValue.push(newValue);
}
theMap.set(theKey, currentValue);
}
</script>
</body>
</html>
Journey
I heard about this challenge really late, so I just hope to turn in something working :)
my TODO list (game dev notes):
create the 3 basic files in a folder (.html w css and js links, canvas, and a div, .css, & .js) - DONE, 10 minutes
create game graphics - DONE, 3.5 hours
Create cover image - DONE, 15 minutes
Time to start coding, might as well start with animating the alien.
5:44pm, 9/26/2024: I got a basic skeleton of a game going in code now, it doesn't draw the images yet for some reason but no console errors and the console logs report successful keyboard input, arrow keys and wasd for movenent, going to use the 'E' key for using the bee fogger.
11:45pm 9/26/24 lots of coding refined, lots of early stage bugs but coming along well, partial visible background viewable on vsCode, back at it again tomorrow.
10:28am 9/27/24, made a lot of progress thismorning, I now have a basic scene where you can move your player, pressing 'E', which will be the attack button, confirms being pressed in the web console, the ememy shows onscreen and the depth drawing is correct for being in front of or shadowed by the player. Now to get some gameplay implemented!
Added a Link to the game images
3:12pm 9/27/24: got the player movement and scale size & movement speed ratios set and the player animations are semi-working direction-wise, after that i need to make an enemy AI and start making the 5 scenes. (start, fight, boss, win, lose)
3:43pm 9/27/24: fixed animation problem
7:29pm 0/27/24: Finished creating character sprites and uploaded them.
Created starting 09/25/2024 3pmE. by Roadhammer Gaming, any rights reserved. You can freely use and share this game.
Cover Image:
Top comments (0)