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.7
<!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="canvas"></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,
gw = 32,
gh = 32,
gd = 0,
ga = 0,
gam = 3,
gr = 0.25,
gx = 20,
gy = 20,
gxs = 0,
gys = 0,
gms = 4,
lw = 81,
lh = 59,
ld = 0,
la = 0,
lam = 2,
lr = 0.25,
lx = 20,
ly = 20,
lxs = 0,
lys = 0,
lms = 2,
rlw = 60,
rlh = 61,
rld = 0,
rla = 0,
rlam = 3,
rlr = 0.25,
rlx = 20,
rly = 20,
rlxs = 0,
rlys = 0,
rlms = 2,
fw = 36,
fh = 34,
fd = 0,
fa = 0,
fam = 0,
fr = 0.25,
fx = 120,
fy = 120,
fxs = 0,
fys = 0,
fms = 0,
hand = 0,
enemyState = 0,
playerState = 0,
shooting = false;
(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 gpic = new Map().set(0, ["./gun_0.png", "./gun_1.png", "./gun_2.png", "./gun_3.png"]);
const wpic = new Map().set(0, [
"./smokeshot_0.png",
"./smokeshot_1.png",
"./smokeshot_2.png",
"./smokeshot_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 fpic = new Map().set(0, ["./flower_0.png", "./flower_1.png", "./flower_2.png", "./flower_3.png"]);
const positionMapper = new Map()
.set(
//first 2=left hand_xy, second 2=right hand_xy Adjusted
0,
[42, 51, 64, 47]
)
.set(
//Gun position on player at: right
1,
[21, 64, 58, 59]
)
.set(2, [28, 61, 56, 60])
.set(3, [28, 61, 57, 58])
.set(4, [13, 42, 56, 55])
.set(
//up
5,
[12, 51, 54, 51]
)
.set(6, [12, 54, 54, 42])
.set(7, [12, 51, 54, 51])
.set(8, [25, 51, 3, 47])
.set(
//left
9,
[47, 65, 9, 60]
)
.set(10, [40, 61, 11, 59])
.set(11, [40, 60, 11, 60])
.set(12, [11, 56, 55, 51])
.set(
//down
13,
[13, 51, 57, 51]
)
.set(14, [13, 52, 57, 49])
.set(15, [13, 51, 57, 51])
.set(16, [44, 19])
.set(
//Bullet created on gun at: right
17,
[32, 0]
)
.set(
//up
18,
[0, 19]
)
.set(
//left
19,
[13, 44] //down
);
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
const bimg = new Image();
const eimg = new Image();
const cimg = new Image();
const wimg = new Image();
const gimg = new Image();
const limg = new Image();
const rlimg = new Image();
const fimg = new Image();
document.addEventListener("DOMContentLoaded", (event) => {
inputHandler = new InputHandler();
bimg.onload = function () {
eimg.onload = function () {
cimg.onload = function () {
wimg.onload = function () {
gimg.onload = function () {
limg.onload = function () {
rlimg.onload = function () {
fimg.onload = function () {
draw(ctx);
};
bimg.src = bpic.get(0)[stage];
};
eimg.src = epic.get(ed)[ea];
};
cimg.src = cpic.get(cd)[ca];
};
wimg.src = wpic.get(wd)[wa];
};
gimg.src = gpic.get(gd)[ga];
};
limg.src = lpic.get(ld)[la];
};
rlimg.src = rlpic.get(rld)[rla];
};
fimg.src = fpic.get(fd)[fa];
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 viewportX = cx - canvas.width / 2;
viewportX = Math.max(0, Math.min(viewportX, bw - canvas.width));
let viewportY = cy - canvas.height / 2;
viewportY = Math.max(0, Math.min(viewportY, bh - canvas.height));
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, viewportX, viewportY, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);//draw background
// draw in order of depth
if (cy > ey) {
context.drawImage(eimg, 0, 0, ew, eh, ex, ey, ew * er, eh * er); // draw enemy
if (hand == 0 && (cd == 0 || cd >= 2)) {
// draw player
context.drawImage(cimg, 0, 0, cw, ch, canvas.width / 2 - (cw * cr) / 2, canvas.height / 2 - (ch * cr) / 2, cw * cr, ch * cr);
if (shooting) {
context.drawImage(wimg, 0, 0, ww, wh, wx, wy, ww * wr, wh * wr); // draw bullet if shooting
}
context.drawImage(gimg, 0, 0, gw, gh, gx, gy, gw * gr, gh * gr); // draw weapon
}
if (hand == 1 && (cd == 0 || cd >= 2)) {
if (shooting) {
context.drawImage(wimg, 0, 0, ww, wh, wx, wy, ww * wr, wh * wr); // draw bullet if shooting
}
context.drawImage(gimg, 0, 0, gw, gh, gx, gy, gw * gr, gh * gr); // draw weapon
// draw player
context.drawImage(cimg, 0, 0, cw, ch, canvas.width / 2 - (cw * cr) / 2, canvas.height / 2 - (ch * cr) / 2, cw * cr, ch * cr);
}
} else {
if (hand == 0 && cd == 1) {
// draw player
context.drawImage(cimg, 0, 0, cw, ch, canvas.width / 2 - (cw * cr) / 2, canvas.height / 2 - (ch * cr) / 2, cw * cr, ch * cr);
if (shooting) {
context.drawImage(wimg, 0, 0, ww, wh, wx, wy, ww * wr, wh * wr); // draw bullet if shooting
}
context.drawImage(gimg, 0, 0, gw, gh, gx, gy, gw * gr, gh * gr); // draw weapon
}
if (hand == 1 && cd == 1) {
if (shooting) {
context.drawImage(wimg, 0, 0, ww, wh, wx, wy, ww * wr, wh * wr); // draw bullet if shooting
}
context.drawImage(gimg, 0, 0, gw, gh, gx, gy, gw * gr, gh * gr); // draw weapon
//draw player
context.drawImage(cimg, 0, 0, cw, ch, canvas.width / 2 - (cw * cr) / 2, canvas.height / 2 - (ch * cr) / 2, cw * cr, ch * cr);
}
context.drawImage(eimg, 0, 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);
let gmap = positionMapper.get(4 * cd + ca);
// keep player in bounds
cx = Math.max(0, Math.min(cx, bw - cw * cr));
cy = Math.max(0, Math.min(cy, bh - ch * cr));
//weapon movement
gd = cd;
gr = cr;
gx = cx + gr * gmap[hand + hand];
gy = cy + gr * gmap[1 + hand + hand];
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.
11:30 9/27/24: The player is now equipped with the gmoke gun weapon, more graphics updates, newest working code updated to this post, I have regular work tomorrow so will have a short last day to finish up what I can, the next priority is getting the screen to follow the player when you move around the game world. have a good night everyone
8:29am 9/28/24: Last day of the challenge, so a morning update before headding to work, I implemented the camera feature so now you can explore the game room at least, I need to update all the other objects movement codes, like the character weapon that no longer follows the player, and fix going up doesn't show the player for some reason. we'll see how it goes after work and before the deadline! have a good day and happy coding everyone!
9:02pm 9/28/24: long day at work, while I have something that somewhat works, v0.0.7, I uploaded the index file so the full game & assets can be stuffed in a folder and run on VisualStudioCode. BuzzBeeAlienInvasion I'll try and update it with at least a randomly moving enemy and the ability to shoot smoke darts at it with your bee smoker gun. The bees can't sting you as long as you have the protective suit intact.
Last day (bonus last day haha, as I had thought yesterday was the last day) 8:22am 9/29/24: nothing new yet as I am chasing code bugs (character refuses to show up when going up unless you are as far up as you can go...) and not getting anywhere fast, plus another 8+ hr. workday today so I'm hoping for the best. good day everyone and happy coding!
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)