Snake Enemy

It's been too long since I did anything on here. I guess I can call it a vacation, haha.

Anyway, I was able to add a snake enemy to level 2, which brings the count up to 4. It has a different collision detection than the player so it can detect if it is not over a block so it can turn around.

I also changed the created blocks to be their own entities instead of with the regular blocks. This now allows me to "destroy" the blocks when an enemy (snake) collides with one.

This exercise has also reminded me the value of creating objects with null. I was able to handle whether a snake was created or not using this handy little value.

Levels and Block Count

Finally got around to adding actual levels and a block count. I have three levels set up with a completion screen after each level. The levels automatically transition thanks to a setTimeout call. The final level has a different completion screen to tell the player that they have won.

The game also now has a block count. You have 10 blocks to get through each level. This should be more than enough to get to the diamond.If the player runs out of blocks, they can easily reset level to gain back all their blocks.

Level Design

I got the basics of the game complete so far. I have an objective to collect the diamond, movement, and way of game over by hitting the spikes done.

All I had to do was add the diamond and spikes with collision. Collision is all handled by the below JavaScript function.

function overlapTest(a, b) {

    return a.x < b.x + b.w && a.x + a.w > b.x &&

         a.y < b.y + b.h && a.y + a.h > b.y

}

Mobile Success

I got my buttons working on select mobile devices. I tested it on iOS on Safari and Chrome and on Android on the default browser and Chrome. The Android experience was slow, but my test was on an HP Touchpad running Cyanogenmod so I assume it is the hardware/software combination that caused it to be slow since it ran perfectly on my iPhone 5. Since I have all the basic mechanics done, I will be able to start on actual level design and eventually add in enemies.


Here is the basic code for anyone interested:

var j = document.getElementById('jump');

j.addEventListener('touchstart', function(event){ jump(event,true); }, false);
j.addEventListener('touchend', function(event){ jump(event,false); }, false);

function jump(e,bool) {
    if(e.target.localName != 'select'){
        e.preventDefault();
    }
    direction.up= bool;
}

I get the DOM element for the button and set a 'touchstart' and 'touchend' event that calls a function. This function overrides the default highlighting that mobile devices do while the person holds there finger over an element. I then set the direction.up variable to true or false depending on whether it was a start or end event. The player jumps constantly while direction.up is true. This does lead to a problem is a user does not make the touchend event occur, but I will worry about that later. And that is how a button can be done with touch :D