Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascipt/EaselJS Game Only Works on 1 Computer (Noob)

    I have to start with that I have no real experience in javascript. This is the first game I have ever made.

    I'm working on a game for kids, where you have a player chasing letters to make a word.

    The problem that I have is pretty weird. The game that I build works perfectly on the computer I build it on, but it doesn't work on other computers.

    I have no idea if it's the code or that it has something to do with programs installed on the pc.

    If anyone can help me out, that would be great! I've been trying for the last 3 days to fix it.

    Game is online at: http://athena.fhict.nl/users/i286940/game2/

    .Rar file with all files used: http://athena.fhict.nl/users/i286940/game2/game2.rar

    Please help me out!!

    Code:
     <!DOCTYPE html>
    
    <html>
    <head>
    <title>Proftaak Game</title>
    
    <!-- Import EaselJS Framework -->
    <script src="easel.js"></script>
    <script src="checklopen.js"></script>
    
    </head>
    
        <body onload="startNu();">
            <canvas id="testCanvas" width="800" height="600" onclick=startGame();>
                       </canvas>
    
    </body>
    </html>

    Script:

    Code:
        var canvas;
        var stage;
        var numberOfImagesLoaded = 0;
        var Player = new Image();
        var rechtslopen = false;
        var linkslopen = false;
        var springen = false;
        var rechtsIngedrukt = false;
        var linksIngedrukt = false;
        var spatieIngedrukt = false;
        var springtNu = false;
        var springdelay = 0;
        var xSpeed = 0;
        var ySpeed = 6;
    
        var letter1Raak = false;
        var letter2Raak = false;
        var letter3Raak = false;
        var letter4Raak = false;
        var gameisgestart = false;
    
        var woordGoed;
        var woord;
    
    
        //Geluid
        var h2 = new Audio("h2.mp3"); 
        var o2 = new Audio("o2.mp3"); 
        var n2 = new Audio("n2.mp3"); 
        var d2 = new Audio("d2.mp3");   
        var jump2 = new Audio("jump2.mp3"); 
        var cheer = new Audio("cheer.mp3"); 
        var hit = new Audio("hit2.mp3"); 
        var snd = new Audio("geluid.mp3"); 
    
        //Platformen
        var platform;
        var platformSrc = new Image();
    
        var platform2;
        var platform2Src = new Image();
    
        var platform3;
        var platform3Src = new Image();
    
        var platform4;
        var platform4Src = new Image();
    
        var platform5;
        var platform5Src = new Image();
    
        var platform6;
        var platform6Src = new Image();
    
        var hondPlaatje;
        var hondPlaatjeSrc = new Image();   
    
        // Achtergrond
        var achtergrond;
        var achtergrondSrc = new Image();
    
        // Beginscherm
        var beginscherm;
        var beginschermSrc = new Image();
    
        var button;
        var buttonSrc = new Image();
    
        //Enemy
        var enemyImg = new Image();
    
        var enemys;  //declaratie
        enemys = new Array();       // initialisatie geen argumente
    
    
    
    
        //functie van het opstarten
        function startNu() 
        {
            canvas = document.getElementById("testCanvas");
    
            Player.onload = handleImageLoad;
            Player.onerror = handleImageError;
            Player.src = "Player.png";
    
            platformSrc.onload = handleImageLoad;
            platformSrc.onerror = handleImageError;
            platformSrc.src = "platform.png";
    
            platform2Src.onload = handleImageLoad;
            platform2Src.onerror = handleImageError;
            platform2Src.src = "platform2.png";
    
            platform3Src.onload = handleImageLoad;
            platform3Src.onerror = handleImageError;
            platform3Src.src = "platform3.png";
    
            platform4Src.onload = handleImageLoad;
            platform4Src.onerror = handleImageError;
            platform4Src.src = "platform4.png";
    
            platform5Src.onload = handleImageLoad;
            platform5Src.onerror = handleImageError;
            platform5Src.src = "platform5.png";
    
            platform6Src.onload = handleImageLoad;
            platform6Src.onerror = handleImageError;
            platform6Src.src = "platform6.png";
    
            hondPlaatjeSrc.onload = handleImageLoad;
            hondPlaatjeSrc.src = "hond.png";
    
            achtergrondSrc.src = 'achtergrond.png';
            achtergrondSrc.name = 'achtergrond';
            achtergrondSrc.onload = handleImageLoad;
    
            beginschermSrc.src = 'beginscherm.jpg';
            beginschermSrc.name = 'beginscherm';
            beginschermSrc.onload = handleImageLoad;
    
            enemyImg.src = 'enemy2.png';
    
    
            // Letters aanmaken als tekst. Letters worden random op het scherm neergezet.
            letter1 = new Text("H", "72px Arial bold", "red");
            letter1.x = Math.random() * 700 + 50 ;
            letter1.y = Math.random() * 500 + 50;
    
            letter2 = new Text("O", "72px Arial bold", "red");
            letter2.x = Math.random() * 700 + 50 ;
            letter2.y = Math.random() * 500 + 50;
    
            letter3 = new Text("N", "72px Arial bold", "red");
            letter3.x = Math.random() * 700 + 50 ;
            letter3.y = Math.random() * 500 + 50;
    
            letter4 = new Text("D", "72px Arial bold", "red");
            letter4.x = Math.random() * 700 + 50 ;
            letter4.y = Math.random() * 500 + 50;
    
    
            //Dit is voor het eindscherm
            woordGoed = new Text("Goed Gedaan!", "72px Arial bold", "red");
            woordGoed.x = 100;
            woordGoed.y = 100;
    
    
            woord = new Text("Het woord was HOND", "52px Arial", "green");
            woord.x = 50;
            woord.y = 200;
    
    
        }
    
        // Functie die images laadt, plaatjes worden eerst geladen en de game gaat pas verder als alle plaatjes zijn geladen.
        function handleImageLoad(e) 
        {
            if(e.target.name = 'achtergrond')
            {
                achtergrond = new Bitmap(achtergrondSrc);
            }
            if(e.target.name = 'platform')
            {
                platform = new Bitmap(platformSrc);
            }
    
            if(e.target.name = 'platform2')
            {
                platform2 = new Bitmap(platform2Src);
            }
    
            if(e.target.name = 'platform3')
            {
                platform3 = new Bitmap(platform3Src);
            }
            if(e.target.name = 'platform4')
            {
                platform4 = new Bitmap(platform4Src);
            }
            if(e.target.name = 'platform5')
            {
                platform5 = new Bitmap(platform5Src);
            }
            if(e.target.name = 'platform6')
            {
                platform6 = new Bitmap(platform6Src);
            }   
                    if(e.target.name = 'beginscherm')
            {
                beginscherm = new Bitmap(beginschermSrc);
            }   
    
    
    
    
    
            numberOfImagesLoaded++;
    // als 10 plaatjes zijn geladen, dan gaat de game verder.
            if (numberOfImagesLoaded == 10) 
            {
                numberOfImagesLoaded = 0;
                beginScherm();
            }
        }
    
        //functie voor het beginscherm
        function beginScherm()
        {
            stage = new Stage(canvas);
            stage.addChild(beginscherm);
            onClick = clickHandler; //als er wordt geklikt, dan startgame
            stage.update();
        }
    
         function clickHandler(e)
                {
                    startGame();
                }
    
        // Functie als je Game Start
        function startGame() 
        {
            gameisgestart = true;
            // Maak een stage en connect met de canvas
            stage = new Stage(canvas);
            stage.addChild(achtergrond);
    
            //keyup en down
            document.onkeydown = handleKeyDown;
            document.onkeyup = handleKeyUp;
    
            // Maak een sprite van monster rennen
            var spriteSheet = new SpriteSheet
             (
            {
                //Welke plaatje
                images: [Player],
                //Breedte en hoogte van sprites
                frames: { width:64, height:64, regX:32, regY: 32 },
                animations:
                {
                    walk: [0, 9, "walk", 4],
                    die: [10, 21, false, 4],
                    jump: [22, 32, "jump", 4],
                    celebrate: [33, 43, "celebrate", 1],
                    idle: [44, 44]
                }
            })
            //BMP Player Configuratie
            bmpAnimation = new BitmapAnimation(spriteSheet);
            bmpAnimation.name = "Player";
            bmpAnimation.x = 50;
            bmpAnimation.y = 0;
            bmpAnimation.scaleX = 1.5; 
            bmpAnimation.scaleY = 1.5; 
    
            hondPlaatje = new Bitmap(hondPlaatjeSrc);
    
    
    //      bmpAnimation.gotoAndPlay("celebrate");
    
            platform.x = 0;
            platform.y = 400;
    
            platform2.x = 300;
            platform2.y = 400;
    
            platform3.x = 635;
            platform3.y = 400;
    
            platform4.x = 150;
            platform4.y = 250;
    
            platform5.x = 500;
            platform5.y = 250;
    
            platform6.x = 340;
            platform6.y = 100;
            hondPlaatje.x = 100;
            hondPlaatje.y = 230;
    
            //zet alles op het scherm
            stage.addChild(bmpAnimation, platform, platform2, platform3, platform4, platform5, platform6, letter1);
            stage.update();
    
            //ticker instellingen
            Ticker.addListener(window);
            Ticker.useRAF = true;
            Ticker.setFPS(80);
        }
    
        //Functie als images niet laden
        function handleImageError(e) 
        {
            console.log("Error Loading Image : " + e.target.src);
        }
    
            //Tick functie, wordt elke frame ge-update
        function tick() 
        {
            if (gameisgestart)
            {
            maakEnemys();
            }
            if (enemys.length != 0) {
            for (var i = 0; i < enemys.length; i++) {
            var currentEnemy = enemys[i];
            currentEnemy.x -= 5;
    
            if (currentEnemy.x < -100) {
            stage.removeChild(currentEnemy);
            enemys.splice(i, 1);
    
                                        }
                                                    }
                                    }
    
    //Botsing detector
        if (enemys.length != 0) {
    
    for (var enemy = 0; enemy < enemys.length; enemy++) {
    var aEnemy = enemys[enemy];
    
    //variabelen om te kijken of enemy.y+x en enemy.y+x gelijk zijn
    var yas = aEnemy.y - bmpAnimation.y;
    var xas = aEnemy.x - bmpAnimation.x;
    
    //if statement die kijkt of botsing gebeurd, en daarna enemy verwijdert van stage en uit array.
    if (xas < 10 && xas > -80 && yas < 40 && yas > -70 ) {
    stage.removeChild(aEnemy);
    enemys.splice(enemy, 1);
    hit.play();
    stage.update();
    
    }
    }
    stage.update();
    }
    if (gameisgestart) {
    //Kijkt of speler de letter raakt.
    var yas2 = letter1.y - bmpAnimation.y;
    var xas2 = letter1.x - bmpAnimation.x;
    if (letter1Raak == false && letter2Raak == false && letter3Raak == false && letter4Raak == false && xas2 < 10 && xas2 > -60 && yas2 < 80 && yas2 > -10) {
    h2.play();
    letter1Raak = true;
    letter2Raak = false;
    letter3Raak = false;
    letter4Raak = false;
    stage.removeChild(letter1);
    stage.addChild(letter2);
    }
    
    //Kijkt of speler de letter2 raakt.
    var yas3 = letter2.y - bmpAnimation.y;
    var xas3 = letter2.x - bmpAnimation.x;
    if (letter1Raak == true && xas3 < 10 && xas3 > -60 && yas3 < 80 && yas3 > -10) {
    o2.play();
    letter1Raak = false;
    letter2Raak = true;
    letter3Raak = false;
    letter4Raak = false;
    stage.removeChild(letter2);
    stage.addChild(letter3);
    }
    
    //Kijkt of speler de letter3 raakt.
    var yas4 = letter3.y - bmpAnimation.y;
    var xas4 = letter3.x - bmpAnimation.x;
    if (letter2Raak == true && xas4 < 10 && xas4 > -60 && yas4 < 80 && yas4 > -10) {
    n2.play();
    letter1Raak = false;
    letter2Raak = false;
    letter3Raak = true;
    letter4Raak = false;
    stage.removeChild(letter3);
    stage.addChild(letter4);
    }
    
    //Kijkt of speler de letter4 raakt.
    var yas5 = letter4.y - bmpAnimation.y;
    var xas5 = letter4.x - bmpAnimation.x;
    if (letter3Raak == true && xas5 < 10 && xas5 > -60 && yas5 < 80 && yas5 > -10) {
    d2.play();
    letter1Raak = false;
    letter2Raak = false;
    letter3Raak = false;
    letter4Raak = true;
    stage.removeChild(letter4);
    }
    
    //Als laatste letter geraakt wordt... dan verwijdert ie elementen en voegt elementen toe voor eindscherm
    if (letter4Raak)
    {
        letter4Raak = false;
        stage.removeChild(bmpAnimation, platform, platform2, platform3, platform4, platform5, platform6, letter1, enemys);
        stage.addChild(woord,woordGoed,hondPlaatje);
        cheer.play();
    }
    }
            if (gameisgestart)
            {
            //functie lopen
            checkLopen();
            }
    
            //functie voor springen
            if (spatieIngedrukt)
            {
            checkSpringen();
            }
    
            //Functie voor achtergrond muziek
            if (!snd.play())
    {
        snd.play();
    }
            stage.update();
        }
    
    
            //Functie als toets indrukt
        function handleKeyDown(e) 
        {   
            //cross browser issues exist ( komt later)  
            if ( !e ) 
            { 
                var e = window.event; 
            }
    
            if ( e.keyCode == 39 ) 
            {
                rechtsIngedrukt = true;
                stage.update();             
            } 
            if (e.keyCode == 32 )
            {
                spatieIngedrukt = true;
                stage.update();
            }
            if ( e.keyCode == 37 ) 
            {
                linksIngedrukt = true;
                stage.update(); 
            }
        }
            //Functie als key loslaat
        function handleKeyUp(e) 
        {   
            //cross browser issues exist ( komt later)  
            if ( !e ) 
            { 
                var e = window.event; 
            }
            if ( e.keyCode == 39 ) 
            {
                rechtsIngedrukt = false;
                    stage.update(); 
            } 
            if (event.keyCode == 32 )
                {
                    spatieIngedrukt = false;
                    stage.update();
                }
            if ( e.keyCode == 37 ) 
            {
                linksIngedrukt = false;
                stage.update();     
            } 
        } 
    
    
            //Functie die checkt of gelopen wordt en lopen uitvoert
        function checkLopen() 
        {
            xSpeed = 0;
            if (!rechtsIngedrukt&&!linksIngedrukt) 
            {
                bmpAnimation.gotoAndPlay("idle"); 
            }
                if (rechtsIngedrukt&&linksIngedrukt) 
                {
                    bmpAnimation.gotoAndPlay("walk"); 
                }
            else 
            {
                if (rechtsIngedrukt) 
                {
                    if (rechtslopen == false)
                    {
                        bmpAnimation.gotoAndPlay("walk");
                        bmpAnimation.scaleX = -1.5; 
                        rechtslopen = true;
                    }
                    xSpeed = 6;
                }
                else
                {
                    rechtslopen = false;
                }
    
                if (linksIngedrukt) 
                {
                    if (linkslopen == false)
                    {
                        bmpAnimation.gotoAndPlay("walk");
                        bmpAnimation.scaleX = 1.5; 
                        linkslopen = true;
                    }
                    xSpeed = -6;
                }
                else
                {
                    linkslopen = false;
                }
    
                    if (spatieIngedrukt&&!springtNu)    
                {
                if (springen == false)
                    {
                        jump2.play();
                        springen = true;                    
                    }
                    ySpeed = -13;
    
                }
                else
                {
                    springen = false;
                    springtNu = true;
                    ySpeed = 5;
                }
    
                if (rechtsIngedrukt&&spatieIngedrukt) 
                {
                    bmpAnimation.gotoAndPlay("walk"); 
                }
                    if (linksIngedrukt&&spatieIngedrukt) 
                    {
                        bmpAnimation.gotoAndPlay("walk"); 
                    }
    
            }   
            if (bmpAnimation.x < 10)
            {
                bmpAnimation.x = 10;
            }
    
                if (bmpAnimation.x > 790)
            {
                bmpAnimation.x = 790;
            }
    
            if (ySpeed > 0 && bmpAnimation.y >=  508)
            { 
                ySpeed = 508-bmpAnimation.y; 
                springtNu = false;
            }
            // Platformen, waar ze staan etc
    
                    if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 0 && bmpAnimation.x < 175)
            { 
                ySpeed = 352-bmpAnimation.y; 
                springtNu = false;
            }
    
    
                    if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 280 && bmpAnimation.x < 480)
            { 
                ySpeed = 352-bmpAnimation.y; 
                springtNu = false;
            }
    
    
                    if (ySpeed > 0 && bmpAnimation.y >= 352 && bmpAnimation.y < 382 && bmpAnimation.x > 630 && bmpAnimation.x < 800)
            { 
                ySpeed = 352-bmpAnimation.y; 
                springtNu = false;
            }
    
            //Tweede rij platformen
    
                if (ySpeed > 0 && bmpAnimation.y >= 202 && bmpAnimation.y < 232 && bmpAnimation.x > 138 && bmpAnimation.x < 320)
            { 
                ySpeed = 202-bmpAnimation.y; 
                springtNu = false;
            }
    
    
                if (ySpeed > 0 && bmpAnimation.y >= 202 && bmpAnimation.y < 232 && bmpAnimation.x > 488 && bmpAnimation.x < 675)
            { 
                ySpeed = 202-bmpAnimation.y; 
                springtNu = false;
            }
    
            //Bovenste Rij
    
                if (ySpeed > 0 && bmpAnimation.y >= 52 && bmpAnimation.y < 82 && bmpAnimation.x > 318 && bmpAnimation.x < 510)
            { 
                ySpeed = 52-bmpAnimation.y; 
                springtNu = false;
            }
    
            bmpAnimation.x += xSpeed;
            bmpAnimation.y += ySpeed;
            stage.update();     
        }
    
    
        function checkSpringen()
            {
                if (springen)
                {
                springdelay += 1;
                }
                if (springdelay > 15)
                    {
                        springen = false;
                        springtNu = true;
                        springdelay = 0;                    
                    }
            }
    
    
    
                    //functie die enemys aanmaakt
                    function maakEnemys()
                    {
                    if (enemys.length < 4) 
                    {
                            enemy  = new Bitmap(enemyImg);   // eerst een enemy maken
                            enemy.x = 1000 + Math.random() * Math.random() * 1000 + Math.random(); // enemy plaatsen    
                            enemy.y = Math.random() * 600 * 1.054 * Math.random();
                            stage.addChild(enemy);   // plaatsen op scherm  
                            enemys.push(enemy);
                            }
                        }

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    18,017
    Thanks
    203
    Thanked 2,538 Times in 2,516 Posts
    You need to give us much more information. What do you mean by "it does not work on other computers"? In what way does it not work - with errors, or not at all? Does the problem occur in different browsers? What is supposed to happen in the game?

    Are you sure that you have uploaded your two .js files to the right directory?

    When Mary heard that she was the mother of Jesus she sang the Magna Carta.
    - Pupil's answer to Catholic Elementary School test.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •