Wie ändert man die Hintergrundzeit in HTML Canvas AI

Question

enter image description here Dies ist ein Bild von AI Gaming-Projekt.

Mein Problem ist this.in diesem Projekt hat zwei mal.ein ist Tag und Nacht Zeit.

Dieses Projekt funktioniert erfolgreich.aber ich brauche anstelle von Änderungen Farbe von Tag und Nacht ein Bild ändern. Ich habe Tag Zeit und Zeit Bild Nacht wie werde ich setzen Sie sie wie ich viele Möglichkeiten versucht, aber ich konnte nicht helfen, bitte jemand diese

für Tag Zeit

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(); 
} 

gibt es keine andere Bedingung zu tun

Sie können auch Bild mit der Bedingung verwenden

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

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