JavaScript 实现：页面方框内面包随机出现，触碰消失得分游戏

以下是一个使用 JavaScript 和 HTML 来实现此功能的简单示例： ```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> </head> <body> <div id="gameBox" style="width: 500px; height: 500px; border: 1px solid black;"></div> <p>得分: <span id="score">0</span></p> <script> // 加载面包图片 var breadImage = new Image(); breadImage.src = 'https://example.com/bread.jpg'; // 加载另一张图片 var otherImage = new Image(); otherImage.src = 'https://example.com/other.jpg'; // 游戏区域的尺寸 var boxWidth = 500; var boxHeight = 500; // 面包的位置 var breadX; var breadY; // 得分 var score = 0; // 生成随机位置 function getRandomPosition() { breadX = Math.random() * (boxWidth - breadImage.width); breadY = Math.random() * (boxHeight - breadImage.height); } // 初始化游戏 getRandomPosition(); // 监听鼠标移动事件 document.addEventListener('mousemove', function (event) { var mouseX = event.clientX; var mouseY = event.clientY; if (mouseX >= breadX && mouseX <= breadX + breadImage.width && mouseY >= breadY && mouseY <= breadY + breadImage.height) { // 面包被点击 score += 10; document.getElementById('score').innerHTML = score; getRandomPosition(); } }); // 绘制游戏画面 function draw() { var ctx = document.getElementById('gameBox').getContext('2d'); ctx.clearRect(0, 0, boxWidth, boxHeight); ctx.drawImage(breadImage, breadX, breadY); } // 每秒刷新画面 setInterval(draw, 1000 / 60); </script> </body> </html> ``` 此示例中使用的图片链接 `https://example.com/bread.jpg` 和 `https://example.com/other.jpg` 只是示例，您需要将其替换为实际有效的图片链接。这只是一个简单的示例，实际开发中可能需要更多的优化和错误处理。 ######[AI写代码神器 | 635点数解答 | 2024-11-07 21:32:52]

服务商

更多选项

快捷项

自定义