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.src = 'imgs/xingxing.gif';
                //添加到整个body页面
                document.body.appendChild(obj);
                //创建点击事件，想要消除自己，就是remove掉自己父亲的儿子
                obj.addEventListener('click', function() {
                    this.parentNode.removeChild(this);
                });
            }, 500);
        };
        start();
</script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JS实现消灭星星案例

    JS实现消灭星星案例

    本文实例为大家分享了JS实现消灭星星的具体代码,供大家参考,具体内容如下 消灭星星的效果图: 功能需求: 1.点击星星,星星消失 2.每隔一秒自动生成一颗星星 3.星星的大小.出现位置是随机的 案例代码及分析: html和css代码: * { margin: 0; padding: 0; box-sizing: border-box; } div { position: relative; width: 1000px; height: 500px; margin: 100px auto; bac

  • javascript实现消灭星星小游戏简单版

    javascript实现消灭星星小游戏简单版

    来看看实现的效果图 游戏规则:双击颜色一样的星星,双击相同的部分就消失了 实例代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8" content="target-densitydpi=320,width=640,user-scalable=no" /> <noscript><meta http-equiv="refresh"

  • js实现消灭星星(web简易版)

    昨天看视频之后,整理思路,自己完成了简易版消灭星星 思路: 模块1:初始化 初始化总分数.当前分数.背景图.选择的星星分数 初始化星星(生成二维数组,对二维数组的每一个对象设置样式(长.宽.背景图),生成二维数组个div元素节点插入到游戏面板中) 模块2:预判 判断:  鼠标移动到某一个方块,判断上下左右是否有连接着的小方块(采用递归方法),然后将其存储到数组choose[],移到其他方块时,choose置为空 闪烁:  将已选中的小方块设置样式(缩放) 显示选择分数:  设置初始分数和递增分数

  • JS实现消灭星星小游戏

    JS实现消灭星星小游戏

    本文实例为大家分享了JS实现消灭星星小游戏的具体代码,供大家参考,具体内容如下 先看看效果图: 先准备css和一张星星图片,很简单,body背景设为黑色. <style>         body {             background-color: black;         } </style> 就直接写JS代码了,解释都写在注释里面了 <script>         function start() {             //设置一个定时器,重

  • 使用vue.js编写蓝色拼图小游戏

    使用vue.js编写蓝色拼图小游戏

    之前在网上看到<蓝色拼图>这款小游戏,作者是用jquery写的.于是便考虑能不能用vue.js优雅简单的编写出来呢? Later equals never!说干就干.首先理解游戏的规则:第一关为1*1的方块,第二关为2*2以此类推 该图为第三关3*3的方块.点击一个小方块,该方块和它相邻的方块的的颜色会从黄色变为蓝色,全部变为蓝色就过关了. 现在规则清楚了,开动吧! /*style*/ .game_bg{ background: #333; width: 600px; height: 600p

  • 分享自己用JS做的扫雷小游戏

    分享自己用JS做的扫雷小游戏

    引用了jQuery,节省了很多鼠标点击上的判断.界面显然都是照搬Windows的扫雷啦,详细的内容注释里都有,我就不啰嗦啦~ 先上截图~ 引用了jQuery,节省了很多鼠标点击上的判断 界面显然都是照搬Windows的扫雷啦 详细的内容注释里都有,我就不啰嗦啦~ JS部分 var mineArray, //地雷数组 lastNum, //剩余雷数 countNum, //未被揭开的方块数 inGame = 0, //游戏状态,0为结束,1为进行中,2为初始化完毕但未开始 startTime; /

  • js实现贪吃蛇小游戏

    js实现贪吃蛇小游戏

    本文实例为大家分享了js实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

  • 原生js实现贪食蛇小游戏的思路详解

    原生js实现贪食蛇小游戏的思路详解

    先不多说先上图 下面是代码部分(这里你可以根据需要改变蛇头和身体还有食物的图片,然后默认的样式是使用纯颜色的如果没有更改我的背景图片的话------改这些图开始是想搞笑一下朋友哈哈哈,请不要在意哈),还有操作键是使用 ↑ ↓ ← → ) <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>贪食蛇</title>

  • 原生JS实现贪吃蛇小游戏

    本文实例为大家分享了JS实现贪吃蛇小游戏的具体代码,供大家参考,具体内容如下 思路:在页面上添加一个地图,以提供边界,在地图中随机出现食物,给蛇身设置一个初始长度,用键盘方向键控制蛇的走向,当蛇触碰到食物时(既坐标重复时),增加蛇身长度,碰到墙壁或自身时,程序停止,游戏结束. HTML结构: <body> <div id="map"></div> </body> CSS样式: <style> #map{ width: 600p

  • JS实现躲避粒子小游戏

    本文实例为大家分享了JS实现躲避粒子小游戏的具体代码,供大家参考,具体内容如下 小项目的实战操作可以帮助我们更好的掌握javascript 躲避例子游戏规则:拖拽红球躲避绿球碰撞,拖拽过程不能触碰容器内壁,以赢得游戏持久度 页面效果: 实现过程 不积小流,无以成江海. 将页面效果的实现细分成小步实现:页面结构的构建,样式修饰,js中小绿球在容器顶部随机位置生成.小绿球非水平非垂直方向的运动.小绿球碰撞容器内壁后弹性运动.生成多个小绿球.拖拽红球.红球的边界判断.红球与绿球的碰撞检测."坚持n秒&

  • js实现双人五子棋小游戏

    本文实例为大家分享了js实现双人五子棋小游戏的具体代码,供大家参考,具体内容如下 这是自己自学js的时候,在网上找的js源码,由于是自学,花了数小时才把这个源码大致弄明白. 大致算法 自定义棋盘规格,直接在棋盘建新div就可以,长度宽度用计算就可以了.下棋,在div里再建class,这里要给每个class标一个site值,由site值写出该棋子竖直方向和横向的坐标,由坐标可以写出棋子胜利的条件.而棋子的黑白走是用标识符,偶的标识符则是白棋子的class.奇的标识符则是黑棋子的class. ps

  • js实现跳一跳小游戏

    本文实例为大家分享了js实现跳一跳小游戏的具体代码,供大家参考,具体内容如下 效果 流程分析 1.鼠标按下开始蓄力 2.鼠标松开,根据鼠标按下的时间让小球运动相应的距离 3.判断小球落点是否在平台内 4.如果在平台范围内,产生下一个平台,分数加10.如果不在游戏结束,判断分数是否大于历史最高分,更新历史最高分. 动画效果 5.鼠标按下小球所在平台要有蓄力效果,鼠标松开后慢慢恢复, 6.小球在空中的运动曲线要平滑 7.小球和平台要有3D效果 注意事项 8.运动涉及到计算器和延时器,要注意清除定时器

随机推荐