Tag Archives: HTML/CSS/JS

A Game Engine From Scratch In JavaScript Part 4 – Editor & Debugger

View post on imgur.com

The editor serves as a live debugger and allows modifying the game objects in real-time. These are canvas sprites we’re talking about, not DOM elements. While this is still a work in progress, I wanted to share a screen capture so you can see how it might end up looking. The next screen capture shows some live editing capabilities.

Continue reading

A Game Engine From Scratch in JavaScript Part 3 – Breakout

I wanted to make sure this engine would be comparable or maybe even easier to use than some of the other engines out there, with the ability to build a variety of game types and not just the game I was hoping to build. For this, I decided to go with Breakouts, which is a website that aims to help other developers compare and choose a game engine. So here’s my attempt…

It’s a work in progress, please check back soon for the full article:

View post on imgur.com

This GIF was recorded at 20 FPS; the game runs at 60.

Working: sound effects, level progression, game states, mouse/keyboard input, collision (a bit buggy), ball-bounce physics (a bit crude), sprites, spritesheets, sprite animations, rendering layers, async module/asset loader, fixed timestep. These are all provided by the core engine.

Not Working: power-ups, variable timestep, improved physics.

Continue reading

A Game Engine From Scratch In JavaScript Part 2 – Physics

About 1-2 weeks ago I decided to make a game engine in my spare time. The most challenging aspect so far has been the handling of physics – how objects in the game behave when they collide.

I was able to get a few collision prototypes working. Here’s what the first prototype looks like, it could handle many moving objects, but the accuracy wasn’t perfect:

View post on imgur.com

Disclaimer: I do not own the graphics depicted in this article, nor do I have permission to use them in a commercial product. The graphics were found using Google Image search, and they are being used here solely for showcasing the engine’s capabilities and progress. The tree sprites are from Here Be Monsters, and the player/wolf sprites are from Ragnarok Online.

What you’re seeing in the screen capture above is a bunch of objects (wolf sprites) being spawned with a “roam” AI package, which just makes the objects move around. This AI package idea will be expanded upon later, but it’s kind of how Skyrim AI works, mixed with Final Fantasy XII Gambits – interchangeable and override-able behavior stacks for different scenarios.

(The screen capture above doesn’t reflect 60 FPS due to gif recording at the time. It’s also a .gifv image hosted by Imgur, my apology if the buffering is choppy…)

Continue reading

How to Make a Star Rating Widget – jQuery vs ReactJS vs AngularJS vs Polymer

I found a Quora article by ReactJS lead developer Pete Hunt which compares a Star Rating Widget built identically in AngularJS and ReactJS. Since I was wondering what a similar jQuery version might look like, and since I’ve done a few of these widgets before (see Rapid Platform’s ‘Choice’ component), I decided to build a lightweight jQuery version of this Star Rating Widget for comparison. Feel free to use the Star Rating Widget code in this article for your own projects.

Touch it, you know you want to:

First up, the HTML where our bare minimum template "myrating" lives...

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script>
        <script type="text/javascript" src="rating.js"></script>
    </head>
    <body>
        <div id="myrating">
            <span class="star" style="cursor:pointer;">&#9733;</span>
        </div>
    </body>
</html>

Next we have rating.js, where the jQuery component lives...

Continue reading

Mist – Alpha Preview 1

Yet another project I’m working on…

Screenshot of the Edit menu, for real-time editing of meta-data, somewhat resembling a CMS:

mist1

Continue reading

Choices & Chances – A Choose Your Own Adventure Platform

Yet another project I’m working on…

Continue reading

Rapid.js – A Write Once, Run Anywhere Framework for Single Page Apps

rapidjsRapid.js is a Javascript framework in development for the Rapid Platform. Currently, Rapid Platform is provided via a WordPress theme/plugin, but this library will aid in the transition over to a pure Javascript architecture that can be utilized in any solution – not just WordPress – while still providing all of the same benefits as well as opening up the possibility for greater things.

Our goal is to shrink the development workflow as much as possible without sacrificing functionality, or introducing custom syntax, overzealous patterns and extra steps into the process.

Visit the Github repo for progress and details.

Cascading Asynchronous Javascript and HTML (AJAH) Regions

This blog post is a snippet from my Cascading Asynchronous Javascript and HTML (AJAH) Regions sketch that was recently published to Google Drive.

cascading-async-regions Continue reading