Javascript HTML -- nothing displays and not sure where I've gone wrong in my code

Question

0.00/5 (No votes)

See more:

hi, i'm making an object (box4) in my code move, but in doing so my program now displays nothing (simple white screen). can anyone see anything obviously wrong in my code? i apologize profusely if this is rude.

my html document:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <canvas id="canvas" width="600" height="600"></canvas>
    <script src="sprites/box.js"></script>
    <script src="sprites/box2.js"></script>
    <script src="sprites/box3.js"></script>
	<script src="sprites/box4.js"></script>
    <script src="sprites/arrow.js"></script>
    <script src="classes/keycode.js"></script>
    <script>
        window.onload = function () {
            setInterval(update, 1000 / 30);
            var canvas = document.getElementById('canvas'),
                context = canvas.getContext('2d'),
                arrow = new Arrow(),
                box = new Box();
            box2 = new Box2();
            box3 = new Box3();
            box4 = new Box4();
            holdLeft = holdRight = false;
            box.X = 80;
            box.Y = 40;
            box2.X = 80;
            box2.Y = 40;
            box3.X = 150;
            box3.Y = 150;
            box4.X = 200;
            box4.Y = 200;
            arrow.X = 300;
            arrow.Y = 300;

            function update() {
                if (holdLeft) {
                    box4.VX = -4;
                }
                if (holdRight) {
                    box4.VX = 4;
                }
                box4.PX += box4.VX;
                box4.PY += Box4.VY;
                if (box4.ONG) {
                    box4.VX *= 0.8;
                } else {
                    box4.VY += box4.GRAV;
                }
            }

            function update() {
                if (holdLeft) {
                    box4.VX = -4;
                }
                if (holdRight) {
                    box4.VX = 4;
                }
                box4.PX += box4.VX;
                box4.PY += box4.VY;
                if (onG) {
                    box4.VX *= 0.8;
                } else {
                    box4.VY += box4.GRAV;
                }

                function KeyboardEventHandler(event) {
                    if (event.keyCode == keycode.LEFT) {
                        holdLeft = true;
                    }
                    //if the left arrow is pressed
                    if (event.keyCode == keycode.RIGHT) {
                        holdRight = true;
                    }
                    //if the right arrow is pressed
                    if (event.keyCode == keycode.UP) {
                        if(yv<-3) {
                            yv=-3;
                    }
                    //if the down arrow is pressed
                    if (event.keyCode == keycode.DOWN) {
                       //do nothing at the moment
                    }
                }

                window.addEventListener('keydown', KeyboardEventHandler, false);

                drawFrame();

                function drawFrame() {
                    //clear the canvas
                    context.clearRect(0, 0, canvas.width, canvas.height);
                    //increase the y posn by the y velocity
                    box.Y += box.VY;
                    //increase the x posn by the x velocity
                    box.X += box.VX;
                    //increase the y posn by the y velocity
                    box2.Y += box2.VY;
                    //increase the x posn by the x velocity
                    box2.X += box2.VX;
                    //increase the y posn by the y velocity
                    box3.Y += box3.VY;
                    //increase the x posn by the x velocity
                    box3.X += box3.VX;


                    //if the box hits the canvas top bottom edge
                    if (box.Y - box.Size < 0 | box.Y + box.Size > canvas.height) {
                        //reverse the y velocity
                        box.VY = -box.VY;
                    }
                    //if the box hits the canvas left or right
                    if (box.X - box.Size < 0 | box.X + box.Size > canvas.width) {
                        //reverse the x velocity
                        box.VX = -box.VX;
                    }
                    if (box2.Y - box2.Size < 0 | box2.Y + box2.Size > canvas.height) {
                        box2.VY = -box2.VY;
                    }
                    if (box2.X - box2.Size < 0 | box2.X + box2.Size > canvas.width) {
                        box2.VX = -box2.VX;
                    }
                    if (box3.Y - box3.Size < 0 | box3.Y + box3.Size > canvas.height) {
                        box3.VY = -box3.VY;
                    }
                    if (box3.X - box3.Size < 0 | box3.X + box3.Size > canvas.width) {
                        box3.VX = -box3.VX;
                    }
                    //calculate the difference between the box x position and the arrow x position
                    var dx = box.X - arrow.X;
                    //calculate the difference between the box y position and the arrow y position
                    var dy = box.Y - arrow.Y;

                    arrow.Rotation = Math.atan2(dy, dx);

                    box.draw(context);
                    box2.draw(context);
                    box3.draw(context);
                    box4.draw(context);

                    window.requestAnimationFrame(drawFrame, canvas);
                }
            }
        }
    </script>
</body>
</html>

What I have tried:

box4's class:

//constructor for the box
function Box4() {
    //private data members
    //x posn
    var x = 0,
    //y posn
    y = 0,
    //color
    color = "red",
    //size
    size = 20,
    px=py=200;
    vx=vy=0;
    grav=0.5;
    onG=false;

    //public property for VX
    Object.defineProperty(this, 'VX',
    {
        get: function () {
            return vx;
        },
        set: function (value) {
            vx = value;
        }
    }
    )

    //public property for VX
    Object.defineProperty(this, 'PX',
    {
        get: function () {
            return px;
        },
        set: function (value) {
            px = value;
        }
    }
    )

    //public property for VX
    Object.defineProperty(this, 'PY',
    {
        get: function () {
            return py;
        },
        set: function (value) {
            py = value;
        }
    }
    )

    //public property for VX
    Object.defineProperty(this, 'GRAV',
    {
        get: function () {
            return grav;
        },
        set: function (value) {
            grav = value;
        }
    }
    )

    //public property for VX
    Object.defineProperty(this, 'ONG',
    {
        get: function () {
            return onG;
        },
        set: function (value) {
            onG = value;
        }
    }
    )

    //public property for VY
    Object.defineProperty(this, 'VY',
    {
        get: function () {
            return vy;
        },
        set: function (value) {
            vy = value;
        }
    }
    )

    //public property for size
    Object.defineProperty(this, 'Size',
    {
        get: function () {
            return size;
        },
        set: function (value) {
            size = value;
        }
    }
    )

    //public property for X
    Object.defineProperty(this, 'X',
    {
        get: function () {
            return x;
        },
        set: function (value) {
            x = value;
        }
    }
    )

    //public property for Y
    Object.defineProperty(this, 'Y',
    {
        get: function () {
            return y;
        },
        set: function (value) {
            y = value;
        }
    }
    )

    //function public draw method
    Box4.prototype.draw = function (context) {
        //save the context
        context.save();
        //set x and y
        context.translate(x, y);
        //set the line width
        context.lineWidth = 2;
        //set the colour of the fill
        context.fillStyle = colour;
        //begin the path
        context.beginPath();
        //draw the box
        context.moveTo(-size, -size);
        context.lineTo(-size, size);
        context.lineTo(size, size);
        context.lineTo(size, -size);
        //close the path
        context.closePath();
        //fill the shape
        context.fill();
        //draw it
        context.stroke();
        //restore the context
        context.restore();
    };

}

Posted 10-Nov-17 9:22am

BA17

Updated 10-Nov-17 16:39pm

v4

Add a Solution

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Patrice T · Answer 1 · 2017-11-10T16:39:00

Quote:
hi, i'm making an object (box4) in my code move, but in doing so my program now displays nothing (simple white screen).

Your browser have some developer tools.
First thing to do is use the console which will tell you if your page have a syntax error or if the code generate an error.
With FireFox, the console is in Menu > Tools > Web Dev

If there is no Syntax error, your browser also have a JS debugger.

There is a tool that allow you to see what your code is doing, its name is debugger. It is also a great learning tool because it show you reality and you can see which expectation match reality.
When you don't understand what your code is doing or why it does what it does, the answer is debugger.
Use the debugger to see what your code is doing. Just set a breakpoint and see your code performing, the debugger allow you to execute lines 1 by 1 and to inspect variables as it execute.

Debugger - Wikipedia, the free encyclopedia[^]
JavaScript Debugging[^]
Chrome DevTools | Web | Google Developers[^]
The debugger is here to show you what your code is doing and your task is to compare with what it should do.
There is no magic in the debugger, it don't find bugs, it just help you to. When the code don't do what is expected, you are close to a bug.