JS开发吃豆人游戏时如何为strawberry类方格添加图片

你当前用JS动态生成网格方格的逻辑下，优先用CSS背景图方案实现，不需要改动现有布局生成的核心逻辑，实现成本最低。 #

方案1：CSS背景图实现（推荐） #

直接给.strawberry类添加背景样式即可，注意匹配网格方格的尺寸：

/* 先给所有网格方格统一设置基础尺寸，和你的grid布局参数匹配 */
.grid div {
    width: 20px; /* 替换成你实际的单格尺寸 */
    height: 20px; /* 替换成你实际的单格尺寸 */
}
/* 草莓格专属样式 */
.strawberry {
    background-image: url('./strawberry.png'); /* 替换为你本地草莓图片的实际路径 */
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
}

样式不生效排查点：

• 确认图片路径书写正确：如果是内联CSS，相对路径相对当前HTML文件；如果是外链CSS文件，相对路径相对CSS文件本身
• 确认没有其他更高优先级的样式覆盖了.strawberry的背景属性
• 确认单格div有明确的宽高设置，无尺寸的容器无法正常显示背景图

方案2：动态插入img标签实现 #

如果需要用img标签实现，直接在现有JS生成方格的逻辑里追加节点即可，不需要提前在静态HTML中写元素：
修改原循环中layout[i] === 3的分支代码：

for (let i = 0; i < layout.length; i++) {
    const square = document.createElement('div')
    grid.appendChild(square)
    squares.push(square)
    // add layout to the board // 
    if (layout[i] === 0) {
        squares[i].classList.add('pac-dot')
    } else if (layout[i] === 1) {
        squares[i].classList.add('wall')
    } else if (layout[i] === 3) {
        squares[i].classList.add('strawberry')
        // 动态创建img插入到当前草莓格中
        const berryImg = document.createElement('img')
        berryImg.src = './strawberry.png' // 替换为你的草莓图片路径
        berryImg.style.width = '100%'
        berryImg.style.height = '100%'
        berryImg.style.objectFit = 'cover'
        squares[i].appendChild(berryImg)
    }
}

之前方案失效的原因 #

• 静态HTML中提前写div、img元素不生效：你的所有网格方格都是页面加载后通过JS动态创建的，初始DOM树里不存在这些方格节点，提前写的静态元素不会自动挂载到动态生成的格子里
• 提前写id绑定img不生效：和上面同理，动态生成的节点不存在时，JS获取不到对应DOM节点，绑定逻辑自然失效。

内容的提问来源于stack exchange，提问作者zsip