beancoder

2D Grid issue JavaScript Intel XDK

Recommended Posts

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

    <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;
            game.load.image('red','assets/red.png');
            game.load.image('green','assets/green.png');

        }


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

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

            graphics.lineStyle(1,0xffffff,1);
            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){
                graphics.moveTo(i,0);
                graphics.lineTo(i,last_end);
            }

            //draw horizontal lines

            for(var j=0;j<=last_end;j+=box_height){
                graphics.moveTo(0,j);
                graphics.lineTo(last_start,j);
            }    
        }


        function update(){

        }

    };

    </script>

    </body>
</html>

 

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.