js小游戏--消消乐

该小游戏原理是在页面随机生成"img"标签，点击鼠标即可消除该“img”标签并且在页面上方会显示游戏的剩余时间，按下开始按钮即可开始游戏，游戏过程中也可以暂停游戏，页面存在15个图片标签即可结束游戏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<style>#d2{width: 75px;height: 19px;border: 1px solid gray;display: inline-block;}#d3{height: 20px;background: firebrick;display: inline-block;}
</style>
<script>var count=0;var clock;var time;var num=0;window.onload=f3;function init() {window.clearInterval(clock);window.clearInterval(time);clock=window.setInterval("f()",500);time=window.setInterval("f2()",1000);}function f() {var imgs=document.createElement("img");imgs.src="timg2.jpg";imgs.onclick=f1;imgs.width=Math.floor(Math.random()*100+100);imgs.style.position="absolute";imgs.style.left=Math.floor(Math.random()*1720+100)+"px";imgs.style.top=Math.floor(Math.random()*680+100)+"px";document.body.appendChild(imgs);if (count>=15) {alert("结束");window.clearInterval(clock);location.reload();}count++;var tempo=document.getElementById("d3");tempo.style.width=count*5+"px";}function f1() {this.parentNode.removeChild(this);count--;var tempo=document.getElementById("d3");tempo.style.width=count*5+"px";}function f2() {var d1=document.getElementById("d1");d1.innerHTML=num++;}function f3() {window.open("Trash.html","Trash","width=620 height=370 top=400 left=300");}
</script>
<body>
<input type="button" value="开始" onclick="init()">
<input type="button" value="暂停" onclick=alert("暂停")>
<span id="d2"><span id="d3"></span></span>
进行了<span id="d1">0</span>秒</body>
</html>

js小游戏--消消乐相关推荐

开维控制精灵 Ctrl js 快手小游戏 - 自动消砖块
开维控制精灵 Ctrl.js 快手小游戏 - 自动消砖块 Ctrl.js是基于js语法规则的控制类脚本语言,用于自动化软件测试. Ctrl.js 需要在手机上下载"开维控制精灵", ...
糖果粉碎js小游戏代码
下载地址糖果粉碎js小游戏代码,糖果消消乐小游戏源码下载. dd:
js小游戏（飞行的小鸟--canvas）
js小游戏 (飞行的小鸟) 这个里面用到的主要是 canvas 绘图 <!DOCTYPE html> <html><head><meta charset=&q ...
是男人就要坚持30秒：原生JS小游戏
在继之前完成的数个JavaScript demo后,我发现我还没有写过JS小游戏,这次呢,我就来分享一个,非常经典的"是男人就要坚持30s"的小游戏.当然我肯定 is a man, ...
100行JS代码实现❤坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript )
坦克大战js小游戏源码 HTML5坦克大战游戏代码(HTML+CSS+JavaScript ) HTML5坦克大战网页小游戏,完美还原小霸王学习机效果,以坦克战斗及保卫基地为主题,属于策略型类游戏. ...
js小游戏之经典炸弹人（1）--地图实现
前段时间,写了一款js小游戏--经典炸弹人,因为这是第一次写游戏,对很多东西都不是很熟悉.于是,疯狂的上网找资料,结果发现,关于经典炸弹人的js资料少的可怜.所以,很是头疼了一段时间.在写完经典炸弹人 ...
js小游戏动物连连看代码
下载地址 js小游戏动物连连看代码,有多种语言切换,默认是中文.不用部署本地解压即可预览. dd:
【JavaScript】（一）解读一个js小游戏
[前言] 离公司近的好处,就在于每天都能利用自己的下班时间,更好地查漏补缺,充实技能. 最近小编做的项目需要写js偏多,而我不擅长写前端js,利用工作之余,开始学习,下面通过一个成型的js小游戏,开始 ...
js小游戏之经典炸弹人（2）--玩家的移动
在js小游戏之经典炸弹人(1)--地图实现这篇文章中,我们已经实现了地图的绘制,接下来就来谈谈玩家是如何移动的呢? 实现玩家的移动主要依靠的是键盘事件onkeypress,我们要通过操作键盘控制玩家的 ...
JS小游戏 - 盖房子
写这个JS,源于CSDN上看到的一道思考题,挺有趣的一个算法,于是根据规则写了这个JS. < html > < head > < title > JS小游 ...

js小游戏--消消乐

js小游戏--消消乐相关推荐

最新文章

热门文章