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