Skip to content
← Back to Community
KaBoom.js Alpha Release!!!
Profile icon
h
has Hacker Plan
slmjkdbtl

UPDATE: Kaboom.js is officially out right now: https://replit.com/kaboom

kaboom

Video game, beautiful thing, so much fun. Games should be fun of course, but game making itself should also be fun, it should be a game on its own! We here at replit are imagining a fun collaberative game programming environment that makes game programming fun again, and here's our first step: KaBoom.js, a JavaScript game library that enables everyone to start making a small game from scratch in an instant!

This is a community alpha release, features and docs are not fully stable yet, we really want to hear everyone's opinions, any suggestions or bug reports please comment below!

try out in the template repl
doc
guide

let's start making that game!

Voters
Profile icon
Leroy01010
Profile icon
Janice1
Profile icon
PurpleShade
Profile icon
slmjkdbtl
Profile icon
Mickandy
Profile icon
LaneMartin
Profile icon
AbaanShanid
Profile icon
HopefulDev
Profile icon
SixBeeps
Profile icon
IntellectualGuy
Comments
hotnewtop
Profile icon
amasad

Hey everyone, @slmjkdbtl is working with us to design a game framework. Some of you might remember my work on Basic, which was fun, but the language felt too limited. Kaboom has similar goals but approaches differently and doesn't try to invent a new language.

Profile icon
frissyn

@amasad :O That's really cool! How do you find people to help the Repl.it team with projects like that? Pick me please

Profile icon
amasad

@IreTheKID mostly people that apply for jobs

Profile icon
frissyn

@amasad I guess that makes sense, I didn't get accepted for intern though. T~T

Profile icon
JDOG787

@IreTheKID lol same

Profile icon
DavidBriggs1

fisher

Profile icon
JBloves27

Really cool!

kaboom

hahahahahahaha

Profile icon
programmeruser

For anyone who wants a CDN for this: https://cdn.jsdelivr.net/gh/replit/kaboom/kaboom.js

Profile icon
zplusfour

@programmeruser :O
I made a simple CDN, but now it is in jsdelivr

Profile icon
glitchish
Profile icon
slmjkdbtl

@ridark just amazing

Profile icon
JBloves27
Profile icon
glitchish
Profile icon
JBloves27

XD, np! @ridark

Profile icon
ch1ck3n

@ridark Oh yeah?> here's mine:

image
This file cannot be displayed:

Profile icon
DynamicSquid

Kaboooooooom!!!

Profile icon
amasad

@DynamicSquid hi squid, can you try and give us feedback?

Profile icon
DynamicSquid

@amasad It seems really good, but I'm not that good with JS. I'm more used to a Java syntax, like Processing. But it does seems really easy to use

Profile icon
DabDatBass

How to gif sprite?

Profile icon
AbaanShanid

@slmjkdbt @amasad Since KaboomJs doesn't have a GitHub repository, I will post my issue here, the clearCode function inside the init function doesn't work properly, I tried typing an rgb color code inside it and it doesn't seem to add the color I want. For example

init({ scale: 3, width:400, height:145, clearColor:rgb(51,162,255), } );

This only makes the game's background white.
Thanks

Profile icon
slmjkdbtl

@AbaanShanid all color values are 0.0 - 1.0 so i think you wanted rgb(0.2, 0.63, 1), sorry if that's not clear in the docs

Profile icon
AbaanShanid

@slmjkdbtl Ohk great thanks! Would be better if specified in docs

Profile icon
98129182

Awesome, will use!

Profile icon
Coder100

pogger

Profile icon
EpicGamer007

Is there a github repository? I would like to access an older version but I do not know where I would

Profile icon
slmjkdbtl

@EpicGamer007 Hi! Kaboom is not open source released yet so sorry no. Now we're working on a dedicated Kaboom environment on replit that have custom editor features for kaboom so stay tooned! If you want an older version (the version comes with this post I suppose?), I've put it in this repl: https://repl.it/@slmjkdbtl/kaboom-old

The only big change is the component system add([ comps ]), but you can still use the old style sprite(conf) with https://kaboomjs.repl.co/kit/starter.js (addSprite(conf))

Profile icon
EpicGamer007

@slmjkdbtl oh ok, its just the kaboomjs thing i made does not work anymore cuz i used a cdn and stuff.

Profile icon
slmjkdbtl

@EpicGamer007 oops sorry, but we'll have our official cdn, npm packages and stuff once it's fully released

Profile icon
EpicGamer007

@slmjkdbtl ok, thank you

Profile icon
mesquite2234

image
Something cool I made

Profile icon
HarperframeInc

What happened to Replit Play?

Profile icon
tankerguy1917

do we need any previous knowledge of javascript syntax and other things like that, or can this be helpful even if you are just learning javascript?

Profile icon
slmjkdbtl

@tankerguy1917 Yes it is helpful for learning JavaScript, I would say making games is the best way to learn any language!

Profile icon
tankerguy1917

@slmjkdbtl ok thanks

Profile icon
Baconman321

Try minifying this to make it faster to load... (Of course, keep an unminified copy).

Profile icon
amasad

@Baconman321 we'll worry about performance more in the future. For now can you try making something with it and giving us feedback?

Profile icon
Baconman321

@amasad I'm not really good with canvas and all... :(

Profile icon
amasad

@Baconman321 the cool thing about this is that you don't even need to know what a canvas is

Profile icon
Baconman321

@amasad XD how? From the looks of it, you need to know a bit about canvas. (NVM I looked, wow!)

Also, quick question, was wanting to know this:
You made repl.it in Golang right?
How do you redirect to https? I can't find out how to do it, because apparently https is hosted on a different port, but https is already set up on a repl even tho you didn't set up https yourself...

Profile icon
MarkSandow
Profile icon
zplusfour
Profile icon
zplusfour
Profile icon
amasad

@ZDev1 great, can you try making a game with it and give us feedby?

Profile icon
slmjkdbtl

@ZDev1 thanks! that should be useful

Profile icon
zplusfour

@amasad yeah sure

Profile icon
zplusfour
Profile icon
zplusfour

also i can make a CDN
if you want one

Profile icon
zplusfour

and why KaBoom?
when i looked at the post for the first time I thought it is a kahoot clone or seomthing

Profile icon
slmjkdbtl

@ZDev1 oops, didn't know about kahoot before, sry for the confusion!

Profile icon
zplusfour

@slmjkdbtl no it good ;)

Profile icon
Whippingdot
Profile icon
EpicGamer007

Is there a cdn for this? Also, the link you put:
image
for github does not work.

Profile icon
slmjkdbtl

@EpicGamer007 Hi! Sorry forgot to make the github repo public, it's good now, thanks for letting me know. It's not on a cdn yet, but for now you can get it pretty easily since it's just one file.

Profile icon
EpicGamer007

@slmjkdbtl ok, thanks for confirming!

Profile icon
amasad

@EpicGamer007 hi epic, can you try making something with it and giving us feedback? Thx

Profile icon
EpicGamer007

@amasad sure! I will try as soon as I can (probably today or tomorrow) :)

Profile icon
EpicGamer007

@slmjkdbtl @amasad One thing to know, in your guide, when you make the bullets have random colors and sizes, there is a syntax error. You are supposed to put ; but there seems to be two commas:

image

One thing I also see you use is sup as a function. Though it does make sense, in my opinion, function names should describe what they are doing a bit more. I think that I would get confused by what the sup function would do if I first encountered it. I am still going through the guide to learn more about it but it looks pretty good so far!

Profile icon
slmjkdbtl

@EpicGamer007 Thanks for the feedback! Yeah I also think sup is not the ideal name kinda ambiguous, goal is to have a name that's short and fun to type, if that doesn't work for people then we'll change it. If you happen to have any suggestion please let me know!

Profile icon
EpicGamer007

@slmjkdbtl I am workin on a little game right now. and so far, everything has been pretty smooth. I am really enjoying how simple it is to code with it and it does not take that many lines of code either :).

Profile icon
slmjkdbtl

@EpicGamer007 Hey that's awesome! Let me know if there's any problem

Profile icon
EpicGamer007

@slmjkdbtl ok. also, one quick question. for the loop function. does the time update? like if i had something like

timeBetweenSpawn = 1; loop(timeBetweenSpawn, () => { spawnEnemy(); });

and then have some code like:

if(numberOfEnemiesKilled == 10) { timeBetweenSpawn -= 0.1; }

would the time between each loop update?

Profile icon
slmjkdbtl

@EpicGamer007 That won't because the function cannot keep a reference to a number type, timeBetweenSpawn will only get evaluated once at start, if you want to do this you'll have to use recursive wait like

function spawn() { spawnEnemy(); wait(timeBetweenSpawn, spawn); } spawn();

this is also more flexible cuz you easily decide to stop the timer loop (not call the next wait), with loop there's no way to stop the loop yet (there will be shortly)

Profile icon
EpicGamer007

@slmjkdbtl ok thank you!

Profile icon
EpicGamer007

@slmjkdbtl another questions, how do we remove text from the scene? I tried destroy(text); and that didnt work.. (I am trying to display the users score but the text does not update so i am trying to find out how i can remove text);

Profile icon
slmjkdbtl

@EpicGamer007 possibly because text is the name of the built in function, if you name it to something else it should work? also you can update the text value by changing its text field like this:

const score = text("score: 0", { value: 0, // a custom field for storing the score number }); bye("enemy", () => { score.value++; score.text = `score: ${score.value}`; // modify the 'text' field to update visually });

forgot to put that into doc, doing that now

Profile icon
EpicGamer007

@slmjkdbtl ok thank you again! (By text, I just meant the text that i wanted to show).