Drag and Drop Code for Mobile Game

20 December 2015 - 1 answer

I have a drag and drop feature for my mobile game. Here it is:

https://jsfiddle.net/elchininet/otw3pw13/4/

Unfortunately, I have no idea what's going wrong inside my actual source code.

I think it might be because of all of the libraries I have? I'm new to app making and JavaScript. Here is my code:

HTML

<!DOCTYPE html>
<html>
<head>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset = "utf-8">
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <link rel="stylesheet" target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

</head>
<body>
    <div data-role="page" id="pageone">

    <div data-role="popup" id="myPopup2" class="photopopup" data-overlay-theme="a" data-corners="false" data-tolerance="30,15    ">
        <a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-btn-a ui-icon-delete ui-btn-icon-notext ui-btn-right">Close</a><img src="http://s1.postimg.org/ljwm4953z/Screen_Shot_2015_12_12_at_10_45_52_PM.png" alt="Photo     portrait">

        </div>

        <div data-role="main" class="ui-content">

            <div data-role="header" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><button onclick="location.reload(true)" class ="ui-btn-b">New Pizzas!</button></li>
                    <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#myPopup2" data-rel="popup" data-position-to="window" class="ui-btn ui-btn-b ui-corner-all     ui-shadow ui-btn-inline">How To Play</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->
            <div data-role="footer" data-id="foo1" data-position="fixed">
                <div data-role="navbar">
                    <ul>
                        <li><a target="_blank" rel="nofollow noreferrer" target="_blank" rel="nofollow noreferrer" href="#pageone" class="ui-btn ui-btn-b ui-icon-home ui-btn-icon-left">Home</a></li>
                    </ul>
                </div><!-- /navbar -->
            </div><!-- /footer -->
            <div id="slices">

            </div>

            <div id="options">
                <div data-index="1">1</div>
                <div data-index="2">2</div>
                <div data-index="3">3</div>
                <div data-index="4">4</div>
                <div data-index="5">5</div>
                <div data-index="6">6</div>
                <div data-index="7">7</div>
                <div data-index="8">8</div>
            </div>

            <div id="area">
                drop area
            </div>

            <p><img src="http://s24.postimg.org/j2ynvi0s1/Plus_Orange1.png;"></p>

        </div>

    </div>

</body>
</html>

CSS

#options div{
    background:#666;
    color: #FFF;
    display: inline-block !important;
    height: 50px;
    line-height: 50px;
    text-align: center;
    vertical-align: top;
    width: 50px;
}

#slices img{ 
    display: inline-block;
    height: 30px;
}

#area{
    background: #CCC;
    border: 1px solid #666;
    margin-top: 20px;
    height: 200px;
    width: 200px;
}

JavaScript

$( document ).on( "pagecreate", function() {
    $( ".photopopup" ).on({
        popupbeforeposition: function() {
            var maxHeight = $( window ).height() - 60 + "px";
            $( ".photopopup img" ).css( "max-height", maxHeight );
        }
    });
});

var slices = $("#slices");
var options = $("#options");
var area = $("#area");

var selected;
var result;

//---Array of images
var pizzas = [
{image: "http://s23.postimg.org/6yojml8vb/Pizza_One.png", value: 1},
{image: "http://s13.postimg.org/5d8zxnb2b/pizzatwo.png", value: 2},
{image: "http://s12.postimg.org/xfsxldqyx/pizzathree.png", value: 3},
{image: "http://s14.postimg.org/d6tdq0865/pizzafour.png", value: 4}
];
var total = pizzas.length;

//---Make boxes dragables
options.find("div").draggable();

//---When the boxes are dropped
area.droppable({

    drop: function(event, ui){

        console.log("yes");

        if( Number( ui.draggable.attr("data-index") ) == result ){

            alert("correct");

        }else{

            alert("incorrect");

        }

    }

});

//---Insert random pizza slices
function insertPizzas(){

    selected = [];
    result = 0;

//---Generate aleatory pieces
var rand

while(selected.length < 2){

//---Random value
rand = Math.floor( Math.random() * total );

//---Sum result
result += pizzas[rand].value;

selected.push( rand );

}

//---Clear the slices
slices.html("");

//---Add the new slices
selected.forEach(function(number){

    var img = $("<img/>");

    img.attr("src", pizzas[number].image);

    slices.append(img);

});

}

insertPizzas();

Answer

By your comments I see that you are testing your project locally. Use a local server to test your project. Do not open the HTML directly in your browser from the filesystem. Try with Xampp or Wampp.

By the other hand, put the jQuery code inside a document ready event.

$(document).on("ready", function(){

    //--- Put the jQuery code here

}

Here you have your code (with the document ready event) running from an web server:

source: stackoverflow.com

← Previous Post

Drag and Drop Code for Mobile Game

20 December 2015 - 1 answer

Answer

Related Questions