如何解决Javascript-如何重构代码以使其看起来更简洁
我有一个看起来很原始的函数,我想知道是否有人对如何改善此函数的外观有任何解决方案。我可以将此原始循环if()... if()...
更改为看起来更干净更好的东西吗?
function drawPlayers () {
if (players[0].nick != null) {
let player1Img = new Image(SQUARE,SQUARE)
player1Img.onload = function() {
ctx.drawImage(player1Img,LEFT_LINE + players[0].x * SQUARE,UPPER_LINE + players[0].y * SQUARE,this.width,this.height)
}
player1Img.src = "sprites/player1.png"
}
if (players[1].nick != null) {
let player2Img = new Image(SQUARE,SQUARE)
player2Img.onload = function() {
ctx.drawImage(player2Img,LEFT_LINE + players[1].x * SQUARE,UPPER_LINE + players[1].y * SQUARE,this.height)
}
player2Img.src = "sprites/player1.png"
}
if (players[2].nick != null) {
let player3Img = new Image(SQUARE,SQUARE)
player3Img.onload = function() {
ctx.drawImage(player3Img,LEFT_LINE + players[2].x * SQUARE,UPPER_LINE + players[2].y * SQUARE,this.height)
}
player3Img.src = "sprites/player1.png"
}
if (players[3].nick != null) {
let player4Img = new Image(SQUARE,SQUARE)
player4Img.onload = function() {
ctx.drawImage(player4Img,LEFT_LINE + players[3].x * SQUARE,UPPER_LINE + players[3].y * SQUARE,this.height)
}
player4Img.src = "sprites/player1.png"
}
}
解决方法
赞
players.forEach(player => {
if (player.nick != null) {
let img = new Image(SQUARE,SQUARE)
img.onload = function() {
ctx.drawImage(img,LEFT_LINE + player.x * SQUARE,UPPER_LINE + player.y * SQUARE,this.width,this.height)
}
img.src = "sprites/player1.png"; // or `sprites/${player.image}`;
}
});
如果您还有另一个图像名称数组,则可以向forEach添加索引:
players.forEach((player,i) => {
if (player.nick != null) {
let img = new Image(SQUARE,this.height)
}
img.src = `sprites/${images[i]}`;
}
});
const SQUARE = 100;
const images = [
"https://via.placeholder.com/100x100?text=Image1","https://via.placeholder.com/100x100?text=Image2","https://via.placeholder.com/100x100?text=Image3"
];
const players = [
{ nick: "Fred",x: 10,y: 20 },{ nick: "Joe",x: 20,y: 40 },{ nick: "Sam",x: 30,y: 50 }
];
players.forEach((player,SQUARE)
img.onload = function() {
console.log(i,player.nick,`ctx.drawImage(img,LEFT_LINE ${player.x} * SQUARE,UPPER_LINE + ${player.y} * SQUARE,${this.width},${this.height})`)
}
img.src = `${images[i]}`;
}
});
,
您可以进行for
循环
function drawPlayers() {
for (let i = 0; i < players.length; i++) {
if (players[i].nick != null) {
let playerImg = new Image(SQUARE,SQUARE)
playerImg.onload = function() {
ctx.drawImage(
playerImg,LEFT_LINE + players[i].x * SQUARE,UPPER_LINE + players[i].y * SQUARE,this.height
)
}
// if the image is fixed
playerImg.src = 'sprites/player1.png'
// else
// playerImg.src = `sprites/player${i + 1}.png`
}
}
}
,
另一个变体:
for(let p of players){
if(p.nick){
let playerImg = new Image(SQUARE,SQUARE);
playerImg.onload = function() {
ctx.drawImage(player1Img,LEFT_LINE + p.x*SQUARE,UPPER_LINE + p.y*SQUARE,this.height)
}
playerImg.src = "sprites/player1.png"
}
}
,
function drawPlayers() {
players.forEach((player,idx) => {
if (player.nick != null) {
// uncomment following comment block and delete this comment
/*
var img = new Image(SQUARE,SQUARE)
img.onload = () => {
ctx.drawImage(img,this.height)
};
img.src = "sprites/player"+(idx+1)+".png";
*/
console.log(idx,"sprites/player"+(idx+1)+".png");
}
});
}
var players=[{nick:"abe"},{},{nick:"chuck"},{nick:"dick"}];
drawPlayers();
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。