JavaScript 实现：页面方框内面包随机出现，“吃掉”得分加 10 分！

以下是一个使用 JavaScript 和 HTML 实现的简单示例，在页面方框内随机显示一个面包图片，当被另一个图片"吃掉"后得分加 10 分并重新随机显示面包： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 500px; height: 500px; border: 1px solid black; position: relative; } #bread { position: absolute; } #eater { position: absolute; } </style> </head> <body> <h2>得分: <span id="score">0</span></h2> <div id="box"> <img id="bread" src="bread.jpg" width="50" height="50" /> <img id="eater" src="eater.jpg" width="50" height="50" /> </div> <script> // 面包的初始位置 let breadX = Math.random() * 450; let breadY = Math.random() * 450; document.getElementById('bread').style.left = breadX + 'px'; document.getElementById('bread').style.top = breadY + 'px'; // 当"吃掉"时的处理函数 document.getElementById('box').addEventListener('click', function (event) { let target = event.target; if (target.id === 'bread') { let scoreElement = document.getElementById('score'); let score = parseInt(scoreElement.innerHTML); score += 10; scoreElement.innerHTML = score; // 重新随机位置 breadX = Math.random() * 450; breadY = Math.random() * 450; document.getElementById('bread').style.left = breadX + 'px'; document.getElementById('bread').style.top = breadY + 'px'; } }); </script> </body> </html> ``` 上述代码中需要你准备好 `bread.jpg` 和 `eater.jpg` 两张图片，并将路径正确设置。这只是一个简单的示例，实际应用中可能需要更多的优化和功能完善。 ######[AI写代码神器 | 589点数解答 | 2024-11-07 21:26:04]

服务商

更多选项

快捷项

自定义