JS实现动态消灭星星游戏代码解析

"JS实现消灭星星案例" 在本文中，我们将探讨如何使用JavaScript（JS）实现一个简单的“消灭星星”游戏的示例。这个游戏的核心功能包括：点击星星使其消失、每秒自动产生新的星星以及随机设定星星的大小和位置。下面我们将详细分析HTML、CSS和JavaScript代码，以理解其实现原理。 首先，HTML部分非常简洁，只包含一个`<div>`元素，作为星星生成的容器。`<div>`设置了相对定位，以便于后续的绝对定位，并且设置了一个黑色背景，以便星星在上面可见。 ```html <div style="position: relative; width: 1000px; height: 500px; margin: 100px auto;"></div> ``` CSS部分主要设置了页面的基本样式，例如重置默认的边距和填充，以及应用`box-sizing`属性以确保元素的尺寸计算正确。此外，`<div>`的宽度、高度和定位属性用于控制星星的显示范围。 接下来是JavaScript部分，这里的核心是`creatImg`函数，它用于生成指定数量的随机星星。这个函数使用`for`循环生成图片（`<img>`标签），并应用绝对定位。每个星星的宽度和高度是随机生成的，范围在10到50像素之间，同时它们保持等宽等高。星星的位置也是随机的，横坐标（`left`）在0到950像素之间，纵坐标（`top`）在0到450像素之间。 ```javascript var div = document.querySelector('div'); function creatImg(num) { for (var i = 0; i < num; i++) { var imgs = document.createElement('img'); imgs.style.position = 'absolute'; var width = Math.floor(Math.random() * (50 - 10 + 1) + 10); var height = width; var top = Math.floor(Math.random() * (450 - 0 + 1) + 0); var left = Math.floor(Math.random() * (950 - 0 + 1) + 0); imgs.style.width = width + 'px'; imgs.style.height = height + 'px'; imgs.style.left = left + 'px'; imgs.style.top = top + 'px'; imgs.src = 'images/xingxing.gif'; div.appendChild(imgs); } } ``` 为了实现每秒自动产生星星的功能，我们可以使用JavaScript的`setInterval`函数。例如： ```javascript setInterval(function () { creatImg(1); // 每秒生成1颗星星 }, 1000); ``` 这个示例中的“消灭星星”游戏虽然简单，但它涵盖了JavaScript的基本DOM操作，如创建元素、修改样式以及事件处理（未在此代码中展示，但通常可以添加点击事件监听器来实现点击消除星星的功能）。通过这种方式，开发者可以学习如何结合HTML、CSS和JavaScript来创建动态、交互式的网页元素。