Game Experiment

An experiment to see if I can get a player to move and interact correctly from user controls/mouse movement as if in a 2d over-the-top shooter. NOTE: NOT CROSS BROWSER COMPATIBLE JUST YET!

by Joe Mottershaw

HTML

<script src="http://www.hellowebdesign.co.uk/jquery.collision.js" type="text/javascript"></script>

<div id="map"><div id="obstacle"></div></div>

CSS

#map {
    width: 600px;
    height: 300px;
    background: rgb(185,185,255);
    border: 1px solid rgb(0,0,0);
    margin: 20px;
    position: absolute;
    top: 50%;
    left: 50%;
    bottom: 0;
    margin-top: -150px;
    margin-left: -300px;
}

#map:hover {
    cursor: crosshair;
}

#player {
    width: 20px;
    height: 20px;
    position: absolute;
}



#obstacle {
    width: 50px;
    height: 50px;
    background: #000;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -25px;
    margin-top: 25px;
}

JavaScript

// Global Variables
var playerHealth = 12;
var playerSpeed = Math.ceil(playerHealth / 4);

var keys = {};


// Setup Map And Fetch Player Positions/Boundries For Later
$("#map").append('<img src="http://i53.tinypic.com/nnjv9x.png" id="player" alt="" />');

var mapWidth = $("#map").width();
var mapHeight = $("#map").height();

var playerWidth = $("#player").width();
var playerHeight = $("#player").height();

var playerStartPosTop = $("#player").css("marginTop").replace("px", "");
var playerStartPosLeft = $("#player").css("marginLeft").replace("px", "");
var playerEndPosRight = mapWidth - playerWidth;
var playerEndPosBottom = mapHeight - playerHeight;


// Player Movement
$(this).stop(true, false).keydown(function(e) {
    keys[e.which] = true;
    keypressed(keys);
});

$(this).keyup(function(e) {
    delete keys[e.which];
});

function keypressed() {

    for (var key in keys) {

        var key_W = 87;
        var key_w = 119;
        var key_D = 68;
        var key_d = 100;
        var key_S = 83;
        var key_s = 115;
        var key_A = 65;
        var key_a = 97;

        if (key == key_W || key == key_w) { // Player Up
            var playerCurrentPosTop = $("#player").css("marginTop").replace("px", "");

            if (playerCurrentPosTop > playerStartPosTop) {

                $("#player").stop(true, false).animate({
                    marginTop: '-=' + playerSpeed + ''
                }, 0, function() {
                    $("#player").empty();
                });

                if ($("#player").collision("#obstacle")) {
                    $("#obstacle").remove()
                }

            }
        }

        if (key == key_D || key == key_d) { // Player Right
            var playerCurrentPosLeft = $("#player").css("marginLeft").replace("px", "");

            if (playerCurrentPosLeft < playerEndPosRight) {

                $("#player").stop(true, false).animate({
                    marginLeft: '+=' + playerSpeed + ''
                }, 0,...