Making a HTML5 Game (web & mobile)

For discussions about game development that does not fit in any of the other topics.
Post Reply
User avatar
vitinho444
Posts: 2819
Joined: Mon Mar 21, 2011 4:54 pm

Making a HTML5 Game (web & mobile)

Post by vitinho444 »

Hey guys!!!

So I believe i said it a while ago, but i will say it again, I'm tired with Unity.. And 3D in general. I think I've jumped into 3D very fast, without much portfolio on the 2D section.

"Why go 2D once you 'master' 3D?" Well it's simple really, If you make a 3D Game people WILL hope for good graphics, and good graphics it's something I can't achieve right now, since I'm not the best modeler/texture creator/editor nor the best game designer really, so you know... But 2D is cool for paint graphics, because all it matters (most of it for me at least) is the gameplay. Graphics need to look somewhat pretty ofc, but it's secondary in my opinion.

So why did i created this post? Well i need some advice on where to move out next.
First let me tell you the type of game i would like to create.

It's just a simple time waster that tells the tale of "Why did the chicken crossed the road?". So you are the chicken, and in front of you, you have roads (2911 to be precise), Your goal is simple.. cross the road and find out why did the chicken crossed the road. Simple huh? Well, there is a "*" in here, where there's roads, there are cars, lots of cars, so this game is no exception. You need to cross the road and avoid the cars ofc.

Ok lets talk a little about game mechanics, i was thinking basic click/tap (for mobile porting) movement for the player, the cars AI would be as simple as me.x = -accel;

Here's the main game screen:
Image

So as you can see all you have to do is go up and avoid cars.

It's pretty much it, but also the car spawning will be completely random (maybe?).

Ok now that you have the game idea, what would you recommend to make this possible? I would like it to be played both on web and mobile devices (android at least) so a html5 engine with that feature would be awesome.
I have a ImpactJS license, but i don't think i can make this game with Impact. Since you need to make a level on the level editor, that discards the random stuff. And creating a map with 2911 sub-levels... you get the point right?

What do you recommend? Thanks in advance.
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Making a HTML5 Game (web & mobile)

Post by Jackolantern »

Of course it is possible with Impact! Impact is still Javascript, and JS is still a full programming language. If I remember right, I think some users have posted about generating tilemap arrays manually and sending them to Impact to be loaded, all dynamically while the game is running.

I can understand that tearing into the engine to figure it out may be rough, but random level generation is going to be some work in pretty much any engine.
The indelible lord of tl;dr
User avatar
vitinho444
Posts: 2819
Joined: Mon Mar 21, 2011 4:54 pm

Re: Making a HTML5 Game (web & mobile)

Post by vitinho444 »

Jackolantern wrote:Of course it is possible with Impact! Impact is still Javascript, and JS is still a full programming language. If I remember right, I think some users have posted about generating tilemap arrays manually and sending them to Impact to be loaded, all dynamically while the game is running.

I can understand that tearing into the engine to figure it out may be rough, but random level generation is going to be some work in pretty much any engine.
Unless you have to build it from 0 ahaha.
I was thinking in creating an array with the levels and spawn cars in a random level limited by (player.curLevel, player.curLevel + 4)

I would use Allegro to get back to c++ but i cant port to web nor mobile :(
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
hallsofvallhalla
Site Admin
Posts: 12023
Joined: Wed Apr 22, 2009 11:29 pm

Re: Making a HTML5 Game (web & mobile)

Post by hallsofvallhalla »

Yes a map in impact is just an array of numbers. I have loaded them back and forth and altered them from Nodejs.

Basically build your map like this

Road =
[0,0,1,0,0],
[0,0,1,0,0],
[0,0,1,0,0],
[0,0,1,0,0],
[0,0,1,0,0],

Cars =
[0,0,0,0,1],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,2,0,0],

1 equals a yellow car and 2 equals a red car, then next frame you change the map to
Cars =
[0,0,0,1,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,0,0],
[0,0,0,2,0],

so the cars are traveling.

you then loop through the arrays and put them to image and multiply the position of the array by so many pixels.
So each index in the array is say 20 pixels. So the yellow car is at 100px in the first array then second it is now at 80px.
User avatar
vitinho444
Posts: 2819
Joined: Mon Mar 21, 2011 4:54 pm

Re: Making a HTML5 Game (web & mobile)

Post by vitinho444 »

Wow halls thanks, but how can i put them into images in Impact?

Also, can't cars be entities just moving in the x pos?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Making a HTML5 Game (web & mobile)

Post by Jackolantern »

vitinho444 wrote:Wow halls thanks, but how can i put them into images in Impact?

Also, can't cars be entities just moving in the x pos?
These are just for the tilemaps. Entities that you actually interact with would be handled separately.
The indelible lord of tl;dr
User avatar
vitinho444
Posts: 2819
Joined: Mon Mar 21, 2011 4:54 pm

Re: Making a HTML5 Game (web & mobile)

Post by vitinho444 »

Yeah i know, but he mentioned a array for the cars too, but im thinking spawning them as entities and not as part of the map. So its easier to check for collisions.
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
User avatar
Jackolantern
Posts: 10891
Joined: Wed Jul 01, 2009 11:00 pm

Re: Making a HTML5 Game (web & mobile)

Post by Jackolantern »

vitinho444 wrote:Yeah i know, but he mentioned a array for the cars too, but im thinking spawning them as entities and not as part of the map. So its easier to check for collisions.
It probably just didn't hit him that those are entities and not part of the tilemap lol :)
The indelible lord of tl;dr
User avatar
hallsofvallhalla
Site Admin
Posts: 12023
Joined: Wed Apr 22, 2009 11:29 pm

Re: Making a HTML5 Game (web & mobile)

Post by hallsofvallhalla »

I was assuming we were just discussing the map system.

For the cars you take the pos.x and pos.y and do a math.ceil(this.pos.x / 32) where 32 equals your grid size. This gives you the index of the map array.

Since the cars are entities you do a ig.game.spawnEntity("EntityCar",posx, posy) or however it is done instead of creating the image
User avatar
vitinho444
Posts: 2819
Joined: Mon Mar 21, 2011 4:54 pm

Re: Making a HTML5 Game (web & mobile)

Post by vitinho444 »

Yeah halls, but how do you generate the image actually? :)

And what do i need to do in weltmeister in order to do the map with my arrays?
My Company Website: http://www.oryzhon.com

Skype: vpegas1234
Post Reply

Return to “General Development”