20 Award-Winning JavaScript Games – Js13kGames 2020 Winners

hello internet so i'm super grateful to be here today on free code cam to talk to you about the winners of the js 13k games that's right so in other words 20 winning games that means 20 amazing code snippets from 20 insanely talented developers my name is anyakuba and i'm a software developer and a youtuber who loves to create all sorts of awesome tutorials online but hey today's not about me it's about these guys if you are just starting out in javascript or perhaps you're well seasoned but haven't actually heard of the js 13k games before well you are in for a treat as a judge on the 2020 js 13 games panel i had first time experience of these amazing developers so i really can't wait to show you that code today it is absolutely incredible to see what these guys have built using just javascript no libraries that fits in a 13kb file but first what is js 13k games you ask as the name would suggest all your game and game asset should be smaller than or equal to 13 kilobytes that is exactly 13 312 bytes to be precise you can of course zip it but don't over complicate building the zip package it should open on any platform anywhere anytime and you can use tools that minify your javascript source code if that helps too two you are not allowed to use any external services or libraries you can't use libraries images or data files hosted on server or services that provide any type of data for example google fonts are not allowed which let's face it and while the developers are so often scrolling through npm to find the latest package that will do some sort of shortcut it's nice to strip back a little bit right and just use plain old vanilla javascript number three stick to the theme this year's theme was 404 so the number 404 so if you know what that means you know like get creative with it the theme is announced every year in august so it was announced this august and that is what the developers had to work with and finally how many games can you submit well you can submit as many as you want you can also work on a team you work with your dog like it doesn't matter just get involved it's really meant to be a lot of fun this awesome competition was started in 2012 by anjay mazur he created it from scratch out of his own pocket sending out you know like t-shirts and gifts using the money that he had saved up what an awesome guy i can't wait to introduce him to you and now hello there my name is andre mazur i'm the creator of the js 13k games competition and i have to admit that i'm impressed with quality of the games submitted this year it's so cool to see that the games are getting better and better every single year since 2012. i'm also proud of the community because even though it's a competition developers are helping each other to build better games to fix issues and the bugs if you're interested about how those games were built remember that all the games from all the years the source code is on github so you can learn from that um okay um thanks anya for doing the video and helping promote the competition i really appreciate this thank you bye okay thank you andre and thank you also to free code count for giving us your platform to showcase this year's winners give it up for bo from free code camp hi i'm beau from freco camp js 13k games is a great initiative we're all about learning to code at freecoatcamp and coding a game is a great way to hone your skills i think 13 kilobytes is a brilliant constraint constraints often lead to greater creativity and that's definitely true with this year's winners we're honored to showcase these projects on our channel i encourage everyone watching to try to create your own 13k game yourselves and see how it improves your skills okay so hopefully you're ready to start looking at some code because next up we have the 20 overall winners starting from descending order so number one don't forget i will be putting a link to all the developers where you can find them on twitter as well as play their games and also of course their github source code for each game too let's do it hello everyone my name is remy vancillin and i'm a french game development hobbyist i've been participating in j7k games every year since 2013 and this year i made ninja versus evil corp every year i try to make something a bit unique for js13k and try to push the limits of what you can get within the size constraint instead in 2020 i only had a week to work on my game so i decided to go for something a bit less risky and i wanted to polish it as much as possible one of my favorite game genres is 2d platformers so i decided to build just that with two main goals in mind first make it snappy i wanted it to be fast and i wanted the controls to feel right second have preset levels typically i make games where you have randomly generated levels the benefit of that approach is that it takes less bites and also less creativity you only need to have a decent algorithm this year i wanted to make a game that lasted about 5 minutes with a beginning an end and well-designed level some other goals came after such as having levels represented by floors in the tower similar to the die hard game if you've ever played that i wanted to have shortcuts optimized for speed running and polish the game as much as possible i was on vacation in quebec when the theme was announced so i had some time to prepare i was able to sketch the character his trademark floating bandana some basic levels enemies and various elements i was also able to write a few algorithms on my notebook like i mentioned before one of my main goals was to have preset levels it's not something i usually do and i'm pretty happy with the result so i can say that one of the main things i'm proud of is the level design a lot of it is due to how much time i spent adjusting the levels thanks to all the people who play tested the game and the part i'd like to focus on is how i managed to squeeze 17 levels in a 13 kilobyte game more specifically how the ai was defined if you look at levels.js you'll notice that all the level matrices are stored as json and the enemy behavior is defined next to each matrix the game is filled with cameras that typically transition between two angles and guards that transition between two positions one of the constraints was that i needed all their cycles to be consistent i couldn't have them be framer dependent or you have the slightest difference between two runs otherwise speed running would just suck in other words i needed to be able to determine their exact state based on the current clock if you look at the way those cycles are defined it is actually relatively readable i didn't want to use some obscure arrays as it'd be much harder to read and maintain everything follows a builder pattern that allows for a lot of control while still taking very few buys for instance cameras are defined by their position and initial angle in the constructor and then their behavior can be chained if the camera needs to rotate by a certain amount we can simply call rotate by and provide the angle and the time it should take to perform that rotation if it needs to wait we can call wait and provide the duration and if we need two cameras to have the exact same cycle but with a slight offset we can call with phase and guards also follow a very similar pattern the details of how it all works under the hood iron cycle.js it's all very simple algorithms and this is why i'm still proud of it it lasts for a lot of control without looking too complex which is what most code should be we should always try to make it as readable as possible anyway i hope you like this quick walkthrough of a small portion of my code if you're interested in seeing progress on various unfinished game projects you can follow me on twitter at remvst and i hope to see you all joining js13k next year hello i'm tom hammels i'm a dutch developer who also makes a video game sometimes and for this year's year's turning k jam i made edge not violent it's a puzzle game on an infinitely repeating world i really like a towel based box pushing games like chocobon and i've already made several of them this is probably my most complex one yet i've been sitting on the idea for this game for a while and the gem was a good opportunity to develop it and design some cool puzzles for it so let's talk about the rendering for a bit each frame in the game is drawn using three steps in the first step i create multiple gaps that serve as sprites for the various puzzle elements like walls and boxes these are drawn using the rough library which generates nice hand-drawn looking shapes the second step runs the current puzzle state using these sprites like this then finally it will draw the level repeatedly to fill up the entire game canvas and i really like the bit of code that handles this so today i'll explain how this infinitely wrapping world works exactly so for demonstration purposes i've regenerated the level image from the game instead of generating one from scratch just to keep it simple now then i've isolated code in this sample i'll go over the most important bits but if you want to toy around with helping you can access the example with this link so let's go through it the core of the dialing magic happens here with the x and y offsets these essentially affect how the levels are tiled for example if you play the game then you know that this level can't be solved because the crate can't reach the goal but if we change the y offset to 2 the level becomes a straight line and the puzzle becomes solvable it's kind of complicated but it is used in a lot of tricky puzzles so next we calculate how much left scan fit on the screen exactly the clip offset here here adds a small margin to the level border but it also shows if you put this into as a negative value then you can confirm that scope actually works because then levels that are very near the border won't get drawn either so this essentially makes sure that nothing will be drawn if it will end up being nearly or completely visible invisible anyway so finally a nested for loop actually draws levels note that levels further away from the center will get more transparent so if i zoom out all the way then you can see that the wrapping will go on for a bit but eventually it'll become so opaque that it will stop drawing so when drawing the image with an offset defined we shift the image out on the grid which you can kind of see here because of the shape so if i enable the coordinates display you can see that the image also shifts two steps down for each step on the y-axis kind of like a staircase and that's due to the level offset why i said earlier and that's pretty much it once again you can view the code snippets here uh do consider playing edge not found first if you haven't so you can learn how this level wrapping is used for the more tricky puzzles so i hope this inspired you to make your own infinite worlds if you like this then you can find me as a rory excellence victor uh for more of my things and if you look the name up on github then you should be able to find the full source code of the game bye and thanks for watching hey i'm caustic1337 we with my friend lamp sprites created the game called church before gem started i decided that i want to create game where everything is rendered in a single screen fragment shader this technique is not often used in game dev but it's very common in demo scene and on websites like shader toy i never created any games like this so it was an experiment for me in a nutshell shader is a program executed on a gpu you can think of a single screen fragment shader as a function that returns pixel color based on its position since this function runs on gpu it's pretty fast and you can do fancy things there this has some pros and cons comparing to usual techniques like drawing sprites with textures so the goal for me was to make the most of pros and try to make cons negligible one of the pros is that you can get this new laser effect essentially for free first off all geometry is represented with sign distance fields or sdfs in short sdf is a function that for any point in space returns distance to the closest geometry and it's positive if you are outside of geometry and negative otherwise in our game we actually have three sdfs for bounds checkpoints and deadly zones there are a lot of awesome articles in internet about how to construct sdfs go read them if you are interested after you created your sdf you can for example render pixels white whereas df is negative and the black where it's positive so you can see your geometry after that creating neon effect is very simple it's this simple equation parameter g corresponds to brightness and p for blurriness it's very simple effect but it looks pretty after that to make it look 3d ish just render the sim multiple times each time slightly offsetting can scaling the layer that's basically everything about rendering almost all objects in game are rendered this way including the spider protagonist collision checks and game are done in shader as well to check collision you only need to evaluate your sdf and spider position and if it's less than spider size like if distance to closest geometry is less than your size then you are collecting something after that you can calculate surface normal vector by calculating gradient of sdf in needed point to pass this data from shader to js code i write this data in first three pixels of the screen they are bottom left although they are very small to spot them there are ways to do this better but it takes a little of code and works ok let's talk about music a bit i'm not good at composing music so i try to make it as generative as possible all sounds and music and game are done using plain web audio ip web audio ip is kinda cool it's like a modular synthesizer where you create audio processors and route them in any way you want so this piece of code generates ambient music in game basically it creates three sine wave oscillators each of them slightly detuned with another low frequency oscillator then they all are summed up and passed through echo with huge amount of feedback and reverb to create nice ambience every time you place checkpoint chord changes i have hardcoded a bunch of random chords in a minor scale they are just changing in loop also every 3 seconds according versions changes randomly chord inversion is when chord nodes are shifted octave up and down the chord stays the same but it sounds differently with huge echo it creates interesting effects sometimes all other sound effects are created with web audio ip as well they include ring modulation essentially it's just signal multiplication and some filters all these effects except reverb are available out of the box with web audio ip the last thing i'd like to tell you about is this little piece of code this is definitely not the code you would like to see in production it's very high key but for fitting a game in 13 kilobytes it did its work pretty well it is used in intro and autocad scenes where text is printed on screen basically it prints text to converse character by character it also can evaluate code to modify some internal state for example for moving to a new line changing delay between prints printing whole string at once and other things this function utilizes async await.js without it this code probably could be a lot larger here is example how it is used strings with exclamation point prefixes are evaluated anyways i hope you learned something here if you want to learn more check out whole code of our game on github you might find more hacky tricks there if you want to learn shaders check out book of shaders it's an awesome introduction to shaders also check out shadertoy.com it's a huge community of people writing shaders you can learn a lot there you can follow me on github as caustics1337 and on twitter as caustics 13 337 and i will be glad to see you all at next year's js13k for this recording i will be reading it on behalf of maxine hi i'm maxime web dev passionate of code golfing puzzle games and css for js 13k 2020 i wanted to make a 3d game using css 3d and emoji my game is about helping a train to cross bridges using optical illusions it was inspired by the indie game fez and the mobile games monument valley earlier this year i made a micro framework cs3d framework allowing to render a plane a sprite or a cube with a single line of code these 3d shapes are simply made of html elements and so they can contain anything you want css gradients images texts emojis so this gave me the idea to create 3d emoji i put one emoji on the front one emoji on the back and i filled the exterior with colored planes like an ice cream sandwich for example this train is made up of 16 planes after adding some tree sprites around the train and a few planes under it for the track the illusion of movement is made with simple css animations that make the track and the trees scroll infinitely from right to left even though the rest of the scene is completely fixed here is the css code used for this and that's how i made my title screen next i'm going to show you how to implement the optical illusions in my games puzzle for example in the third level of the game the player must switch between 2d view scene from the side and 3d view with perspective to help the train move from track piece to another first the switch between 2d and 3d is made by transitioning the css 3d perspective value if it's low the perspective will be enabled if it is high the scene will be in 2d you may notice that this kind of puzzle violates the laws of physics the train is simultaneously at different places of the scene depending on which button is pressed 2d or 3d and how much it has progressed through the bridge it took me a few days to figure out how to implement this i declared three views of the same scene a real one saying where the track parts are located in the real world two virtual ones saying where the track parts appear to be in 2d and in 3d in the real world no block parts are aligned in the 3d virtual view the blocks 1 2 and 3 and the blocks 5 6 and 7 are aligned thanks to an optical illusion as well as here in the 2d virtual view the blocks 3 4 and 5 are aligned thanks to an optical illusion finally here's what happens when a camera transition occurs the train moves on the part 2 in 3d view this part has a virtual 3d position so the train uses this position as if it were real but in reality it flies in the air to preserve the optical illusion the player clicks on the 2d button at this moment the train is instantly teleported and scaled up into its real position so you don't see it fly in the air and then the camera transitions as if the train had always been there if we are on a part that also has a virtual position in 2d view which is the case for the fourth part of the puzzle then the trainers teleported a second time just after the camera has finished moving once again it will fly in the air to preserve the illusion the same thing happens when transitioning from 2d to 3d thanks for watching this video as always there will be more information about this game and the making of it in the description below hey i'm ian xiao from taiwan i am a software engineer currently based in seattle i am the creator of the stolen sword stolen sword is a action platform game that you can play with only one finger and basically you play a swordsman trying to reclaim this word from a thief and the sword was used to suppress demons so now that it's being stolen the demon have been released so you have to fight him along the way and visually this game was inspired by a 2002 movie called hero i was obsessed with the late 56 in the movie so i just want to kind of recreate it the scene in the game and also crouching tiger hidden dragon is another movie that i referenced so today i'm gonna share a little bit of how i create water effects in the lake level the water effect can be break into three parts repo and reflection and the gradient mask the repo is just two semi lips the lower part has a outer shadow and the upper part has an inner shadow so it creates a 3d illusion just like a crater the code snippet here is not an actual code it's just a high level concept of the implementation because the actual code is way uglier first i use the scale function to squash the circle a little bit to make it more like a oval instead of a circle so so that it looks like it's on the water surface then i use radial gradient to draw the shadow i use color stops to control the shadow goes inward or outward and then use ellipse function to draw a half of circle most of the image assets in this game are vector graphics it's basically layers of shape defined by a path which is an array of points so to draw this image i simply traverse the path array and connect all the points together with line two function that's it based on that the reflection is pretty straightforward first add some transparency by tweaking the global alpha and then add a little bit of vibration by adding random number to the x-axis coordinate so that it looks like it's on the water surface and lastly flip the shape across the y-axis but the reflection of the enemy is another story enemies are simply chinese characters drawn with failed text function i didn't find a way to flip the text i do know there is a transform function but i just didn't figure out how to use it so i take advantage from chinese characters every enemies appears in the leg level are vertically symmetrical which means the characters looks identical even when it's upside down and if it's not symmetrical then it must be a character that you can find a upside down version of it the last element of the water effects is the gradient mask it is used to show that the player is dipping the water and it's basically it's just drawing the player again but this time it is filled with linear gradient because the gradient is using absolute coordinate its position is fixed no matter where the shape is so i can easily keep the boundary at the same high as the water surface so that's a high level overview of how i created water effects in my 13k entry and i really appreciate jfk for hosting this amazing event i've learned a lot from the community so i highly recommend you to give this a try next year and you can find me on github and twitter my username is ciaogu that's csiaogu and feel free to reach out thank you reading on behalf of michael farren my name is michael faran i am a software engineer for minneapolis minnesota usa i spent most of my time professionally building web applications in reacts and typescript occasionally i like to build javascript games in my free time this is my fourth time participating in the js 13k i wanted to take a different approach to the 404 theme than the common not found approach to help my game stand out one of the ideas i brainstormed was to use 404 as a time period for the setting of my game from there the idea to use ancient greece led to what became the last spartan i like to play hack and slash games as it felt like a good genre that could be achievable within the constraints of that nkb this is my animation class that powers all the animations for the player and enemies in the last spartan this class accepts keyframe animation configurations as input and interpolates values between those keyframes to create smooth animation loops for idling attacking jumping etc in my game what i really like about the solution is it allows me to make some really impressive animations utilizing each component of my characters individually the head the shield the sword and each leg and by only defining a subset of positions and rotations for each when rendering each of these parts of the character i use the offsets that were generated by the animation class between the keyframes and i get smooth animations without defining every single frame myself thanks so much for watching please do reach out to me on twitter or check out my project in the description below where you can play it and check out the code for this game i will be reading on behalf of saud when asked about his favorite code snippet for the game he chose this one right here a little brief note about it is when creating the level editor for the game i didn't want to impose any sort of constraint on players so i wanted the space to feel like an infinite grid i thought a lot about how to maintain the state of a virtually infinite grid with different type of platforms and obviously an array wouldn't suffice since that would mean the grid has a start index and no platforms can be created before the start index finally i came up with this snippet what it does is keep track of the negative offset or in other words the number of platforms beyond the start index represented by negative x y a player has traveled and then shift the whole level data so a 2d array by that amount the grid can now be virtually infinite in all directions and not limited by the start index of the arrays you can find more about this game in the description below for this game i'm going to be reading on behalf of mark vasilkov my name is mark vasilkov and i'm a russian israeli computer programmer and security enthusiast i love video games the thing i do for a living are distinctively not video games though life's unfair like that a proper puzzle game can be designed as follows players are taught a game mechanic this allows them to solve puzzles of progressing difficulty then another mechanic is introduced upping the combinatorial complexity and then we repeat until done this game or in other words i want to google that game is an opposite of that a whimsical experience with no meaningful level progression each level changes the rules there is nothing to learn no understanding to develop this design was suggested by my beautiful wife natalia as a satisfactory metaphor for the entirety of the year 2020 in regards to the code snippet i am most proud of i'm ashamed of most of it really but i think the following main loop turned out nicely making a smooth animation in javascript is surprisingly difficult modern screens don't have any semblance of consensus as to how many frames per second to render a 4k screen connected to my mpb runs at omega 30 frames per second because of apple gaming laptops on the other hand commonly run at around 300 frames per second this obviates the need to decouple movements computations from the refresh rate we cannot do plus plus x in every frame as the results would be very different between machines and even on the same machine depending on rendering complexity gc pauses and so on the simple solution is to use delta t the time interval between frames as a multiplier for movement distance this approach has issues of its own though for one we are dealing with floating point numbers that are close together some computations tend to accrue large errors look up catastrophic cancellation as i can't pretend to explain it then again there are state changes that are abrupt these can be difficult to express in terms of delta t also jumps as in 2d platformer will miss their apex point when the frames per second is slow the solution i arrived at which can absolutely be improved on is the fixed step loop showing in the listing the only requirement is your render function should be capable of learning objects between their current and last known positions meaning that every object stores its previous coordinates conveniently when you're writing a valid integration this is already the case the update function then uses the fixed step of 0.02 seconds or 50 updates per second in this example it can do plus plus x for all its worth and the animation will still be smooth and independent of the rendering frames per second moreover the update function doesn't run in every frame reducing the cpu load at the expense of game's responsiveness to controls yep there's also a safeguard for when an update takes an inordinate amount of time although the end result will still look janky implementing an algorithm that would scale the tick crate based on the observed performance of the machine is left as an exercise for the reader once again you can find more on mark's game in the description below including weatherfan on github his homepage and his twitter handle hi everyone my name is jerome leconte and i'm a software developer specialized in javascript one month per year i'm also a game developer for the js 13k games competition in 2020 the theme was 404 and it turns out that my home province of ontario canada has numbered its highways in the 400 range so there is a real highway 404 and i decided to make a game about it the goal is to survive the perils of the highway which are triggered by http status code 404 makes the road behind you disappear 501 makes the lane ahead unavailable and so on today i'm going to share with you how linear interpolation also commonly referred to as lerp in game development allowed me to add some juice to my game lerp is a function that takes a value in a range 0 to 1 and maps it to another value in the range between a min and a max using a linear scale for example if the min is 10 and a max is 20 at t equals zero the function will return 10. at t equals 0.5 it will return 15. at t equal 1 it will return 20. this is the function that my game loop calls on every frame to calculate the distance that a car is moving forward it uses the elapsed time usually tens of milliseconds and multiply it to the car speed that i've expressed in pixels per second to get a distance which i then add to the car's y position another way to think about it is that there's an acceleration factor always set to 1 that gives me the full car speed on every single call where this is a problem is that on the title screen the game loop is not running and as soon as the game starts the car is going to move from zero to full speed in an instant similarly when a car crashes the game loop exits and the car comes to a full stop instantaneously and this is where lerp is going to come in andy now when the race just started i can progressively increase the acceleration factor from 0 to 1 in about a second and a half using the log lerp function this is going to feel like the car is progressively accelerating to its full speed similarly when a car crashes i can now decrease the acceleration factor from one to zero in about one and a half second giving the impression that a car is slowing down to a full stop i was so happy with the result that i started using lerp everywhere another instance is in the function that steers the car from left to right the idea is the same elapsed time times car speed gives you a distance and the distance either negative or positive depending which of the left or right arrow key was pressed last once again the problem as the car moves from zero to full speed on the left through on the right as soon as the key is pressed which makes for precise control a bit difficult using lerp i can also increase the direction factor from zero to minus one or zero to one in about a quarter of a second and this gives the car some inertia which makes for a nicer driving experience and that's about it you can play highway 404 by visiting bitly forward slash hwy-404 the source code is on my github account and i've written about the making of in a medium article you can also visit my website herebyfrogs.com or follow me on twitter hatre frogs thank you for listening hi my name is cody and i am the creator of mini punk a 3d action adventure game for the 2020 js 13k games competition let's take a quick look at the game the enemy of the game is the evil 404 megacorp they are threatening to take over the internet and you must stop them it's a third person 3d game with melee combat gives you an idea of the gameplay of the game now i'd like to talk to you about some of the technical details of the project it's part of the competition the game is open source and available on github i wrote a postmortem that talks about the origin of project some of the technical details in terms of choosing the project it's based on some of the ongoing debates about internet censorship it's really because i'm excited about the upcoming release of cyberpunk 2077 the game itself uses a voxel engine similar to minecraft unlike minecraft where each tile is one meter by one meter by one meter the voxels in mini punk are one meter tall and four meters wide and four meters deep this helps with performance um and keeps the code a little bit smaller one of the most interesting technical details of the game is the bloom effect which creates this neon glow the implementation is based on an opengl tutorial that i ported to webgl which creates this great city glow effect here's the code for the bloom shader as you can see most of it is implemented in glsl that's the language that your video card uses to actually render and it's done as a post-processing effect there you have it that's a quick look at mini punk for the js 13k games competition thank you hello i'm nicholas and i created a game for js13k called searching 404. it's a classic single-player dungeon crawler game containing one level with smaller labyrinths puzzles two different weapons with weapon progression two different enemies to fight and finally a boss fight this also features a static lighting system [Music] projectiles particles [Music] and some very basic audio effects [Music] in all this i managed to cram into a zipped package at 13 kilobytes so does this mean that i'm working as a full-time game developer no it doesn't i'm actually working as a system administrator maintaining servers and networks 8 hours a day but in the evenings and weekends i'm creating games this was the first game i created in javascript usually i'm creating games in java or c-sharp in unity mostly for the ludum dare gaming competition but i wanted to do something new and decided to participate in jay's 13k this year i never thought i would be able to finish a game nor create a 3d game in just 13 kilobytes but with a few weeks works two three hours a day i managed to create this game and i was very surprised when i saw that i ended up at place 11 and at place 5 in the gameplay category [Music] the source code you can easily tell by the source that i'm actually a java developer and doing my first game in javascript [Music] i was using es6 which gives me classes and the possibility to use class inheritance instances and static class variables [Music] is there any code that i'm proud of as this is the first time i'm doing a game in javascript and especially since i managed to do a 3d game in just 13 kilobytes i'm proud of all the code but i've have the big one that i'm extra proud of it will probably be the code that adds static lights to the level because without the lights the game would be well the ambience the light gives it would miss a lot of that the algorithm for adding the lights is very silly simple and not efficient at all but javascript executes it's very fast so for my level that is 64 by 64 tiles just does that code in just a few [Music] milliseconds [Music] so how does this light code work well the entire level is built of grids like this where every grid is tiled so it can either be a floor like this then we can add walls like this and finally a light source in the middle here so the light code will loop through all of these tiles looking for a light source the first time and it will set the light value to 1 like this then when a loop enters again every tile will check enable tiles so when it enters this one it will find that the bottom tile has a brighter light value than it currently has which means it will set the light color like this then we'll continue do that for the rest of the tiles now when the loop enters again this style is the next and we'll check if there is a brighter tile neighbor tile and we'll find these two and both has the same color so it will just pick one of them and you can see it decreases the light a little bit so it can fall off the light value otherwise it will just flood the level with the same light then we'll continue like this and then the light would spread like this all over the level a good thing with this is that we can actually get the light a little bit into the corridor like this so when you enter the room here you already see the light here when the walls calculate the light they always set the light value to zero because we don't want light to spread through walls so it's always zero okay so now when i have this light map what do i do with it well for the floors it's quite easily i just set the light value of the tile but for the walls well each wall is built of four corners and each corner will check like this into the light it's facing and it will do like that this wall and this wall will have the same color as this tile this wall is having the color of this style and finally this wall the other side of the wall it's it's the same tile but it's the other side of the wall well without this will be zero so the light would never never spread through it's a very silly algorithm but it's very fast in javascript and the whole level just takes a few milliseconds to process [Music] and that was my game searching for a four that i made for years 13k 2020. you can find me at my not very updated blog at snooki.se or at nikasloof at twitter or my youtube channel [Music] you can also find me at spotify and other streaming services since i'm also making music and the tune you ever heard in this video is mine you can search for album recollecting memories by niklas love thanks for watching and year 2021 i challenge you to also participate in jay's 13k try it it's a lot of fun and if i could do it i bet you can easily do it too this recording is being done on behalf of paul brunt paul brunt says i'm just your standard web guy building websites for a living and i love graphic programming and making games in my spare time this year's game for gs 13k was my fourth entry for the competition it's basically a platform game with a twist instead of jumping as you would in a traditional platform game you control a light source that costs shadows that you can walk on i came up with the idea early on when i was just doing some array casting to add some lighting effects at the time the shadows were casting in the same color as the platform and there was no visual distinction so i thought why not make them act as a platform as well my favorite piece of code in the game was the collision detection code it still blows my mind that with nothing more than some pythagoras you can perform what seems to be really complicated collisions the code isn't that complex but i believe it's the first time i've taken the maths from scribbles and implemented it in code without making any silly mistakes it all worked as intended from the get-go so a very rare event the shadows are made up of a bunch of line segments and the code checks the distance of the player's bounding circle from the line segments if the line is less than the radius of the bounding circle away then a collision occurs and the normal and overlap distance is returned the nice part of writing this code was that i don't venture into the world of 2d much but the 3d stuff i've learned over recent years transferred over really well as a result there wasn't as much head scratching as i'd first anticipated when i originally came up with the idea of making the shadows part of the environment thanks so much for watching my video and as always you will find my website and my twitter handle as well as my game in the description below please do check it out this video is going to be read by any okubo based on a post morten on github for this game by ben clark and salvatore privity island not found is a game that is rendered primarily using a technique called ray marching or sphere tracing this is where you define the world as a mathematical function representing a distance to the nearest geometry it is much more inefficient in processing than standard polygonal rasterization but appears to be much more effective in code size curved surfaces are easier to render with better fidelity and less overhead since there is no triangulation involved ben and salvatore met up one day after work after the theme 404 was announced and began deciding what they should build the general linking of these things from 404 was ideas about finding things being lost you know lost the television series not knowing where you are a code piece that they used in their post-mortem was this it is all about code golfing salvatore says while for our previous game last year we didn't have to put much energy in code golfing this time much more effort was required a large portion of the final bundle is occupied by glsl code to reuse functions uniforms and variables across multiple shaders the best solution was to have a single big file and switch the main function to use a string replace when loading the glsl transpiler on the browser already performed unused functions elimination and constant folding so it was not concerned to load unused variables and functions you can read more about this piece of code on the postmortem online that is attached to the github game please do enjoy the read and do give ben and salvatore a follow on twitter as well oh and if you're curious about what this game looks like in a single picture of code this is it pretty cool for this video i'm going to be using a postmortem that mark posted on github speaking as mark a little bit about you have found it's a soothing game about perspective it's important to turn your sound on head votes advice tap and hold to move the trail make a loop to catch things if you want getting started to prove to myself that it is perfectly possible to use hakes for this i started to create a small engine in hakes i called the project hx13k initially higgs is a programming language that compiles to many languages including javascript es6 as mainly part of my daily job i am a game developer and make html5 advert games so i like the idea of this gem first i started by making a basic engine well actually i stripped down the setup i normally use which is a combination of pixy js and a customized flambe library i'm a big fan of using entity components and the way that flambe library did it is how i like to work it's very pragmatic and usable for creating games in the end pixie js was removed as a render because it was too big it's too bad because pixie gs is such a great fast 2d rendering framework if you would like to read more about my game please do visit on github and have a go yourself hi my name is jeremy and i'm a game developer from edmonton canada and i made 404 kph for the 2020 js 13k games jam i first got the idea to make a driving game of some kind after last year's jam last year some friends and i made a game where you would fly through canyons and i thought it would be neat to drive a monster truck over the sort of canyony bumpy terrain however once this year's jam started and i started prototyping i i just couldn't quite get the monster truck physics to feel good but uh the physics ended up being pretty good for a car so i looked to one of my favorite uh racing games which is trackmania and decided to get some inspiration from that and kind of go into the surreal crazy physics-y uh time trials type racing direction the game itself has a pretty strange architecture in order to stay under 13 kilobytes for instance the audio is done through a custom synth that's essentially hard coded to produce the game's music and other sound effects also the game's state is stored in a small texture and all the game update code including the physics and everything is run inside of a fragment shader on the gpu and this is done in order to share some code and data between the rendering and physics code as well as to make use of the really terse vector math functions that are available in the shader coding languages on top of that the build system runs a series of like custom steps in order to make the final html file more friendly to zipping and just squeeze a couple of extra bytes out of that the thing i'm most excited about though is probably the level editor i mentioned that the game update code runs inside of a shader this is done partially because the world is represented as a signed distance field or sdf you can think of an sdf as a function that takes a point in space and returns the distance to the nearest surface in that space sdfs are really easy to render and they're really easy to test collision against which is why i chose them as a representation for the tracks however this means i have to represent the tracks as a collection of functions in order to not go crazy trying to manually write functions for every individual track i decided to build a unity plugin where i could represent different components of a track as their own functions but then translate scale and change the properties of them just by dragging around the objects in the editor the editor then when i hit build will generate a bunch of shader code which is the sign distance function itself so i get the benefits of sort of a gui editor and i can see my work as i'm working on it i get a really quick iteration time um but it's still generating this sign distance function in the end which i can just embed directly into the game and so that's how the editor it works for 404 kph and that's how i built all of the tracks i actually built all of the tracks that are in the final game on the last day of the jam because i was busy building everything else up until then this is a recording based on elliot's github repo wizard with a shotgun is a top down 2d shooter you have the wizard recover the missing pages of the shotgun arcana from the dungeon by blasting everything you see play on your desktop using any browser and use the controls of your keyboard and your mouse the main character is intended to be a sort of wise cracking street smart wizard think harry dresser not harry potter the main character also has this awesome text show up unfortunately elliot discovered that dialogue is very expensive in the final zip file so i had to cut a lot of the planned lines there's a few things that elliot says he's really proud of in this game and these are some of them elliott says the first is my approach to canvas size this game is intended to look like a classic 2d pixel art game so i selected 480 480x270 as my desired display pixels then what i do is make the canvas element take up the full size of the browser and i select the smallest scale that would fill the canvas horizontally and vertically now i end up with a 2d context that was always roughly 480 by 270 but it might be less wide or tall depending on the browse dimension if you want to see what i'm describing try playing my game and dragging your browser window around to resize it you'll see that the ratio stays fixed and the scale will adjust it to give you as much playing real estate as possible while still looking nice i'm pretty happy with this and will likely keep the algorithm for my future games the second is the collision response this year i chose to simplify and use bounding circles instead of rectangles which meant i needed some math for the circle rectangle walls and circle circle player enemy collision detection i'm pretty proud of the result which is quite a bit of code but allows you to totally surrounded by multiple adjusting enemies and still push your way out of them all while looking about like you want it to look the same math applies to any moving object with a position and velocity which meant i accomplished what i could not last year another thing i tried and i'm happy with is breaking up logic into systems it's not for nc component system or anything but my upgrade loop now works in specific stages first behavior where the entity thinks then movement where velocity is applied and collision detection happens then damage damage queued up by the first two rounds is now applied to each entity potentially killing it last culled entities are cleaned up this made it easier to figure out where to put logic and helps keep the main game update function nice and clean i didn't want to mess around with the level editor so i used ask sprite to draw the map and then my gut build turns it into level data each room is color coded to represent a particular pattern number which controls the type and quantities of enemies in the room this wouldn't cut it if i had multiple tiles and entities and decorative objects to place but for this game it worked pretty well if you want to see more about this game please do check out the github below connection is a game made by federico tibaldo it is a pattern-based puzzle game connect the tiles on the board with your fingers and mouse to replicate the given combination or press the not bound button play through the levels to unlock the arcade mode and ultimately achieve the final trophy some feedback from the expert says dan sullivan really really enjoyed this first mode was a bit tough as was the 30 plus in arcade but otherwise a really really fantastic little puzzle reflex game i will not be going through the code for this game however if you want to have a look at how federico made this game in less than 13kb please do check out his github in the description below this video is read on behalf of marcus i am a software developer from nuremberg germany primarily i write apps for android and sometimes for other systems too a bit about the game and how you go through it my game is a short adventure game about two cosmonauts getting lost in space the player needs to find the way home by solving a couple of puzzles i chose cosmonauts because the story is about a secret escape drive and such things are more likely to be attributed to the mysterious early russian space program originally i had a much darker story in mind two cosmonauts on the way to venus one dies for unknown reasons the survivor fastens the dead man outside the capsule and is from then on haunted by mysterious happenings outside the window so essentially a ghost story in space but somehow the story did not really work and i focus on getting lost in the space thing instead which is really enough for an adventure in 13kb but the idea with the dream sequence still comes from the original story when asked what marcus was most proud of he says i'm afraid there isn't a snippet i am particularly proud of instead the challenge to make this game was to squeeze the graphics into 13kb and still have enough left for an adventure game so minimizing the size of the vector graphics was key to improve compression i only used integer coordinates on a 100 by 100 canvas to make doubles by doubles i mean doubles of coordinate numbers this way there were just a hundred possible coordinate numbers from 0 to 99 for all the vertices of all the graphics this code here this is the hull of the soyuz spaceship defined in just a few integer numbers that occurs later on and a lot of other shapes and since repetitive string patterns can be compressed very well i was able to pack all graphics and the game in 13kb this way thanks for watching my video and you can find me on twitter github or on my website these are all in the description below hi i'm sarah zamek i'm a web developer with a passion for graphics the web music and design for this year's js 13k competition i created a puzzle game heavily inspired by the puzzle system and paper mario the origami king the goal in my game is to create a symmetrical sequence of symbols by sliding and rotating them on top of that for each puzzle there's a time limit and a life system as you've seen the game takes place on what i'd like to call a roller coaster i'm going to talk about how i implemented it and how i got there pretty early on i decided that the puzzles should be solved while racing on an infinite track that goes left and right randomly but also very smoothly while working out how to approach this i quickly realized i may have been a bit too ambitious creating an infinite random track that feels also smooth isn't easy but then i had my first eureka moment needs to feel like it's infinite it doesn't have to be infinite i can just define a path that's super big and eventually loops back on itself what better way than to just define the parametric curve using sines and cosines i experimented a bit with sine and cosines and settled on this definition of the parametric curve however the rollercoaster is not just a curve every point also needs an orientation i need to know what's forward and what's up for every point forward this simple it's just the derivative of the parametric curve but what way is up well the curve loops around the origin so i guess i can just use this as the up vector alright well it works but as you can see it doesn't really feel quite right at least to me it doesn't but then after some dueling i have my second eureka moment second derivative now what if i use the second derivative as an up vector as you can see it's perfect and that's how i created the basis of a streamingly influenced smooth roller coaster hope you learned something we have now come to our last and final winner of the js 13k games 2020. feedback from the experts is this jupiter hardly says really impressive sound machine bjorn rizzo absolute genius i really look forward to seeing what people will be able to create with this is there already some place where people can share their creations and michelle mannering goes oh my god it's like scrabble great instructions good documentation and nice work thanking everyone this maybe is not so much a game as a platform to create musical creations using coach it also has some awesome demos of what you can make like for example the intro to mario i'm not going to go through the code for this one so simply enjoy okay so there we have it those were this year's winners for the js 13k games 2020. i really do hope this video has inspired you to go forth and create some games i mean it definitely inspired me i loved being a judge on it and i can't wait to see your submissions it doesn't matter if you're just running out doesn't matter if you've been doing this for years and the creativity that comes out of it is just so inspiring it's amazing i mean it's just mind-blowing so don't forget all the developers are in the description below if you want to check them out as well as their games and the source code to their games i'm also going to put a link to andrea's competition in the description and of course please do like and subscribe to this video and my own channel my youtube channel if you enjoyed this and would like to see more thanks very much and i'll see you soon

Channel: freeCodeCamp.org

Views: 48,010

Keywords:

Id: GKOgm5-GbUA

Length: 68min 39sec (4119 seconds)

Published: Thu Dec 31 2020