我的编程空间,编程开发者的网络收藏夹
学习永远不晚

JS实现消灭星星小游戏

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

JS实现消灭星星小游戏

本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下

先看看效果图:

先准备css和一张星星图片,很简单,body背景设为黑色。

<style>
        body {
            background-color: black;
        }
</style>

就直接写JS代码了,解释都写在注释里面了

<script>
        function start() {
            //设置一个定时器,重复执行的秒数是500ms
            timer = setInterval(function() {
                //创建图片元素
                var obj = document.createElement('img');
                //星星随机宽度
                var w = Math.floor(Math.random() * 80 + 20);
                obj.width = w;
                //随机出现的位置
                var x = Math.floor(Math.random() * 1400 + 60);
                var y = Math.floor(Math.random() * 460 + 60);
                obj.style.position = 'absolute';
                //将随机生成的X,Y的值赋给对象
                obj.style.top = y + 'px';
                obj.style.left = x + 'px';
                //给图片参数赋上地址
                obj.class="lazy" data-src = 'imgs/xingxing.gif';
                //添加到整个body页面
                document.body.appendChild(obj);
                //创建点击事件,想要消除自己,就是remove掉自己父亲的儿子
                obj.addEventListener('click', function() {
                    this.parentNode.removeChild(this);
                });
            }, 500);
        };
        start();
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

JS实现消灭星星小游戏

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

怎么用JS实现消灭星星

这篇文章主要介绍“怎么用JS实现消灭星星”,在日常操作中,相信很多人在怎么用JS实现消灭星星问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”怎么用JS实现消灭星星”的疑惑有所帮助!接下来,请跟着小编一起来学习吧
2023-06-25

JavaScript躲避行星游戏实现全程

本文将使用canvas创建一个躲避小行星游戏。另外将重点介绍的两个方面是:如何使用JavaScript来检测键盘输入,以及如何在游戏中使用和处理HTML5音频。希望你能够喜欢
2022-11-13

如何用Pygame实现经典外星人游戏

本篇内容介绍了“如何用Pygame实现经典外星人游戏”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!安装环境下载python3,或如Anaco
2023-06-26

如何利用Python实现星空大战游戏

小编给大家分享一下如何利用Python实现星空大战游戏,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!一.游戏画面二.游戏结束画面三.游戏素材四.游戏代码星空飞碟大
2023-06-29

基于JS怎么实现消消乐游戏

这篇文章主要讲解了“基于JS怎么实现消消乐游戏”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“基于JS怎么实现消消乐游戏”吧!游戏的准备工作首先我们思考游戏的机制: 游戏有一个“棋盘”,是一个
2023-06-30

如何使用Pygame模块实现大战外星人游戏

这篇文章主要介绍“如何使用Pygame模块实现大战外星人游戏”,在日常操作中,相信很多人在如何使用Pygame模块实现大战外星人游戏问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”如何使用Pygame模块实现大
2023-06-22

编程热搜

目录