dzkb / html5-8bit Goto Github PK

$(document).ready(function() {
    // Canvas stuff
    var canvas = $("#chooser")[0];
    var ctx = canvas.getContext("2d");
    ctx.canvas.width = $(window).width(); // Resize canvas
    ctx.canvas.height = $(window).height();
    var w = $("#chooser").width();
    var h = $("#chooser").height();

    // constants
    var BLOCK_SIZE = 32;
    var ENTRANCE_W = 64;
    var ENTRANCE_H = 96;

    // variables
    var w_inside = w - 2*BLOCK_SIZE;
    var h_inside = h - 2*BLOCK_SIZE;

    // Mario's data
    mario = {
        //# position, moving speed
        x: BLOCK_SIZE,
        y: (h-3*BLOCK_SIZE),
        mSpeed: {
            x: 0,
            y: 0
        },

        //# other vars
        jump_height: 24,
        jumping: false,

        //# functions
        process: function() {
            //# Controls
            // left, right
            if (key_pressed[37]) {
                if (mario.mSpeed.x > -8) mario.mSpeed.x -= 2;
            }
            if (key_pressed[39]) {
                if (mario.mSpeed.x < 8) mario.mSpeed.x += 2;
            }
            // jump
            if (key_pressed[38]) {
                if ( (! mario.jumping) && (mario.mSpeed.y == 0) ) {
                    mario.jumping = true;
                    mario.mSpeed.y = -mario.jump_height;
                }
            }

            //# position
            // left, right
            if (mario.mSpeed.x != 0) {
                if ( (mario.x + mario.mSpeed.x >= BLOCK_SIZE) && (mario.x + mario.mSpeed.x <= w-2*BLOCK_SIZE) ) mario.x += mario.mSpeed.x;
                if (mario.mSpeed.x < 0){
                    mario.mSpeed.x += 1;
                }else{
                    mario.mSpeed.x -= 1;
                }
            }
            // jump
            if (mario.jumping) {
                if (mario.mSpeed.y < 0) {
                    if (mario.y - mario.jump_height + mario.mSpeed.y >= 32) mario.y -= mario.jump_height + mario.mSpeed.y;
                    mario.mSpeed.y += 2;
                }else{
                    mario.jumping = false;
                    mario.mSpeed.y = mario.jump_height;
                }
            }else /* falling */ if (mario.y < h-3*BLOCK_SIZE) {
                mario.y += mario.mSpeed.y;
                if (mario.y > (h-3*BLOCK_SIZE)) mario.y = h-3*BLOCK_SIZE;
                if (mario.mSpeed.y < mario.jump_height) {
                    mario.mSpeed.y += 1;
                } else {
                    mario.mSpeed.y -= 1;
                }
            }else{
                mario.mSpeed.y = 0;
            }
        }
    };

    function init(){
        ctx.fillStyle = "#000000";
        ctx.fillRect(0,0,w,h);
        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(process, 30); // I have no idea what I'm doing...
    }

    function process(){ // all operations
        mario.process();
        paint();
    }

    function paint(){ // drawing
        // clear canvas
        ctx.fillStyle = "#000000";
        ctx.fillRect(0,0,w,h);

        // 1. Background
        for (var i=1;i<((h-2*BLOCK_SIZE)/BLOCK_SIZE);i++) { // h-a*x, x=block size (eg. 32x32), a=number of blocks to ommit
            ctx.drawImage(wall,0,i*BLOCK_SIZE); // Left vertical wall
            ctx.drawImage(wall,w-BLOCK_SIZE,i*BLOCK_SIZE); // Right vertical wall
        }
        for (var i=1; i<4; i++) {
            ctx.drawImage(entrance,((i/4)*w)-(ENTRANCE_W/2),h-2*BLOCK_SIZE-ENTRANCE_H); // Entrances
        }
        for (var i=0;i<w/BLOCK_SIZE;i++) {
            ctx.drawImage(wall,i*BLOCK_SIZE,BLOCK_SIZE); // Top horizontal wall
            for (var j=1; j<3; j++)
                ctx.drawImage(floor,i*BLOCK_SIZE,h-j*BLOCK_SIZE); // Floor // h-a*x, x=block size (eg. 32x32), a=number of blocks to ommit
        }
        // 2. TXT & other


        // 3. Mario
        ctx.drawImage(tiles, 0, 0, BLOCK_SIZE, BLOCK_SIZE, mario.x, mario.y, 32,32); // Drawing Mario

    }

    // INIT CONTROLS
    var key_pressed = {};

    window.addEventListener('keydown',onKeyDown,true);
    window.addEventListener('keyup',onKeyUp,true);

    function onKeyDown(evt){
        key_pressed[evt.keyCode] = true;
    }
    function onKeyUp(evt){
        key_pressed[evt.keyCode] = false;
    }

    init(); // wywolanie init + uruchomienie loopa na samym końcu zawsze dawaj
});