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
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>Title</title>
<style>
body {
background-color: black;
color: wheat;
}
#canvass {
position: absolute;
border: 1px solid lime;
left: 10px;
top: 10px;
width: 1026;
height: 1026;
}
</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 = 64,ch = 64,cd = 0,ca = 0,cx = 0,cy = 960,cxs = 0,cys = 0,ew = 64,eh = 64,ed = 0,ea = 0,
ex = 960,ey = 0,exs = 0,eys = 0,hw = 64,hh = 64,hd = 0,ha = 0,hx = 0,hy = 0,hxs = 0,hys = 0,sw = 64,sh = 64,sd = 0,sa = 0,sx = 0,
sy = 0,sxs = 0,sys = 0,ww = 46,wh = 46,wd = 0,wa = 0,wx = 0,wy = 0,wxs = 0,wys = 0,enemyState = 0,playerState = 0,cspeed = 0,
maxSpeed = 4,maxFrame = 3,frameTimer = 0,frameInterval = 1000,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;
//source image,topLXonImage,topYonImage,imageWidth,imageHeight,xOnCanvas,yOnCanvas,widthOnCanvas,heightOnCanvas
context.drawImage(bimg, bx, by, bw, bh); // draw background
// draw in order of depth
if (cy > ey) {
context.drawImage(eimg, enemyState * ew, 0, ew, eh, ex, ey, ew, eh); // draw enemy
context.drawImage(cimg, playerState * cw, 0, cw, ch, cx, cy, cw, ch); // draw player
} else {
context.drawImage(cimg, playerState * cw, 0, cw, ch, cx, cy, cw, ch); // draw player
context.drawImage(eimg, enemyState * ew, 0, ew, eh, ex, ey, ew, eh); // draw enemy
}
}
function animate(timeStamp) {
const deltaTime = timeStamp - lastTime;
//console.log("The time is:", timeStamp);
lastTime = timeStamp;
ctx.clearRect(0, 0, canvas.width, canvas.height);
update(inputHandler.keys, deltaTime);
draw(ctx);
if (!gameOver) {
// && cspeed != 0
requestAnimationFrame(animate);
}
}
function update(input, deltaTime) {
cx += cspeed;
if (input.includes("e")) {
console.log("E pressed");
} else if (input.includes("ArrowRight") || input.includes("d")) {
cspeed = maxSpeed;
console.log("right pressed");
} else if (input.includes("ArrowLeft") || input.includes("a")) {
cspeed = -maxSpeed;
console.log("left pressed");
} else if (
!input.includes("ArrowRight") &&
!input.includes("ArrowLeft") &&
!input.includes("d") &&
!input.includes("a")
) {
cspeed = 0;
if (cx < 0) {
cx = 0;
}
if (cx > bw - cw) {
cx = bw - cw;
}
// Vertical movement
cy += cspeed;
} else {
cspeed = 0;
}
// Vertical boundaries
if (cy > bh - ch) {
cy = bh - ch;
}
// Sprite Animation
if (frameTimer > frameInterval) {
frameTimer = 0;
if (ea < maxFrame) {
ea++;
} else {
ea = ed * 3;
}
if (ca < maxFrame) {
ca++;
} else {
ca = cd * 3;
}
}
frameTimer += deltaTime;
input = [];
//console.log("Player x: " + cx + ", y: " + cy);
}
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):
TODO:
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.
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)