試圖讓其他房子的門變成綠色

Question

我的任務是繪製房屋，然後使用循環（在底部）填充畫布和房屋，而不是手動放置每個房屋。

那麼我正在努力工作，如何讓每個其他房子的門綠色。我一直試圖破解代碼一段時間，但我無法弄清楚。

我知道我所有的家庭作品都應該在功能上，而不是僅僅是我正在做的工作的後續任務！這裏是我的代碼：

//Check to see if the browser supports 
//the addEventListener function 
if(window.addEventListener) 
{ 
    window.addEventListener 
    (
     'load', //this is the load event 
     onLoad, //this is the evemnt handler we going to write 
     false //useCapture boolen value 
    ); 
} 

//the window load event handler 
function onLoad() 
{ 
    var canvas;  
    var context; 


    //this function will intialise our variables 
    function initialise() 
    { 


     // Fune the canvas element using its id attribute. 
     canvas = document.getElementById('canvas'); 
     //if it couldn't be found 
     if (!canvas) 
     { 
      //make a message bok appear with an error message 
      alert('Error: i cannot find this "canvas" of which you speak. Please re-evaluate your life choices.'); 
      return; 
     } 
     //check if there is any getContext function 
     if(!canvas.getContext) 
     { 
      alert('Error no cavnas.getContext could be found'); 
      return; 
     } 
     //get the 2D canvas context. 
     context = canvas.getContext('2d'); 
     if(!context) 
     { 
      alert('Error failed to getCOntext'); 
      return; 
     } 

     canvas.addEventListener("mousedown", getPosition, false); 
    } 

    // this is a little help tool for me as i'm awful at working out co-ordinates 
    function getPosition(e) 
    { 
     var x = e.x; 
     var y = e.y; 
     x -=canvas.offsetLeft; 
     y -=canvas.offsetTop; 
     alert("x:" +x+ "y:"+y); 
    } 

    //this function will draw on the canvas for me! 
    function draw() 
    { 
     context.fillStyle = 'grey'; 
     context.fillRect(0, 0, canvas.width, canvas.height); 
    } 


    // pX and pY are the parameters are going to be used so that the inside of the house body becomes the drawing canvas. 
    function drawHouse(pX ,pY) 
    { 
     //body 
     context.beginPath(); 
     context.fillStyle = '#ffffff'; 
     context.strokeStyle = "black"; 
     context.lineWidth = "5"; 
     context.rect(pX,pY, 160,110); 
     context.closePath(); 
     context.fill(); 
     context.stroke(); 

     //roof 
     context.beginPath(); 
     context.fillStyle = "red"; 
     context.moveTo(pX,pY-1);; 
     context.lineTo(pX+80, pY-95); 
     context.lineTo(pX+160, pY-1); 
     context.closePath(); 
     context.fill(); 
     context.stroke(); 

     //door 
     context.beginPath(); 
     context.fillStyle = "green"; 
     context.fillSStyle = "red"; 
     context.strokeStyle = "black"; 
     context.rect(pX+55,pY+30, 50, 80); 
     context.fill(); 
     context.stroke(); 

     //handle 
     var radius = 5; 
     context.beginPath(); 
     context.arc(pX+93, pY+75, radius, 0, 2 * Math.PI, false); 
     context.fillStyle = 'purple'; 
     context.fill(); 
     context.lineWidth = 3; 
     context.strokeStyle = 'black'; 
     context.stroke(); 

     //window Left 
     context.beginPath(); 
     context.fillStyle = 'blue'; 
     context.strokeStyle = "black"; 
     context.rect(pX+12,pY+30, 30, 60); 
     context.fill(); 
     context.stroke(); 

     //window Filler left vertically 
     context.beginPath(); 
     context.moveTo(pX+26.5,pY+30); 
     context.lineTo(pX+26.5, pY+90); 
     context.fill(); 
     context.stroke(); 

     //Window filler left horizontally 
     context.beginPath(); 
     context.moveTo(pX+41, pY+60); 
     context.lineTo(pX+11,pY+60); 
     context.fill(); 
     context.stroke(); 

     //Window Right 
     context.beginPath(); 
     context.fillStyle = 'blue'; 
     context.strokeStyle = "black"; 
     context.rect(pX+117,pY+30, 30, 60); 
     context.fill(); 
     context.stroke(); 

     //window filler right vertically 
     context.beginPath(); 
     context.moveTo(pX+131.5,pY+30); 
     context.lineTo(pX+131.5, pY+90); 
     context.fill(); 
     context.stroke(); 

     //window Filler right horizontally 
     context.beginPath(); 
     context.moveTo(pX+147, pY+60); 
     context.lineTo(pX+117,pY+60); 
     context.fill(); 
     context.stroke(); 
    } 

    initialise(); 
    draw(); 
    for(var i=0; i < 5; i++) 
    { 
     var pX=0+160*i; 

     for(var b=0; b < 5; b++) 
     { 
      var pY=100+210*b; 
      drawHouse(pX,pY); 
     } 
    } 
} 

Answer 1

添加參數drawHouse：

function drawHouse(pX, pY, drawGreen) { 
    // ... 
    if (drawGreen) 
     context.fillStyle = "green"; 
    else 
     context.fillSStyle = "red";  
    // ... 
} 

，然後相應地傳遞。例如：;`和`context.strokeStyle = '黑'，'你想要的顏色調用`fill`或`stroke`之前

// before your loop 
var paintGreen = false; 

// In the inner for 
var pY=100+210*b; 
drawHouse(pX,pY,paintGreen); 
paintGreen = !paintGreen; // alternate