JS实现打地鼠小游戏案例，文末附素材

思路：

1.随机冒出老鼠

2.出来后要回去

3.出来以后点击它点击到切换成击中效果的图片分数累加

知识点

随机数 math 对象

dom 定位元素

对属性值的修改 src

击打效果给它一个点击

分数累加

最终的分数要放到h1标签中

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title><style>body table {margin: 0 auto;}table {background-image: url('./images/beijing.jpg');}table caption {font-family: 'Courier New', Courier, monospace;font-size: 30px;}table td {width: 100px;height: 100px;}img {margin-top: 30px;}
</style>
</head><body><h1>分数:0分</h1><table><caption>打地鼠</caption><tr><td><img src="./images/keng.gif" alt=""></td><td><img src="./images/keng.gif" alt=""></td><td><img src="./images/keng.gif" alt=""></td></tr><tr><td><img src="./images/keng.gif" alt=""></td><td><img src="./images/keng.gif" alt=""></td><td><img src="./images/keng.gif" alt=""></td></tr><tr><td><img src="./images/keng.gif" alt="" ></td><td><img src="./images/keng.gif" alt="" ></td><td><img src="./images/keng.gif" alt="" ></td></tr></table><embed src="./bgm.mp3" type=""><script>// 获取所有的img  var imgs = document.getElementsByTagName('img');var num = 0; // 存放随机数var count = 0; // 总分setTimeout("shows()",Math.random()*500+600);// 老鼠出来function shows() {num = Math.floor(Math.random()*9);imgs[num].src = "./images/dishu.gif";imgs[num].style.marginTop = '0px';imgs[num].setAttribute("onclick","shot()");setTimeout("hides()",Math.random()*500+600);}// 老鼠隐藏function hides() {imgs[num].src = "./images/keng.gif";imgs[num].style.marginTop = '31px';imgs[num].removeAttribute("onclick");setTimeout("shows()",Math.random()*500+600);}// 打老鼠的效果function shot() {imgs[num].src = "./images/shang.gif";imgs[num].style.marginTop = '5px';imgs[num].removeAttribute("onclick");count += 10;document.querySelector('h1').innerHTML = `分数:${count}分`}</script>
</body></html>

附图片

JS实现打地鼠小游戏案例，文末附素材相关推荐

80行代码自己动手写一个表格拆分与合并小工具（文末附工具下载）
点击上方"Python爬虫与数据挖掘",进行关注回复"书籍"即可获赠Python从入门到进阶共10本电子书今日鸡汤瑶池阿母绮窗开,黄竹歌声动地哀. ...
java 打地鼠源代码_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
敲地鼠java_Java实现的打地鼠小游戏完整示例【附源码下载】
本文实例讲述了Java实现的打地鼠小游戏.分享给大家供大家参考,具体如下: 这里涉及到java线程和GUI的相关知识,一个简单的java小游戏打地鼠,有兴趣的朋友可以优化一下.先来看看运行效果: 具体 ...
“数字炸弹“——练习Python基础知识的小游戏【文末源码地址】
文章目录数字"炸弹" 基本代码核心代码源码地址数字"炸弹" 数字炸弹小游戏,平时可以多个人一块玩.游戏规则也很简单:从0~100之间选一个数字,作为&q ...
html5猜数字游戏代码,js猜数字小游戏的简单实现代码
复制代码代码如下: 简易计算机 //获取随机数 function GetRandomNum(Min,Max) { var Range = Max - Min; var Rand = Math.ran ...
打地鼠小游戏（HTML5+CSS+JS）
打地鼠小游戏(HTML5+CSS+JS) 文章目录打地鼠小游戏(HTML5+CSS+JS) 预设有两个文件(htlm和css)加一个文件夹(放图片) 设置基本界面 (1)背景图 (2)开始按钮 (3 ...
linux打地鼠游戏代码,JavaScript实现打地鼠小游戏
一.实验说明 1. 环境介绍本实验环境采用Ubuntu Linux桌面环境,实验中会用到桌面上的程序: Xfce终端: Linux命令行终端,打开后会进入Bash环境,可以使用Linux命令 Fir ...
php五子棋,JS实现五子棋小游戏
这次给大家带来JS实现五子棋小游戏,JS实现五子棋小游戏的注意事项有哪些,下面就是实战案例,一起来看一下. 思路: 1.先用canvas画五子棋的棋盘 2.获取鼠标点击的位置 3.根据鼠标点击的位置判 ...
用DW敲-打地鼠小游戏
相信大部分的道友们都玩过打地鼠的游戏吧,游戏的机制非常简单,所以今天我就分享一个极其不完善的打地鼠小游戏的代码给大家. 为什么是极其不完善的呢?因为该有的功能基本有,不该有的功能当然没有啦! 说人话部 ...

JS实现打地鼠小游戏案例，文末附素材

JS实现打地鼠小游戏案例，文末附素材相关推荐

最新文章

热门文章