Вопросы Теги

#include - Xcode

Вот что я сейчас делаю: 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>untitled</title>
    <meta name="generator" content="TextMate http://macromates.com/">
    <style type="text/css" media="screen">

        body { font-family:"HelveticaNeue-Light"; margin: 0px; }
        input { width: 75%; }
    #wrap { background: #f1f1f1; border: 1px solid #d9d9d9;  padding: 0px; }

/*    #sprite { position: relative; background: #909090; width: 20px; height: 20px; padding: 20px; }*/
        #spriteChatBubble { position: relative; background: #fff; border: 1px solid #000; font-size: 10px; max-width: 200px; }

        #controlArea { margin-top: 50px; }

        .button { background: #fff; color: #0080ff; padding: 5px; border: 1px solid #0050ff; text-decoration: none; }
        .button:active { background: #0080ff; color: #fff; }

    </style>

    <script type="text/javascript" charset="utf-8">

        $(document).ready(function() {

            // on load
            updatePos();

            // get it ready

            $("#sprite").css("background-image", "url(left100by100.png)");



            // our main block

            function detectCollision() {


        var spritePos = $("#sprite").position();
        var spritePosLeft = spritePos.left;
        var spritePosTop = spritePos.top;

        var chunkPos = $("#chunk").position();
        var chunkPosLeft = chunkPos.left;
        var chunkPosTop = chunkPos.top;


        // show the chunk's position values (test)
        $("#posLeftChunk").text(posLeftChunk);

              if (spritePosLeft == chunkPosLeft || spritePosTop == chunkPosTop) {


          // make it go somewhere random! :D

                var randomLeft = Math.floor(Math.random() * 100);
                var randomTop = Math.floor(Math.random() * -100);

          // $("#chunk").hide();

                $("#chunk").css("top", randomTop + "px");
                $("#chunk").css("left", randomLeft + "px");


          // $("#spriteChatBubble").animate({"top": "-=" + randomTop}, "fast");

              }

            }

            setInterval(detectCollision, 500);


            function insertValues(name){

              var name = "foop";
              var spritePosition = $("#sprite").position();
              var leftVal = spritePosition.left;
              var topVal = spritePosition.top;

            }

            insertValues("");


            function showMessage(message) {

              $("#spriteChatBubble").show('slow');
              $("#messageText").text(message);
              $("#spriteChatBubble").delay(5000).hide('slow');

            }

            function updatePos() {

              var position = $("#sprite").position();
              $("#posLeft").text(position.left);
              $("#posTop").text(position.top);
              // updatePos();

              // insert the values into a database
              insertValues("");

            }



            $(document).keydown(function(ee) {

              $("#spriteChatBubble").hide();  // no need to show this!

              // if ($("#sprite").position.left < 0) {
              //           alert();
              //         }                           // fail

              if (ee.keyCode == 37) {

                // going left!

          $("#sprite").css("background-image", "url(left100by100.png)");
          // alert("going left!");

          $("#sprite").animate({"left": "-=50px"}, "fast");
          $("#spriteChatBubble").animate({"left": "-=50px"}, "fast");
          updatePos();
              } 

              if(ee.keyCode == 39) {

                // going right!

          $("#sprite").css("background-image", "url(right100by100.png)");
          // alert("going right!");

                $("#sprite").animate({"left": "+=50px"}, "fast");
                $("#spriteChatBubble").animate({"left": "+=50px"}, "fast");
          updatePos();
              }

              if(ee.keyCode == 38) {
                $("#sprite").animate({"top": "-=50px"}, "fast");
                $("#spriteChatBubble").animate({"top": "-=50px"}, "fast");
          updatePos();
              }

              if(ee.keyCode == 40) {
                $("#sprite").animate({"top": "+=50px"}, "fast");
                $("#spriteChatBubble").animate({"top": "+=50px"}, "fast");
          updatePos();
              }



            });

            $("#left").click(function() {
              $("#sprite").animate({"left": "-=50px"}, "fast");
         updatePos();
            });

            $("#right").click(function() {
              $("#sprite").animate({"left": "+=50px"}, "fast");
         updatePos();
            });

            $("#talkButton").click(function() {
              showMessage($("#speakField").val());
              $("#speakField").val("") ;
            });

        });




    </script>
    <!-- Date: 2011-05-23 -->
</head>
<body>

  <!-- <div id="spriteChatBubble">
      <a class="mt" id="messageText">message</a>
    </div> -->

  <!-- avatar (you, the player) -->

    <div id="sprite" style="position: relative; background: url('right100by100.png'); width: 100px; height: 100px;">

    </div>


  <!-- chunks -->

    <div id="chunk" style="position: relative; background: #909090; width: 20px; height: 5px; top: 100px; left: 80px;"></div>

    <div id="controlArea">

      position.left: <a id="posLeft">0</a><br>
    position.top: <a id="posTop">0</a><br>
    <br><br>
    position.left (chunk): <a id="posLeftChunk">0</a><br>
    position.top (chunk): <a id="posTopChunk">0</a><br>

      <!-- <input type="text" id="speakField" onchange="javascript:void(0);">
         <a href="javascript:void(0);" class="button" id="talkButton">talk!</a>
         <a href="javascript:void(0);" onclick="showMessage('foo');" class="button" id="">test it</a>

         <br><br>

        <a href="javascript:void(0);" class="button" id="left">(</a>
        <a href="javascript:void(0);" class="button" id="right">)</a>
         -->
    </div>


</body>
</html>

Которая перемещает его на 50 пикселей в желаемом направлении, однако обнаруживает столкновение div (спрайт попадает в" кусок " "), а затем его нужно переместить. Знаете ли вы, как лучше обнаружить столкновение блоков div? Спасибо.

5
задан Tim 8 May 2011 в 20:08
поделиться