Javascript -如何重构代码以使其看起来更整洁
Javascript -如何重构代码以使其看起来更整洁
提问于 2020-09-08 16:16:33
我有一个看起来有点原始的函数，我想知道是否有人有任何解决方案来改善这个函数的外观。我能把这个原始的循环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.width, 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.width, 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.width, this.height)
}
player4Img.src = "sprites/player1.png"
}
}回答 4
Stack Overflow用户
回答已采纳
发布于 2020-09-08 16:22:43
像这样
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, SQUARE)
img.onload = function() {
ctx.drawImage(img, LEFT_LINE + player.x * SQUARE, UPPER_LINE + player.y * SQUARE, this.width, 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, i) => {
if (player.nick != null) {
let img = new Image(SQUARE, 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]}`;
}
});
Stack Overflow用户
发布于 2020-09-08 16:25:00
你可以做一个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.width,
this.height
)
}
// if the image is fixed
playerImg.src = 'sprites/player1.png'
// else
// playerImg.src = `sprites/player${i + 1}.png`
}
}
}Stack Overflow用户
发布于 2020-09-08 16:30:25
另一种变体：
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.width, this.height)
}
playerImg.src = "sprites/player1.png"
}
}我最近学到的另一个特性是：
for(let p of players){
if(!p.nick) continue;
let playerImg = new Image(SQUARE,SQUARE);
playerImg.onload = function() {
ctx.drawImage(player1Img, LEFT_LINE + p.x*SQUARE, UPPER_LINE + p.y*SQUARE, this.width, this.height)
}
playerImg.src = "sprites/player1.png"
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63789840
复制相关文章
相似问题
腾讯云开发者
