DEV Community

loading...
Cover image for Experiments with A-Frame and Javascript Games - Chase the cats and CubeGen.

Experiments with A-Frame and Javascript Games - Chase the cats and CubeGen.

drnoir profile image Chris Godber ・2 min read

I have been exploring using AFrame and vanilla javascript a lot more in the last week to create simple game like experiences. I like A-Frame ease of use and though I think in some ways it can be hard to make something that feels 'polished' with it, for purely experimental fun little side project like these two it can be nice and simple to try out ideas with it. What promoted these two random games was in fact randomness! So I have been playing a bit with generating elements of a level in games for the last 6 months, mostly on playcanvas projects, and looking more into procedural generation, and wanted to apply this in a simple setting. I started as simple as it can get - generating a random numbers of cubes!

CubeGen

CubeGen is a simple game whereby you have to find the white cubes from a randomly generated amount of cubes with a shimmering texture look to them. In the first version of the game I just created it on a typical plane with no walls, and the player had to push through the boxes to find the correct one, but it felt like it lacked a certain dynamic to make it more interesting.

So after a day or two I decided to really start playing with the A-Frame physics system component some more, figured out how to create a fly cam which worked with collisions etc and put it in zero gravity. I go into it more in the video below but the actual code is fairly simple - Do some DOM manipulation with js combined with utilising A-Frames component system to detect collision event and then a fair amount of for loops to create the 'random' cubes to the game area. There is more info below along with an overview on the original prototype if you are interested.

Overviews on CubeGen conception

Final Game

Source:

GitHub logo drnoir / find-the-boxes-gen

Small experimental game made with AFrame and JS - find all the white boxes amongst the randomly generated boxes

CubeGen

by Chris Godber

alt text

Game Aim

Find the white boxes

Experimental A-Frame project / game using AFrame, AFrame physics component / vanilla js to create a fun arcade style game.

The player has to collect all the white boxes before the timer runs out The amount of boxes is generated randomly each turn out of 200.




Play:

https://drnoir.itch.io/cubegen

After I made CubeGen I wanted to extend the idea a little further and make something a little different so I of course opted for cats! Much of the code and logic was copied from the CodeGen project but the main difference was trying to create random movement for the cats which was sort of implemented but needs some refining and fixing still. There is a more in-depth overview below.

Overview of Chase the Cats

Source:

GitHub logo drnoir / chasethecats

Another experiment in creating random generated stuff in A-Fame- catch the cats in a randomly generated enviroment

Chase the Cats

alt text

Experiment with A-Frame by Chris Godber

Funny little experiment with A-Frame and randomness, building on CubeGen project I wanted to create something a bit more zany and to experiment somewhat more with environment generation.

In this project mountains and trees are generated, and a random number of cats (up to 40) which the player then has to catch.

This was made for fun, feel free to fork, build on it, look at it, poke around etc etc

Might work on it again sometime but as I said weird little experiment. It could certainly be made more of a 'game'

Controls

  • WASD - Move
  • Mouse - Look around

Libraries / Dependencies

  • A-Frame
  • A-Frame Extras
  • A-Frame Physics System
  • A-Frame Mountains Component
  • A-Frame Simple Sun Sky

Game logic etc is contained in main.js, everything else is just minified js for each dependency




Discussion (0)

pic
Editor guide