Question

I currently finished a Pong game as a college assignment, but it’s only working in Google Chrome. I’ve searched for a few hours on Google, but can’t seem to find the problem.

It’s not working in the newest Firefox, and also not workign in IE9.

This is the code:

        <script type="text/javascript">
            var canvas;
            var ctx;  

            var score1 = 0;
            var score2 = 0;

            // beginpositie plankjes
            var x = 200;
            var y = 380;
            var x2 = 200;
            var y2 = 10;

            // beginpositie en grootte van het balletje
            var x3 = 100;
            var y3 = 200;
            var size = 5;

            // snelheid balletje
            var sx = 0;
            var sy = 0;

            // snelheid plankjes
            var dx = 7;
            var dy = 7;

            // canvas afmeting
            var BREEDTE = 500;
            var HOOGTE = 400;

            function hervatSpel(){
                if(sx == 0 && sy == 0){
                    x3 = 100;
                    y3 = 200;
                    sx = 2;
                    sy = 2;
                }
            }

            function stopSpel(){
                if(sx != 0 || sy != 0){
                    x3 = 100;
                    y3 = 200;
                    sx = 0;
                    sy = 0;
                }
            }

            function resetScore(){
                score1 = 0;
                score2 = 0;
            }

            function rect(x,y,w,h){
                ctx.beginPath();
                ctx.rect(x,y,w,h);
                ctx.closePath();
                ctx.fill();
            }            

            function circ(){
                ctx.beginPath();
                ctx.fillStyle="#ffffff";
                ctx.arc(x3,y3,size,0,Math.PI*2,true);
                ctx.closePath();
                ctx.fill();

                // collision detection zijkanten
                if(x3<(size/2) || x3>(BREEDTE-size)){
                    sx = -sx;
                }

                // collision detection plankjes  
                if(y3 > (HOOGTE-20) && x3 > x && x3 < (x+100)){
                    sy = -sy;
                }

                if(y3 < 20 && x3 > x2 && x3 < (x2+100)){
                    sy =-sy;
                }

                // collision detection onder- en bovenkant
                if(y3<size){
                    // onderste speler scoort
                    // reset balletje
                    x3 = 100;
                    y3 = 200;
                    sx = 0;
                    sy = 0;
                    // reset plankjes
                    x = 200;
                    y = 380;
                    x2 = 200;
                    y2 = 10;
                    // update score
                    score2 += 1;
                }  
                if(y3>(HOOGTE-size)){
                    // bovenste speler scoort
                    x3 = 100;
                    y3 = 200;
                    sx = 0;
                    sy = 0;

                    x = 200;
                    y = 380;
                    x2 = 200;
                    y2 = 10;

                    score1 += 1;
                }

                x3+=sx;
                y3+=sy;
            }

            function clear(){
                ctx.clearRect(0,0,BREEDTE,HOOGTE);
            }

            function init(){
                canvas = document.getElementById("canvas");
                ctx = canvas.getContext("2d");
                return setInterval(draw, 10);
            }

            function draw(){
                clear();
                ctx.fillStyle = "9CC8F7";
                rect(0,0,BREEDTE,HOOGTE);
                ctx.fillStyle = "1A6CC4";
                rect(x,y,100,10);
                rect(x2,y2,100,10);
                circ();
                ctx.font="18px Trebuchet MS";
                ctx.fillText('Speler 1:',10,30);
                ctx.fillText('Speler 2:',10,380);
                ctx.fillText(score1,100,30);
                ctx.fillText(score2,100,380);
            }

            function doKeyDown(evt){
                switch (evt.keyCode) {
                    case 37:  /* linker pijltje wordt ingedrukt */
                    if (x > 0){
                        x -= dx;
                    }
                    break;
                    case 39:  /* rechter pijltje wordt ingedrukt */
                    if (x + 100 < BREEDTE){
                        x += dx;
                    }
                    break;
                    case 87: /* w-toets wordt ingedrukt */
                    if (x2 > 0){
                        x2 -= dx;
                    }
                    break;
                    case 83: /*s-toets wordt ingedrukt */
                    if (x2 + 100 < BREEDTE){
                        x2 += dx;
                    }
                    break;
                    case 13: /* ENTER wordt ingedrukt */
                    if(sx == 0 || sy == 0){
                    sx = 2;
                    sy = 2;
                    }
                }
            }

            init()
            window.addEventListener('keydown',doKeyDown,true);
        </script>

Some of it is in Dutch, but I don’t think this is relevant anyway.

Answer 1

It looks like your colors need to have a beginning #:

               ctx.fillStyle = "9CC8F7";
               rect(0,0,BREEDTE,HOOGTE);
               ctx.fillStyle = "1A6CC4";

Should be:

               ctx.fillStyle = "#9CC8F7";
               rect(0,0,BREEDTE,HOOGTE);
               ctx.fillStyle = "#1A6CC4";

EXAMPLE