英文:
Is it possible to add an image through event.target?
问题
以下是代码的翻译部分：
我想在一个7x7的网格中制作一个简单的游戏，我希望在单击时从一个数组中放置图像，然后检查匹配（就像连接四一样）。
我有一个网格，其中所有的方块都是HTML divs，如下所示：
<div class="grid">
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<!-- 其他方块 -->
<div class="square" id="49"></div>
</div>
还有一些存储在app.js中的图像数组：
document.addEventListener("DOMContentLoaded", () => {
const squares = document.querySelectorAll(".square");
const scoreDisplay = document.getElementById("result");
let score = 0;
squares[24].style.backgroundImage = "url('res/middle.png')";
const cards = [
{
name: 'blue',
img: 'res/blue.png'
},
{
name: 'yellow',
img: 'res/yellow.png'
},
{
name: 'red',
img: 'res/red.png'
},
{
name: 'orange',
img: 'res/orange.png'
},
{
name: 'green',
img: 'res/green.png'
},
{
name: 'pink',
img: 'res/pink.png'
},
{
name: 'ivory',
img: 'res/ivory.png'
},
];
// 随机图像不会显示在网格中，但分数会更新，没有控制台错误。
let randomCard = Math.floor(Math.random() * cards.length);
squares.forEach(square => {
square.addEventListener('click', function(e) {
if (square.id !== squares[24].id) {
score++;
scoreDisplay.textContent = score;
e.target.style.backgroundImage = `url('${randomCard.img}')`;
} else {
// 这里可以添加处理特殊情况的代码
}
});
});
});
希望这对你有所帮助。如果你需要进一步的帮助或有其他问题，请随时告诉我。
英文:
I want to make a simple game in a 7x7 grid, where I want to place on click images from an array, and then check for matches (like in connect four)
I have a grid, with all its squares in HTML divs, like this :
<div class="grid">
<div class="square" id="1"></div>
<div class="square" id="2"></div>
<...............................>
<div class="square" id="49"></div>
and some images stored in an array in app.js :
document.addEventListener("DOMContentLoaded", () => {
const squares = document.querySelectorAll(".square")
const scoreDisplay = document.getElementById("result")
let score = 0;
squares[24].style.backgroundImage = "url('res/middle.png')"
const cards = [
{
name: 'blue',
img: 'res/blue.png'
},
{
name: 'yellow',
img: 'res/yellow.png'
},
{
name: 'red',
img: 'res/red.png'
},
{
name: 'orange',
img: 'res/orange.png'
},
{
name: 'green',
img: 'res/green.png'
},
{
name: 'pink',
img: 'res/pink.png'
},
{
name: 'ivory',
img: 'res/ivory.png'
},
]
The random image of the array does not appear on the grid, however the score updates and there are no console errors.
let randomCard = Math.floor(Math.random() * cards.length)
// clickedPosition = ?
squares.forEach(square => {
square.addEventListener('click', function(e) {
if(square.id !== squares[24] ) {
score ++;
scoreDisplay.textContent = score
e.target.style.backgroundImage = randomCard.img
} else {
}
})
})
})
答案1
得分: 0
I figured it out!
将 cards 数组更改为如下所示：
const cards = [
"url('res/blue.png')",
"url('res/yellow.png')",
"url('res/red.png')",
"url('res/orange.png')",
"url('res/green.png')",
"url('res/pink.png')",
"url('res/ivory.png')"
]
现在，单个图像将在点击时显示（不幸的是不是随机的，但这是进展！）
e.target.style.backgroundImage = cards[randomCard]
英文:
I figured it out!
Changed the cards array to look like this :
> const cards = [
> "url('res/blue.png')",
> "url('res/yellow.png')",
> "url('res/red.png')",
> "url('res/orange.png')",
> "url('res/green.png')",
> "url('res/pink.png')",
> "url('res/ivory.png')"
> ]
and now a single image will appear on click (unfortunately not a random one, but this is progress! )
e.target.style.backgroundImage = cards[randomCard]
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论