js实现简单打地鼠小游戏

一、简要

小地鼠随机出现在固定大区域，以每次固定时间间隔、不同的个数出现。玩家点中地鼠会记录砸中地鼠的次数，同时地鼠的状态会发生变化，游戏设置倒计时，倒计时结束游戏结束，弹出玩家砸中次数。

二、思路：

1.大盒子里面每隔一段时间就在不同的位置的出现小格子，取随机数来实现不同的出现位置

2.大盒子里面每隔一段时间就出现不同的数量的小格子，取随机数来每次定义出现的数量

3.记录的砸中次数和变化效果使用dom点击事件

三、程序实现效果：

1.游戏开始

2.砸中地鼠，记录加分，地鼠状态变化

3.游戏结束

四、具体代码

1.js代码

<script>// 实现效果// 大盒子里面每隔一段时间就在不同的位置出现不同数量小格子var a = document.querySelector('.rect');var c = 0;var d = document.querySelector('.text');var ul = document.querySelector('ul');var time = 9;var djs = document.querySelector('.text1')setInterval(fun,1000);function fun(){if(time == -1){clearInterval(fun);alert('你的总分是：'+c+'分！');}else{djs.innerHTML = '还有'+time + '秒后结束';time-- ;};}function init() {var num = Math.floor(Math.random() * 5 + 1);//每次出现的随机数量1-5for (var j = 0; j < num; j++) {ul.innerHTML += "<li></li>";}// 1.获取所有的li元素ul1 = document.querySelector('ul'); //重新获取父级ulvar li = document.querySelectorAll('li');// 2.利用for循环遍历小格子for (var i = 0; i < li.length; i++) {var a = Math.floor(Math.random() * 7 + 1) * 50;var b = Math.floor(Math.random() * 7 + 1) * 50;li[i].id = i;li[i].style.marginLeft = a + "px";li[i].style.marginTop = b + "px";li[i].style.backgroundColor = 'orange';li[i].innerHTML = '地鼠';li[i].onclick = function () {//点击事件记录砸中地鼠c += 1;this.style.backgroundColor = 'red';//变化颜色this.innerHTML = '砸中了';d.innerHTML = "砸中了" + c + "次";}}}setInterval(() => {//注意不能用K++来删除元素，因为ul.children.length 是动态变化的for (let k = ul.children.length - 1; k >= 0; k--) {ul.removeChild(ul.children[k]); //删除元素}init();}, 800);init();
</script>

2.head的CSS代码与body代码

  <style type="text/css">* {padding: 0;margin: 0;list-style: none;box-sizing: border-box;}#rect {width: 400px;height: 400px;margin: 50px auto;background: wheat;}ul {width: 400px;height: 400px;overflow: hidden;}li {position: absolute;width: 50px;height: 50px;float: left;font-size: 10px;line-height: 50px;text-align: center;}.text {font-size: 20px;margin-left: 45%;}.text1{color: red;font-size: 25px;margin-left: 43%;}</style>
</head><body><div id="rect"><ul></ul></div><div class="text1">还有10秒后结束</div><span class="text">砸中了0次</span>
</body>

js实现简单打地鼠小游戏相关推荐

JS实现简单农场小游戏
JS实现简单农场小游戏简介效果展示代码实现在线预览简介最近抽空写了一个简单的农场小游戏,比较简陋,目的只是为了练习js开发能力. 游戏界面顶部包含昵称.经验值.等级和金币信息展示.经验的获 ...
利用js制作的简单网页小游戏
利用html和js制作的简单的网页小游戏这个是我第一次利用js制作网页的小游戏,若有错误欢迎指出. 设计的游戏是类似于配对的小游戏.废话不多说,直接上代码,代码中有比较详细的说明. <!DOC ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
用DW敲-打地鼠小游戏
相信大部分的道友们都玩过打地鼠的游戏吧,游戏的机制非常简单,所以今天我就分享一个极其不完善的打地鼠小游戏的代码给大家. 为什么是极其不完善的呢?因为该有的功能基本有,不该有的功能当然没有啦! 说人话部 ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
python跑酷游戏源码_Phaser.js实现简单的跑酷游戏附源码下载
采用的物理引擎是Phaser.js 在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿) 效果展示: 源码(详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone) 1.创建游戏舞台 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
如何用python制作五子棋游戏_Python制作打地鼠小游戏
原文链接 Python制作小游戏(二十一)mp.weixin.qq.com 效果展示打地鼠小游戏https://www.zhihu.com/video/1200492442610450432 简介 ...

js实现简单打地鼠小游戏

js实现简单打地鼠小游戏相关推荐

最新文章

热门文章