0
私はプロジェクト用に作っているゲームのためのプラットフォームを実装しようとしています（フォールダウンに似ています）、可能なすべてのプラットフォームを含む複数の配列を作成しました（キャンバスは360です。プラットフォームであれば[i]を== 1を、それはRECTを描く）Else if文が実行されない
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>ただし、X> 1（これは基本的else文を実行するために必要とされる場合）、それは何も描画しません。 。
私はそれを修正できることがあるかどうかをテストしていましたが、if文がelse if文の内容を持っていれば正しい位置にrectを描画するこの場合（platform2）が描画されます。
私は問題を絞り込むことができましたが、私はそれを修正する方法がわかりません。私はPythonの経験がありますが、このようなことは一度も経験したことがありません
6つのプラットフォームを実装する必要があるため、else文を使うことができないことを伝えてください。私は6つのプラットフォームのうち2つだけを描くことができます。
switchステートメントを使うのか？ –
htmlパーツも追加してください。 –
else if文には何も問題はありません。これを達成するための最もきれいで効果的な方法ではありませんが、else if文に間違いはありません。値をチェックするために 'x'を記録するか、あなたのステートメントをデバッグする。 –