在此处输入图片描述这是 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();
}