如何在 html canvas AI 中更改背景时间

Question

enter image description here这是AI游戏项目的图片。

我的问题是这个。在这个项目中有两次。一个是白天和晚上。

此项目成功运行。但我需要更改白天和夜间的颜色而不是更改图片。我有白天和晚上的图片我将如何插入我尝试了很多方法但我无法帮助别人这样做

window.onload = init();
    function init()
    {
    cs = document.getElementById("canvas3");
    ctx = cs.getContext("2d"); // set context as 2D
    ctx.rect(10,50,900,700);
    ctx.fill();
    // Coordinates and speed of player
    var x1 = 580;
    var y1 = 200;
    var SPEED = 5;
    // initialize visibility duration count
    var count = 0;
    //initialize time of day
    timeofday = "Day Time";
    hourcount = 0;
    // initialize enemy state
    EnemyCanSee = false;
    enemyCOLOR = "green";
    // Handle keyboard controls
    var keysDown = {};
    addEventListener("keydown", function (e){
        keysDown[e.keyCode] = true;
    }, false);
    addEventListener("keyup", function (e) {
        delete keysDown[e.keyCode];
    }, false);
    //create a player to control
    function player(x1, y1)
    {
        //ctx.fillStyle = "green";
        //ctx.fillRect(x1, y1, 40, 40);
        var demoImage = new Image();   // make image object
        demoImage.src = "player.jpg";  // set image path
        ctx.drawImage(demoImage, x1, y1, 40, 40); 
    }
    function drawObstacle()
    {
    var demoImage = new Image();   // make image object
    demoImage.src = "wall.jpg";  // set image path
    ctx.drawImage(demoImage, 500, 150, 50, 200);  
    }
    function drawEnemy()
    {
      ctx.beginPath();
      ctx.arc(100,230,50,0,2*Math.PI,false);
      ctx.fillStyle= enemyCOLOR;
      ctx.fill();
    }
    function drawDungeonDoor()
    {
    var demoImage = new Image();   // make image object
    demoImage.src = "door.jpg";  // set image path
    ctx.drawImage(demoImage, 300, 250, 50, 60);     
    }
    function clear()
    {  
      ctx.fillStyle = "rgb(255, 255, 255)";  
      ctx.beginPath();   
      ctx.rect(0, 0, 800, 500);  
      ctx.closePath();  
      ctx.fill();  
    }  
    function drawStuff()
    {
    if (timeofday == "Night Time")
    {
      ctx.fillStyle = "black";
      ctx.rect(10,50,900,700);
      ctx.fill();
     }
    player(x1,y1);
    drawObstacle();
    drawDungeonDoor();
    drawEnemy();
    ctx.fillStyle = "red";
    ctx.font = "20px Arial";
    ctx.fillText(timeofday, 100, 70);
    }
    function checkVisibility()
    {
      if ((y1<150)|| (y1>350)||(x1<500))
         EnemyCanSee = true;
         else
         EnemyCanSee = false;
    }
    function shootPlayer()
    {
    ctx.lineWidth = 5;
    ctx.strokeStyle = 'yellow';
    ctx.moveTo(100,230);
    ctx.lineTo(x1,y1);
    ctx.stroke();
    var demoImage = new Image();   // make image object
    demoImage.src = "explode.jpg";  // set image path
    ctx.drawImage(demoImage, x1-50, y1-50, 160, 160);  
    }
    function updateStuff()
    {   
           if (hourcount>240) //12 hours scaled up to 1200
               timeofday = "Night Time";
            if (hourcount>480) //12 hours scaled up to 1200
               {
                 timeofday = "Day Time";
                 hourcount = 0;
               } 
        checkVisibility();
        // control the ninja using arrow keys
        if (38 in keysDown && y1>0)
        {   
            y1 = y1-SPEED;
        }
        if (40 in keysDown && y1<460)
        {   
            y1 = y1+SPEED;
        }
            if (37 in keysDown && x1>0)
        {   
            x1 = x1-SPEED;
        }
           if (39 in keysDown && x1<600)
        {   
            x1 = x1+SPEED;
        }
    if (EnemyCanSee == true && timeofday == "Day Time")
               {
                 enemyCOLOR = "red";
                 count = count + 1; 
            }
            else
               {
                 enemyCOLOR = "green";
             count = 0; 
               }
            if (count > 60)  //player was visible for few seconds
              {
                shootPlayer();
              } 

    }

    function GameLoop()
    {   clear(); 
        updateStuff();    
        drawStuff();  
            hourcount = hourcount+1;
        setTimeout(GameLoop, 1000 / 50);  
    }  
    GameLoop(); 
    }

Answer 1

if (timeofday == "Night Time")
{
  ctx.fillStyle = "black";
  ctx.rect(10,50,900,700);
  ctx.fill();
 }

白天没有其他条件

你也可以使用带有条件的图片

var background = new Image();
background.src = "http://i.imgur.com/yf6d9SX.jpg";

background.onload = function(){
    ctx.drawImage(background,0,0);   
}