Jump to content

2D Grid issue JavaScript Intel XDK


Recommended Posts

<!doctype html>
        <meta charset="UTF-8" />
        <title>M N B</title>
        <script src="js/phaser.js"></script>

    <script type="text/javascript">

    window.onload = function() {
        var width = window.screen.width;
        var availwidth = window.screen.availWidth;
        var height = window.screen.height;
        var availheight = window.screen.availHeight;
        var textStyle = { font: "20px Arial", fill: "#ffffff"};


        var game = new Phaser.Game(availwidth , availheight, Phaser.AUTO, '', { preload: preload, create: create, update: update });

        function preload () {
            //game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;


        function create () {            
            game.stage.backgroundColor = "000000";

            var graphics = game.add.graphics(0,0);

            var box_width = (availwidth/10)-5;
            var box_height = (availheight/10)-5;
            last_start = box_width*10;
            last_end = box_height*10;

            //draw vertical lines

            for(var i=0;i<=last_start;i+=box_width){

            //draw horizontal lines

            for(var j=0;j<=last_end;j+=box_height){

        function update(){






When I run the above code, and emulate it in Google Nexus 7 using Intel XDK, it does not show the last horizontal line (image below)

Screenshot (163).png

On the other hand, when I emulate it in Apple Ipad (image below), it shows the complete grid perfectly (even though I need to scroll down to see the last line)

Screenshot (164).png

Ques 1: Why is the above difference coming?

Ques 2: Why is there a scrollbar coming when I am scaling the content properly?

Thanks in advance.

Link to comment
Share on other sites

A couple of things: you don't need to put this code in an onload; Phaser handles that for you. Also, if your script is at the end of the document any element in the DOM that you depend on is definitely there by that point.

You're depending on the browser to tell you the size of your game world. There's a difference between the size of the window into your world and the size of your world. What kind of game are you making? Is that what you want?

If you're okay with that, take 8 pixels off the height and you'll probably be okay. If you don't scroll off the bottom you won't have a vertical scrollbar. If you don't have a vertical scrollbar, then you'll have enough horizontal space and you won't have a horizontal scrollbar. You'll still manage to cover the client area and the surfaces of those devices are black; no one's gonna notice 8 pixels on the bottom.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...