从正面和背面图像切换

Question

我正在研究一个目标练习游戏，它现在只在开始阶段但是我试图在目标中工作，但是当我把目标图像放入其中时，眨眼到'十字准线'图像的前面和后面而不是留在后面。实际开始向前和向后闪烁需要一些时间这是我的代码：

document.addEventListener('keydown', keyDown, false)
document.addEventListener('keyup', keyUp, false)
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
var imagename = 'image name'
var secondImageName = 'second image'
//presets Pressed variables to false
var WPressed = false;
var SPressed = false;
var DPressed = false;
var APressed = false;


//If the key is pressed it will check if it is one of the wasd keys and set one of the Pressed values to true
function keyDown(event) {
  console.log('functiondown');
  if (event.keyCode == 83) { //w key
    console.log('pressed');
    WPressed = true
  } else if (event.keyCode == 87) { //s key
    SPressed = true
  } else if (event.keyCode == 65) { //a key
    APressed = true
  } else if (event.keyCode == 68) { //d key
    DPressed = true
  }
}
//If the key is not pressed it will check if it is one of the wasd keys and set one of the Pressed values to false
function keyUp(e) {
  console.log('functionup');
  if (e.keyCode == 83) { //w key
    console.log('not');
    WPressed = false
  } else if (e.keyCode == 87) { //s key
    SPressed = false
  } else if (e.keyCode == 65) { //a key
    APressed = false
  } else if (e.keyCode == 68) { //d key
    DPressed = false
  }
}


var Lx = 20
var Ly = 20
var STx = 50
var STy = 50
laser = new Image();
stilltarget = new Image();
stilltarget.src = 'Target.png';
stilltarget.onload = function() {
  context.drawImage(stilltarget, STx, STy);
}

function draw2() {
  stilltarget = new Image();
  stilltarget.src = 'Target.png';
  stilltarget.onload = function() {
    context.drawImage(stilltarget, STx, STy);
  }
  setTimeout(function() {}, 190);
}
setInterval(draw2, 90)


function draw() {
  if (WPressed == true) {
    Ly += 10
    console.log('Change')
  } else if (SPressed == true) {
    Ly -= 10
  } else if (DPressed == true) {
    Lx += 10
  } else if (APressed == true) {
    Lx -= 10
  }
  context.clearRect(0, 0, canvas.width, canvas.height)
  laser.src = 'crosshairs.png';
  laser.onload = function() {
    context.drawImage(laser, Lx, Ly);
  }
  setTimeout(function() {}, 190);
}
setInterval(draw, 90)

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin 0 auto;
}

<canvas id='myCanvas' width=1750 height=1000></canvas>
<h1>Target Practice</h1>
<h2>Episode 1</h2>

Answer 1

我可以看到2个问题：

1. 您正在每个循环重新加载图片
2. 你有太多的循环

我建议先加载所有图片，然后在加载后开始游戏循环。在游戏实际渲染后，你会做一些不同的事情。

尝试以下内容：

document.addEventListener('keydown', keyDown, false)
document.addEventListener('keyup', keyUp, false)
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
var imagename = 'image name'
var secondImageName = 'second image'
//presets Pressed variables to false
var WPressed = false;
var SPressed = false;
var DPressed = false;
var APressed = false;


//If the key is pressed it will check if it is one of the wasd keys and set one of the Pressed values to true
function keyDown(event) {
    console.log('functiondown');
    if (event.keyCode == 83) { //w key
        console.log('pressed');
        WPressed = true
    } else if (event.keyCode == 87) { //s key
        SPressed = true
    } else if (event.keyCode == 65) { //a key
        APressed = true
    } else if (event.keyCode == 68) { //d key
        DPressed = true
    }
}
//If the key is not pressed it will check if it is one of the wasd keys and set one of the Pressed values to false
function keyUp(e) {
    console.log('functionup');
    if (e.keyCode == 83) { //w key
        console.log('not');
        WPressed = false
    } else if (e.keyCode == 87) { //s key
        SPressed = false
    } else if (e.keyCode == 65) { //a key
        APressed = false
    } else if (e.keyCode == 68) { //d key
        DPressed = false
    }
}

var Lx = 20
var Ly = 20
var STx = 50
var STy = 50

function loadImage(src) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.src = src;
        img.addEventListener("load", function() {
            resolve(img);
        });
        img.addEventListener("error", function() {
            reject("Failed to load " + src);
        });
    });
}

var targetImg,
    crosshairImg;

function draw() {
    if (WPressed == true) {
        Ly += 10
        console.log('Change')
    } else if (SPressed == true) {
        Ly -= 10
    } else if (DPressed == true) {
        Lx += 10
    } else if (APressed == true) {
        Lx -= 10
    }

    context.clearRect(0, 0, canvas.width, canvas.height)
    context.drawImage(targetImg, STx, STy);
    context.drawImage(crosshairImg, Lx, Ly);
}

Promise.all([
    loadImage("Target.png"),
    loadImage("crosshairs.png")
]).then(function(imgs) {
    targetImg = imgs[0];
    crosshairImg = imgs[1];
    setInterval(draw, 100);
});

这是loadImage函数的核心，它将返回一个Promise，它将封装等待图像加载：

function loadImage(src) {
    return new Promise(function(resolve, reject) {
        var img = new Image();
        img.src = src;
        img.addEventListener("load", function() {
            resolve(img);
        });
        img.addEventListener("error", function() {
            reject("Failed to load " + src);
        });
    });
}

另外，正如我所说，当你可能只需要一个循环时，你有3个循环，并且每次重新加载图像时都会创建一个新的循环。

看看下面的代码使用上面的代码以及base64编码的占位符图像：

document.addEventListener('keydown', keyDown, false)
document.addEventListener('keyup', keyUp, false)
var canvas = document.getElementById('myCanvas')
var context = canvas.getContext('2d')
var imagename = 'image name'
var secondImageName = 'second image'
//presets Pressed variables to false
var WPressed = false;
var SPressed = false;
var DPressed = false;
var APressed = false;


//If the key is pressed it will check if it is one of the wasd keys and set one of the Pressed values to true
function keyDown(event) {
  console.log('functiondown');
  if (event.keyCode == 83) { //w key
    console.log('pressed');
    WPressed = true
  } else if (event.keyCode == 87) { //s key
    SPressed = true
  } else if (event.keyCode == 65) { //a key
    APressed = true
  } else if (event.keyCode == 68) { //d key
    DPressed = true
  }
}
//If the key is not pressed it will check if it is one of the wasd keys and set one of the Pressed values to false
function keyUp(e) {
  console.log('functionup');
  if (e.keyCode == 83) { //w key
    console.log('not');
    WPressed = false
  } else if (e.keyCode == 87) { //s key
    SPressed = false
  } else if (e.keyCode == 65) { //a key
    APressed = false
  } else if (e.keyCode == 68) { //d key
    DPressed = false
  }
}

var Lx = 20
var Ly = 20
var STx = 50
var STy = 50

function loadImage(src) {
  return new Promise(function(resolve, reject) {
    var img = new Image();
    img.src = src;
    img.addEventListener("load", function() {
      resolve(img);
    });
    img.addEventListener("error", function() {
      reject("Failed to load " + src);
    });
  });
}

var targetImg,
  crosshairImg;

function draw() {
  if (WPressed == true) {
    Ly += 10
    console.log('Change')
  } else if (SPressed == true) {
    Ly -= 10
  } else if (DPressed == true) {
    Lx += 10
  } else if (APressed == true) {
    Lx -= 10
  }

  context.clearRect(0, 0, canvas.width, canvas.height)
  context.drawImage(targetImg, STx, STy);
  context.drawImage(crosshairImg, Lx, Ly);
}

Promise.all([
  loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABjAQMAAABaN0foAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAGUExURQAAAP///6XZn90AAAEUSURBVDjLvdQxTgMxEIXhlSgoc4Q9yh4rHc5NcgwKCucGOQBCDtUWCBwJgZG8np8iu/YMhHTB3SdZmpknzXSot+uuokPX9U09xCpBqwDvVRkoVaNRAKTKA7jzcgDedGYVLigabVZKu3VSGrLSRMlNmVKaEqIUEdHi7oK8+1vBa0WroJWM8pPqjPJq9KZmQIxYu0UFuPdaD/tFAjwmrZdcM3PwYVWq/C9JVYBPK9yiCMn580oXlCH+UFAKTQW8kWsSRFAqpQln5HNWClbjrAEghnTSHuA4zJr3ZNZkRG80Gn0Znb7W6s+noeYkZADELenuHLCtWW9WTF3bjmN3k8z2Z6NiJM7cia3RwZkbsrm90l36X30DgkK8L9FNEIsAAAAASUVORK5CYII="),
  loadImage("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGIAAABjAQMAAABaN0foAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAGUExURe0cJP///4VD1WsAAAESSURBVDjL3dQxcoMwEAXQ7VJyBB1FuZmcyiVH4ChWxgfgCMFDQWkYGpiI/S4s4f2eSYrMuAndG2bRLvqSwDxR/rW6d6sP864T99DiznvdQd5GnyUSkKr8TQWAvqywAkBj10vBqqdenNVIfdZWKVj1diJ1Vhcg7ustDup3HYFPFGnA6LXUTUCFrahFB3wX+eSAISvhnMdDFMzqAQ1Z7VTGRxT1FXIZoqzdo9Eoo7s3aiZqaKJgtdL+DaTGqpTdNdG+16RgpZSQjTSRVEREKsrS9Y+ihIASopSQjTSTaqsUrGbKUmul3mqlfRhIV9LXLzqRwgt0+jkvT13zREonJxcexBzGpdwFyQE47n+3E5HwkpvoBjFhtRzpjBvfAAAAAElFTkSuQmCC")
]).then(function(imgs) {
  targetImg = imgs[0];
  crosshairImg = imgs[1];
  setInterval(draw, 100);
});

* {
  padding: 0;
  margin: 0;
}

canvas {
  background: #eee;
  display: block;
  margin 0 auto;
}

<canvas id='myCanvas' width=1750 height=1000></canvas>
<h1>Target Practice</h1>
<h2>Episode 1</h2>