Javascript 如何在html画布AI中更改背景时间
这是一张AI游戏项目的图片 我的问题是。在这个项目中有两个时间。一个是白天和晚上 这个项目工作顺利。但我需要的不是改变白天和夜间的颜色，而是改变图片。我有白天和晚上的图片，我将如何插入这些我尝试了很多方法，但我不能请别人这样做Javascript 如何在html画布AI中更改背景时间,javascript,html,htmlcleaner,Javascript,Html,Htmlcleaner,这是一张AI游戏项目的图片 我的问题是。在这个项目中有两个时间。一个是白天和晚上 这个项目工作顺利。但我需要的不是改变白天和夜间的颜色，而是改变图片。我有白天和晚上的图片，我将如何插入这些我尝试了很多方法，但我不能请别人这样做 window.onload = init(); function init() { cs = document.getElementById("canvas3"); ctx = cs.getContext("2d"); // set con
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();
}
window.onload=init（）；
函数init（）
{
cs=document.getElementById（“canvas3”）；
ctx=cs.getContext（“2d”）；//将上下文设置为2d
ctx.rect（10,50900700）；
ctx.fill（）；
//球员的坐标和速度
var-x1=580；
变量y1=200；
无功转速=5；
//初始化可见性持续时间计数
var计数=0；
//初始化一天中的时间
timeofday=“日时间”；
小时计数=0；
//初始化敌国
EnemyCanSee=假；
enemyCOLOR=“绿色”；
//处理键盘控制
var keysDown={}；
addEventListener（“向下键控”，函数（e）{
keysDown[e.keyCode]=真；
}，假）；
addEventListener（“键控”，函数（e）{
删除keysDown[e.keyCode]；
}，假）；
//创建一个要控制的玩家
函数播放器（x1，y1）
{
//ctx.fillStyle=“绿色”；
//ctx.fillRect（x1，y1，40，40）；
var demoImage=new Image（）；//生成图像对象
demoImage.src=“player.jpg”；//设置图像路径
ctx.drawImage（demoImage，x1，y1，40，40）；
}
函数（）
{
var demoImage=new Image（）；//生成图像对象
demoImage.src=“wall.jpg”；//设置图像路径
ctx.drawImage（demoImage，500、150、50、200）；
}
函数paurenemy（）
{
ctx.beginPath（）；
ctx.arc（100230,50,0,2*Math.PI，假）；
ctx.fillStyle=enemyCOLOR；
ctx.fill（）；
}
函数drawDungeonDoor（）
{
var demoImage=new Image（）；//生成图像对象
demoImage.src=“door.jpg”；//设置图像路径
ctx.drawImage（demoImage，300、250、50、60）；
}
函数clear（）
{
ctx.fillStyle=“rgb（255，255，255）”；
ctx.beginPath（）；
ctx.rect（0,080500）；
ctx.closePath（）；
ctx.fill（）；
}
函数drawStuff（）
{
如果（时间=“夜间”）
{
ctx.fillStyle=“黑色”；
ctx.rect（10,50900700）；
ctx.fill（）；
}
播放器（x1，y1）；
牵引障碍（）；
地牢门（）；
付款人（）；
ctx.fillStyle=“红色”；
ctx.font=“20px Arial”；
ctx.fillText（时间，100,70）；
}
函数checkVisibility（）
{
如果（（y1350）| |（x1240）//12小时放大到1200小时
timeofday=“夜间时间”；
如果（小时计数>480）//12小时按比例增加到1200小时
{
timeofday=“日时间”；
小时计数=0；
}
检查可见性（）；
//使用箭头键控制忍者
如果（38英寸向下键（&y1>0）
{
y1=y1速度；
}
如果（40英寸向下键和y10键）
{
x1=x1速度；
}
if（39 in keysDown&&x1 60）//播放器在几秒钟内可见
{
射击运动员（）；
}
}
函数GameLoop（）
{clear（）；
updateStuff（）；
抽丝（）；
小时计数=小时计数+1；
设置超时（GameLoop，1000/50）；
}
GameLoop（）；
}
var background = new Image();
background.src = "http://i.imgur.com/yf6d9SX.jpg";
background.onload = function(){
ctx.drawImage(background,0,0);
}
if（timeofday==“Night Time”）{//ctx.fillStyle=“black”//ctx.rect（10,50900700）；//ctx.fill（）；var background=new Image（）；background.src=“bg.jpg”；background.onload=function（）{ctx.drawImage（background，0,0）；}}}player（x1，y1）；drawbounder（）；drawundgeundgeoordor（）；drawnemy（）；ctx.fillStyle=“red”；ctx.font=“20px Arial”ctx.fillText（timeofday，100，70）；}我写了这样的代码，当pic更改为夜间模式时，图片会一直闪烁，请不要停止，直到更改为白天时才更正。您可以在代码段中提供bg的完整代码作为运行代码吗？假设您的需求创建了此小提琴
var background = new Image();
background.src = "http://i.imgur.com/yf6d9SX.jpg";
background.onload = function(){
ctx.drawImage(background,0,0);
}