Friday, August 17, 2012

Scrolling Background: Some Explanations


Scrolling background

I created a canvas with coloured background. Below is the CSS:

     canvas {
                position:fixed;
                left:0px;
                top:0px;
                background:#B1EDE7;
            }


This is one of the background that I used.

Using JavaScript, I drew the same background twice. The first one is placed on the canvas, and the other one is placed just outside the canvas.

When one of the background has moved outside the canvas (x <= 3 - room_width), it will be transferred back to x = 320, which is the width of the canvas. (I am used to Game Maker. That's why the variable is named as "room_width")


                //make the background scrolling - bgbukit
                if (bgbukit_x <= 3 - room_width) {
                    bgbukit_x = room_width;
                    ctx.drawImage(bg, bgbukit_x, y);
                } else {
                    ctx.drawImage(bg, bgbukit_x, y);
                }
                bgbukit_x += bgbukit_hspeed;
                if (bgbukit2_x <= 3 - room_width) {
                    bgbukit2_x = room_width;
                    ctx.drawImage(bg, bgbukit2_x, y);
                } else {
                    ctx.drawImage(bg, bgbukit2_x, y);
                }
                bgbukit2_x += bgbukit_hspeed;
                y += dy;


- "bukit" is a Malay word for hill :-)

Scrolling Background in HTML5

My attempt to create a scrolling background using HTML canvas. Check it out!

Saturday, August 4, 2012

Decimal to Binary Converter

Apart from converting to binary, it can also convert to one's complement and two's complement. Try it! 
(Make sure JavaScript is enabled for your browser)


[EDIT (13th Aug 2013): now it is hosted on Google Drive]

Just Jump - My GMC Jam #7 Entry


This is my entry for Game Maker Community Jam #7. It is unfinished but still playable with 6 levels. Made in less than 24 hours.

GIVE IT A TRY!