Jump to content

[CSS][Angular JS] Squared lines - an arcade brick puzzle.

Recommended Posts

Hi, I wanted to show my first game html5 game.

It is written in angularJS and uses CSS for responsiveness.

It looks like that:


It has got:

webpage: http://squaredlines.com/

playstore page: https://play.google.com/store/apps/details?id=com.linessquared

and as I am posting it in Html5GameDev community, I made it available in the browser:  http://squaredlines.com/stratagemone/

on the page there is also twitter/facebook.

I wanted to write a game for like two years, since I like a game. Nine months ago I have been discussing media and mathematics with my friend. We were talking about cutting a binary chain (array of binaries) into pieces and reconstructing it. What happens when you represent the chain as line or surface, what happens with size of elements, limits on cutting etc.

I have done some experimenting and choose for the first game the most elementary from UX perspective - 2d blocks of binaries.

I did not know how to program almost at all, I have been skipping through this forum, I have learned some basic html/css (by writing a very primitive blog engine) I knew how to write in python but I did not know how to run python, I knew set theory and boolean logic, but I did not know what a console in web browser is etc.

 I decided to go for AngularJS/CSS combo. Then I have added HammerJS/AngularHammer for touch control. The font is open font Teko from Indian Foundry. For sound I use synth in webaudio.

Then, as I did not know about publishing games, I went for publishing it on Android.

To publish it I used cordova with:
cc.fovea.cordova.purchase 3.11.0 "Purchase"
cordova-plugin-admobpro 2.8.3 "AdMob Plugin Pro"
cordova-plugin-crosswalk-webview 1.2.0 "Crosswalk WebView Engine"
cordova-plugin-extension 1.1.4 "Cordova Plugin Extension"
cordova-plugin-globalization 1.0.1 "Globalization"
cordova-plugin-google-analytics 0.8.0 "Google Universal Analytics Plugin"
cordova-plugin-splashscreen 2.1.0 "Splashscreen"
cordova-plugin-whitelist 1.0.0 "Whitelist"/nl.x-services.plugins.socialsharing 4.3.19 "SocialSharing"

Crosswalk is very nice, it works only for 4.0+ but it makes it work there.

I think the game has got some problems which are hard to undo. For example control was previously meant for hoover. Hoover had been eliminated on mobile for long. After rewritting hoover mechanic in touch control it is not perfect on mobile and it is not perfect on desktop.
Tutorial has some issues, including the fact that it is not working in game engine, it is more of a separate interactive animation.

Combo system is too clever for its own good - almost nobody gets it.
Bonus/overflow system also is overcomplicated.

In the end one may say there are too many game mechanics/no visible progression.
I like it anyway.

The single biggest problems in development was lack of knowledge about the tools. I did not know that there is a console in the browser/which text editor to get, its role (I use Brackets)/basic commands and package system - npm / git usage, cmd for windows etc.

I have learned a lot and I am thinking about making the last, final version by modifying my js13k entry, which was written for scratch and has got better controls, and rewriting it in panda. I want to keep the resizing from css by writing it myself and I want it to be my first linted code. Then I want to do some game jams using html5. js13k was a lot of fun.

If you could tell what would you do to improve on the game / or maybe havegot some idea for distribution, I would be glad to listen.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    No registered users viewing this page.

  • Create New...