首頁猿問 Javascript -...

Javascript - 如何重構代碼以使其看起來更簡潔

JavaScript

侃侃爾雅 2023-02-17 17:20:24

我有一個看起來有點原始的函數，我想知道是否有人對如何改進此函數的外觀有任何解決方案。我可以將這個原始循環更改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 回答

慕婉清6462132

TA貢獻1804條經驗獲得超2個贊

像這樣

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]}`;

}

});

反對回復 2023-02-17

慕碼人2483693

TA貢獻1860條經驗獲得超9個贊

你可以做一個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`

}

反對回復 2023-02-17

桃花長相依

TA貢獻1860條經驗獲得超8個贊

另一種變體：

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"

}

反對回復 2023-02-17

猛跑小豬

TA貢獻1858條經驗獲得超8個贊

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, LEFT_LINE + player.x * SQUARE, UPPER_LINE + player.y * SQUARE, this.width, this.height)

};

img.src = "sprites/player"+(idx+1)+".png";

console.log(idx, player.nick, "sprites/player"+(idx+1)+".png");

}

});

}

var players=[{nick:"abe"},{},{nick:"chuck"},{nick:"dick"}];

drawPlayers();

反對回復 2023-02-17

4 回答
0 關注
165 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Javascript - 如何重構代碼以使其看起來更簡潔

Javascript - 如何重構代碼以使其看起來更簡潔

4 回答

添加回答