Canvas problem!

Hi, I working on a canvas game, and the thing is that ballons will come from the bottom of the screen and inside the balloons, there will be words. Before the ballons disappear, I have to write the word down on the keyboard. And if I do that, I will have scores. I have done the array. I can see the content in the console but not on the screen. No debug message is seen. I’m stuck there. This is my first obstacle. The next is to connect the keyboard to the words in the ballons.
But for now, why doesn’t the ballons show up?

Here is the JS code:

// ordballong - mall 

/* setup

------------------------ */

const canvas = document.querySelector("canvas");

const ctx = canvas.getContext("2d");

const startButton = document.querySelector("#start");

const stopButton = document.querySelector("#stop");

// klasser för att skapa objekt

class Ballon {

    constructor(word, x, y,radius,color, vx,vy){

        this.word = word;

        this.x = getRandomBetween(100,canvas.width-100);       

        this.radius = this.word.length*10;

        this.y = canvas.height + this.radius;

        this.color = 'pink';

        this.vy = -1;

        this.vx = +1;

    }

    draw() {

        ctx.beginPath();

        ctx.arc(this.word, this.x,this.y,this.radius,0,Math.PI*2,false);

        ctx.fillStyle = yellow;

        ctx.fill();

        ctx.stroke();       

    }

    displayText(text){

        ctx.beginPath();

        ctx.font = "20px sans-serif";

        ctx.fillStyle = 'black';

        ctx.textAlign = 'center';

        ctx.textBaseline = 'middle';

        ctx.fillText(this.word,this.x,this.y,this.radius*2);

    }

    move(){

        this.y -=this.vy;

        this.draw();

        this.displayText;

    }

}

/* initiera, globala variabler

------------------------ */

//Vektor med ballonger

let ballons = [];

//ord i spelet

let words = ['grön', 'glad', 'vår', 'sol', 'sommar'];

// unikt id för varje frame i animationen

let frameId;

/* händelselyssnare

------------------------ */

startButton.addEventListener("click", function() {

    // starta spel

    nextFrame();

    // inaktivera knapp

    startButton.setAttribute("disabled", true);

})

stopButton.addEventListener("click", function() {

    // pausa spel

    cancelAnimationFrame(frameId);

    // aktivera åter startknappen

    startButton.removeAttribute("disabled");

})

//skapa händelselyssnaren för att visa ballongen

startButton.addEventListener('click',function (){

    //Starta spel

    nextFrame();

    //inaktivera knapp

    startButton.setAttribute("disabled", true);

    spawnBallon();

})

/* funktioner

------------------------ */

//Funktion skapa ballonger

function spawnBallon() {

}{

    if(words.length>0){

        let word = words.pop();

        let ballon = new Ballon(word);

        ballons.push(ballon);

    }

}

//Skapa en funktion som renderar ballonger

function renderBallons() {

    ballons.forEach(ballon=>{

        ballon.move();

    })

}

//Durstenfeld shuffle algoritm

function shuffleArray(array) {

    for(var i = array.length - 1; i >= 0; i--) {

        var j =  Math.floor(Math.random() * (i+1));

        var temp = array[i];

        array[i] = array[j];

        array[j]= temp;         

    

    }

    }

    //Animering gameloop

    function nextFrame() {

        frameId = requestAnimationFrame(nextFrame); 

         //Radera innehåll från föregående frame

         ctx.clearRect(0,0,canvas.width,canvas.height);

         //anropa metoder och funktioner

         renderBallons();                   

        

          //anropa spawnBallon

        if (frameId% 240 === 0) {

            spawnBallon();

             }

                        

    };

   

    console.log(ballons); 

        

//slumpa ordföljden

shuffleArray(words);

let word = words.pop();

// animering, game loop

function nextFrame() {

    frameId = requestAnimationFrame(nextFrame);

    // radera innehåll från föregående fran

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    // anropa metoder och funktioner:

}

// slumpa ett tal mellan två värden

function getRandomBetween(min, max) {

    // returnera heltal

    return Math.floor(Math.random() * (max - min) + min);

}

Hoep someone can help me/Hindrik

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.