Click here to Skip to main content
13,794,579 members
Rate this:
 
Please Sign up or sign in to vote.
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 10:22am
Updated 10-Nov-17 17:39pm
v4

1 solution

Rate this: bad
 
good
Please Sign up or sign in to vote.

Solution 1

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.
  Permalink  

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

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Cookies | Terms of Service
Web04 | 2.8.181207.3 | Last Updated 10 Nov 2017
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100