A simple game on html and control on the touchscreen

Now it is fashionable to make games on flash or on html 5. But it is useful to make a simple 2D game using plain html 4 and javascript for increasing experience and for fun.



To facilitate robots with javascript, we will use the jQuery library.



To begin with, let's make a field (block where the game will go), like this:

<div id="game_arena" style="width: 500px; height: 800px; background: #000">   </div> 

Now we make the block and player:

 <div id="player" style="height: 30px; width: 20px; background:   ; position: absolute"></div> 

Further, in the playing field we will make platforms on which the player will move. I did this:

 <div id="1" class="platform"></div> 

There is a block with a platform identifier and a class for styling.

CSS:

 .lplatform { height: 20px; background: #eee; border: 3px solid #dbdbdb; margin-bottom: 45px; } 

In the first platform we add a block and a player (div id = "player"), if necessary, so that the player appears in the fifth platform, we add a block in the fifth one.

Let's make several such platforms (at least 50) for creating 2D maps.

Now, we have a playing field and several platforms and a player on one of these platforms.



But we have no control ?! - add javascript'a and add life to the player.

')

Since the block with the player has absolute positioning, we introduce several variables with its coordinates relative to the edge of the platforms, as well as a variable and the number of the platform on which our “hero” is located:

 var left; //   var topm; //   var pln; //  left = 0; //        ,   0 topm = 35; //  35 -   pln = 0; //     

Next, we process keystrokes on the keyboard window.onkeyup = function (e) {}

And we process the numbers of the keys pressed, here is an example:

 window.onkeyup = function(e) { if ( event.keyCode == 37 ) { //   37() left = left-30; //      . $('#player').animate({ marginLeft: left }); //   } } 

Other keys can be processed in the same way (39 - to the right, 17 — cntrl).

So that our player can shoot, we put the handler for pressing CNTRL (or another button on the keyboard convenient for shooting), add a block with a laser (which is not displayed) into the player’s block and by pressing a button, the block with a laser will manifest.

Add a block with a laser to the block with a player, it will be released:

 <div id="player"><div id="lazer" style="width: 0px; display: none"></div></div> 

 if ( event.keyCode == 17 ) { //  cntrl $('#lazer').fadeIn(50); // ,      0px,    $('#lazer').animate({ width: '400px' }, 'slow'); //, -       $('#lazer').animate({ width: '0px' }, '0'); //  } 

Now ready simple shooting control.





Making the transition to platforms. The logic is as follows: if the indent from the left edge is greater than X, then the indentation from the top increases by 30 (pixels in real life), and the indent on the left becomes 0.

In code, it looks like this:

 if(left>450) { pln = pln+1; $('#pn').text('Platform: '+pln); $('#player').animate({ marginLeft: '0px' }, 0); topm = topm+70; left=0; 

In the same way, you can make other different handlers, you can make the jump (space number 32), do even somersaults (rotate from css3).

We adjust to the touchscreen

My idea of ​​controlling the process of the game is to click in different parts of the screen. To go to the right, you need to click on the right side of the screen, on the left - in the left part.

I made two identical blocks, one on the left, the other on the right. Both of them are transparent without any backgrounds. For each I put an action. Here is an example:

 <div id="goLeft" style="height: 100%; width: 200px; position: absolute;" onclick="left = left-30; $('#player').animate({ marginLeft: left });"></div> 

I think everything is clear. Here to the right:

 <div id="goRight" style="height: 100%; width: 250px; margin-left: 300px; position: absolute;" onclick="left = left+60; $('#player').animate({ marginLeft: left });"> 

Also, for shooting and jumping on touchscreens, I added buttons with a fixed position at the top. By clicking, the same action is performed as by clicking on the keyboard. Everything adapts to the screen.

I tried on the Nokia 5800 and HTC Desire, as well as on the iPad.



This is a simple game with simple controls. If you want to make enemies, some kind of gameplay, then be enthusiastic and do what you want. I gave a little basics.



A simple working example: here