Else If statement never runs
Question
So I'm trying to implement platforms for the game I'm making for a project (similar to falldown) and have created multiple arrays that have contain all the possible platforms (canvas is 360 so there is if platform[i] == 1 it draws a rect)
var canvas; var ctx; var isPlaying = false; window.onload = function(){ canvas= document.getElementById("gamesCanvas"); ctx = canvas.getContext("2d"); var fps = 60; setInterval(function(){ }, 1000/fps); createMenu(); canvas.addEventListener('click', getClicks.bind(this), false) //canvas.addEventListener("mousemove", getPos) } function initialise(){ isPlaying = true; ctx.clearRect(0, 0, canvas.width, canvas.height); createRect(0,0, canvas.width, canvas.height, 'black'); createPlatforms(); } function createPlatforms(){ x = randint(1,2); console.log(x) var i; var pos = -60; var platform1 = [0,1,1,1,1,1]; var platform2 = [1,0,1,1,1,1]; var platform3 = [1,1,0,1,1,1]; var platform4 = [1,1,1,0,1,1]; var platform5 = [1,1,1,1,0,1]; var platform6 = [1,1,1,1,1,0]; if(x==1){ for (i=0; i<platform1.length; ++i) { var pos = (pos+60); if(platform1[i] == 1){ createRect(pos, 60, 60,5, 'white'); } } } else if(x==2){ for (i=0; i<platform2.length; ++i){ var pos = (pos+60); if (platform2[i] ==2){ createRect(pos,60,75,5,'white'); } } } } function randint(min, max) { return ~~(Math.random() * (max - min + 1) + min); } function background(color) { ctx.fillStyle = color; ctx.fillRect(0, 0, canvas.width, canvas.height); } function createMenu(){ background("black"); if (!isPlaying) { ctx.font = "60px monospace"; ctx.fillStyle = "white"; ctx.fillText("FallDown", 40, 130); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("PLAY", 130, 260); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("LEADERBOARD", 50, 340); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("SETTINGS", 90, 420); } } function createRect(leftX, topY, width, height, color){ ctx.fillStyle = color; ctx.fillRect(leftX, topY, width, height); } function getClicks(evt) { var x = evt.offsetX; var y = evt.offsetY; if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) { initialise() } }
<html> <head> <title>Falldown</title> </head> <body> <canvas id="gamesCanvas" width="360" height="640"></canvas> <!--script src="test.js"></script--> </body> </html>
However, if x>1 (so basically an else if statement is required to run) it doesn't draw anything.
I was testing to see whether it is something that I could fix, however, all I managed to realise that if the if statement has got the contents of the else if statement than it will draw the rects in the right position so in this case (platform2) would be drawn.
I've managed to narrow down the problem but I'm not sure how to fix it. I have experience with python but have never experienced anything like this
Just letting you know that I can't just use the else statement as I have to implement 6 platforms and if I were to use just if and else than that would mean I could only draw 2 of the 6 platforms
2 answers
solution1
0 2017-09-11 09:11:18
You can use a switch statement in javascript to handle lots of cases.
Example:
switch(x){
case 1:
//logic here
break;
case 2:
// and so on
break:
default:
break;
}
You can add as many cases as you would like. This will eliminate the need to use if else .
Hope this helps!
solution2
0 ACCPTED 2017-09-11 10:09:14
Your initial problem wasn't with the if / else.. but the if inside..
But with -> if (platform2[i] ==2){ this wanted to be if (platform2[i] == 1){
But saying all this, your createPlatforms was only creating a single platform. It didn't really need any If/else or arrays.
Below I've modified createPlatforms, using just two for loops.
var canvas; var ctx; var isPlaying = false; window.onload = function(){ canvas= document.getElementById("gamesCanvas"); ctx = canvas.getContext("2d"); var fps = 60; setInterval(function(){ }, 1000/fps); createMenu(); canvas.addEventListener('click', getClicks.bind(this), false) //canvas.addEventListener("mousemove", getPos) } function initialise(){ isPlaying = true; ctx.clearRect(0, 0, canvas.width, canvas.height); createRect(0,0, canvas.width, canvas.height, 'black'); createPlatforms(); } function createPlatforms(){ for (var y = 0; y < 8; y ++) { var x = randint(0, 5), pos = 0; for (var i = 0; i < 6; i ++) { if (i !== x) { createRect(pos, 60 + y*60 ,75,5,'white'); } pos += 60; } } } function randint(min, max) { return ~~(Math.random() * (max - min + 1) + min); } function background(color) { ctx.fillStyle = color; ctx.fillRect(0, 0, canvas.width, canvas.height); } function createMenu(){ background("black"); if (!isPlaying) { ctx.font = "60px monospace"; ctx.fillStyle = "white"; ctx.fillText("FallDown", 40, 130); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("PLAY", 130, 260); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("LEADERBOARD", 50, 340); ctx.font = "34px Arial"; ctx.fillStyle = "white"; ctx.fillText("SETTINGS", 90, 420); } } function createRect(leftX, topY, width, height, color){ ctx.fillStyle = color; ctx.fillRect(leftX, topY, width, height); } function getClicks(evt) { var x = evt.offsetX; var y = evt.offsetY; if ((x > 110 && x < 240) && (y > 220 && y < 275) && !isPlaying) { initialise() } }
<html> <head> <title>Falldown</title> </head> <body> <canvas id="gamesCanvas" width="360" height="640"></canvas> <!--script src="test.js"></script--> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.