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;
}
#canvas {
width: 1024;
height: 1024;
}
#game-viewer {
display: flex;
flex-direction: column;
position: absolute;
top: 10px;
left: 10px;
height: 1028;
width: 1028;
padding: 0;
margin: 0;
border: 3px solid lime;
}
</style>
</head>
<body>
<div id="game-viewer">
<canvas id="canvass"></canvas>
</div>
<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 = 0,
cxs = 0,
cys = 0,
ew = 64,
eh = 64,
ed = 0,
ea = 0,
ex = 0,
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 = 16,
wh = 16,
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 = 100,
frameX = 0,
stage = 0;
var time = 0,
gameOver = false,
stopwatch = 60000;
var keys = [];
const bpic = new Map().set(0, ["./bkg_0.png", "./bkg_1.png"]);
const cpic = new Map()
.set(0, [
"./cha_000.png", //walking
"./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", "./cha_030.png"])
.set(3, ["./cha_031.png", "./cha_032.png", "./cha_033.png"]);
const epic = new Map()
.set(0, [
"./bee_000.png", //walking
"./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", //flying
"./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, ["./bkg_0.png", "./bkg_1.png"]);
const canvas = document.getElementById("canvass");
const ctx = canvas.getContext("2d");
class InputHandler {
constructor(game) {
this.game = game;
this.keys = [];
window.addEventListener("keydown", (e) => {
if (
(e.key === "Enter" ||
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 === "Enter" ||
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);
}
});
}
}
const inputHandler = new InputHandler();
var bimg = new Image();
var eimg = new Image();
var cimg = new Image();
function update(input, deltaTime) {
cx += cspeed;
if (input.includes("ArrowRight") || input.includes("d")) {
cspeed = maxSpeed;
} else if (input.includes("ArrowLeft") || input.includes("a")) {
cspeed = -maxSpeed;
} 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 * 4;
}
if (ca < maxFrame) {
ca++;
} else {
ca = cd * 4;
}
}
frameTimer += deltaTime;
input = [];
console.log("Player x: " + cx + ", y: " + cy);
}
function draw(context) {
const bp = bpic.get(0);
const ep = epic.get(ed);
const cp = epic.get(cd);
bimg.src = bp[stage];
eimg.src = ep[ea];
eimg.src = cp[ca];
//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
}
}
let lastTime = 0;
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) requestAnimationFrame(animate);
}
animate(0);
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.
Created starting 09/25/2024 3pmE. by Roadhammer Gaming, any rights reserved. You can freely use and share this game.
Cover Image:
SOCIAL SHARE CARD GENERATOR