jQuery Kollision

Habe ich dieses Spiel ich bin das schreiben mit der jQuery-Kollision, und es nutzt Tastatur-Tasten zu bewegen, ein div, wenn ein div ein anderes berührt div, es soll verhindern, dass überlappende.

Wie auf der Erde mache ich das?

HTML - - - - - 

<!DOCTYPE html>
<html>
<head>
    <title></title>

    <link href="style.css" rel="stylesheet" />

    <script src="jquery.min.js" rel="javascript"></script>
    <script src="game.js" rel="javascript"></script>
    <script src="jquery-collision-1.0.1.js" rel="javascript"></script>
    <script src="jquery-ui-draggable-collision-1.0.1.js" rel="javascript"></script>

</head>
<body>

<div id="office">

    <div class="popup">
        <p>hello desk</p>
        <a class="close">X</a>
    </div>

    <div class="chris"></div>

    <!--Rian, Peter, Chris, Christopher ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 50px;">

        <div class="christopher-stuff"></div>

    </div>

    <!--Adrian, Tatam, Ellize ---------------- DESK -->
    <div class="desk-full" style="position: absolute; right: 50px; top: 300px;">

    </div>

</div>

</body>
</html>

JAVASCRIPT - - - - -

$(document).ready(function(){

$(".chris").click(function(){

var KEY = {
    UP: 38,
    DOWN: 40,
    LEFT: 37,
    RIGHT: 39
}

//a global object to store all global variable used for the game
var office = {
}

//an array to remember which key is pressed and which is not.
office.pressedKeys = [];

$(function(){
    //set interval to call gameloop every 30 milliseconds
    office.timer = setInterval(gameloop,30);

    //mark down what key is down and up into an array called "pressedKeys"
    $(document).keydown(function(e){
        office.pressedKeys[e.keyCode] = true;
    });
    $(document).keyup(function(e){
        office.pressedKeys[e.keyCode] = false;
    });
});

//this function is called every 30 milliseconds 
function gameloop()
{
    moveMe();
    collideDetection();
}

function moveMe()
{  

    if (office.pressedKeys[KEY.UP]) //arrow up
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
                top: direction-5,
                background: "url(chris-top.gif) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
    if (office.pressedKeys[KEY.DOWN]) //arrow down
    {
        var direction = parseInt($(".chris").css("top"));
        $(".chris").css({
            top: direction+5,
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
            });
    }
    if (office.pressedKeys[KEY.LEFT]) //left
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction-5,
            background: "url(chris-left.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });
    }
    if (office.pressedKeys[KEY.RIGHT]) //right
    {
        var direction = parseInt($(".chris").css("left"));
        $(".chris").css({
            left: direction+5,
            background: "url(chris-right.gif) no-repeat !important",
            width: "43px",
            height: "44px"
            });         
    }



        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.RIGHT]) //arrow up
    {
        $(".chris").css({
                background: "url(chris-top-right.png) no-repeat left top !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.UP] & office.pressedKeys[KEY.LEFT]) //arrow up
    {
        $(".chris").css({
                background: "url(chris-top-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            }); 
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.RIGHT]) //arrow down
    {
        $(".chris").css({
                background: "url(chris-down-right.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    }
        if (office.pressedKeys[KEY.DOWN] & office.pressedKeys[KEY.LEFT]) //arrow down
    {
        $(".chris").css({
                background: "url(chris-down-left.png) no-repeat !important",
                width: "43px",
                height: "44px"
            });
    } 
}

function collideDetection(){
    var chrisY = parseInt($(".chris").css("top"));
    var chrisX = parseInt($(".chris").css("left"));

    var chrisY = chrisY + 50;
    var chrisX = chrisX + 50;

    //-------------------- jQuery Collision Dtection and Prevention of Overlapping ---------------------
    var hit_list = $(".chris").collision( { obstacle: ".desk-full", preventCollision: true } );

    var officeHeight = parseInt($("#office").height());
    var officeWidth = parseInt($("#office").width());

    if(shipX <= 0) {
        $(".chris").css({
            left: "0",
            background: "url(chris-right.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX > officeWidth) {
        $(".chris").css({
            left: "0px",
            background: "url(chris-left.png) no-repeat !important",
            width: "25px",
            height: "48px"
        }); 
        }

    if(chrisX <= 0) {
        $(".chris").css({
            top: "0",
            background: "url(chris-down.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }

    if(chrisY > officeHeight) {
        $(".chris").css({
            top: "0px",
            background: "url(chris-up.png) no-repeat !important",
            width: "48px",
            height: "25px"
        }); 
        }
}

});    
});

InformationsquelleAutor Christopher | 2012-02-22

Schreibe einen Kommentar