简单的纯JS小游戏--消灭星星

先看看效果图：

因为CSDN图片大小的限制，所以只截了部分区域

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

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

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

<script>function start() {//设置一个定时器，重复执行的秒数是500mstimer = 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>

简单的纯JS小游戏--消灭星星相关推荐

js小游戏 - 消灭星星
在线地址简介: 刚学js的时候写了一个消灭星星的小游戏的, 现在改进下算法,复用dom加快渲染: <!DOCTYPE html> <html lang="en" ...
JavaScript+HTML实现小游戏“消灭星星”
代码可全部用JavaScript写,也可以用使用CSS添加部分样式.下面代码全部放在头部里面. window.onload=function(){document.body.bgColor=" ...
canvas+js实现简单的数字华容道小游戏
数字华容道是个很简单的小游戏,今天就尝试使用canvas+js做个简单的数字华容道小游戏.有关于游戏的具体规则请上网查阅. 一如既往先写个html页面,这里我把游戏的界面水平居中了,这里预留了一个动画 ...
Html：简单实现弹砖块小游戏
用html与js实现简单的弹砖块小游戏(初级) 用键盘的左右键控制一个板块让小球反弹,小球反弹到上面,与其相碰的砖块会消失,小球落地会重新开始游戏. 弹砖块小游戏--初级第一部分body:要注意格式 ...
是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
创意小游戏《星星的天空之梦》团队专访
"创意不是自我陶醉,我认为好的创意应该是对现存概念的衍生.重组以及一定程度的天马行空." Cocos 创意小游戏专访系列希望通过对开发团队的采访以及创意小游戏亮点玩法的提炼,带 ...
js小游戏之经典炸弹人（2）--玩家的移动
在js小游戏之经典炸弹人(1)--地图实现这篇文章中,我们已经实现了地图的绘制,接下来就来谈谈玩家是如何移动的呢? 实现玩家的移动主要依靠的是键盘事件onkeypress,我们要通过操作键盘控制玩家的 ...
祖玛弹珠js小游戏代码
下载地址简单的祖玛弹珠js小游戏代码,原生JavaScript带实现的祖玛游戏. dd:

简单的纯JS小游戏--消灭星星

简单的纯JS小游戏--消灭星星相关推荐

最新文章

热门文章