web打地鼠（js+html）资源-CSDN文库

共6个文件

cur：2个

htm：1个

jpg：1个

移动web

javascript

html

5星 · 超过95%的资源需积分: 47 169 浏览量 2014-12-09 10:55:19 上传评论收藏 79KB ZIP 举报

：“Web打地鼠（js+html）”是一个基于JavaScript和HTML开发的互动游戏。这个游戏模拟了经典的“打地鼠”玩法，通过JavaScript控制游戏逻辑，HTML提供用户界面。：游戏的核心机制是利用JavaScript设置计时器（setTimeout或setInterval）来控制地鼠随机出现和消失的时间，以及玩家点击地鼠后的反应。HTML则用于构建游戏的布局，包括地鼠洞、得分显示、游戏状态指示等元素。【JavaScript知识点】： 1. **事件监听**：JavaScript通过添加事件监听器（addEventListener）捕捉用户对地鼠的点击，判断是否击中并更新得分。 2. **DOM操作**：使用`document.getElementById`或`querySelector`等方法获取DOM元素，以便修改其样式或内容，如显示得分、切换地鼠状态等。 3. **随机数生成**：`Math.random()`函数用于生成地鼠随机出现的位置，确保每次游戏都有不同的体验。 4. **计时器**：`setInterval`或`setTimeout`用于定时触发地鼠出现和消失的动画效果，以及游戏结束条件的检查。 5. **闭包**：在计时器回调函数中，可能需要使用到外部变量，此时需借助闭包来保持作用域的连贯性。 6. **游戏逻辑**：编写JavaScript代码实现游戏规则，如地鼠出现的频率、玩家得分计算、游戏结束条件等。【HTML知识点】： 1. **结构化文档**：HTML定义了游戏界面的基本结构，包括地鼠洞的容器、得分显示区域、开始/重玩按钮等。 2. **CSS类和ID**：为元素分配特定的类或ID，方便JavaScript进行操作，如通过类名改变地鼠的状态，通过ID获取得分元素等。 3. **图片元素**：使用`<img>`标签展示地鼠的图像，通过CSS控制其大小和位置。 4. **交互元素**：`<button>`和`<a>`等元素用于玩家与游戏的交互，如开始游戏、查看得分等。 5. **响应式设计**：为了适应移动设备，可能需要使用媒体查询（media queries）或者Bootstrap等框架，使游戏界面在不同屏幕尺寸下都能正常显示。：“移动Web”表明这个游戏设计时考虑了在手机或平板等移动设备上的兼容性，确保在小屏幕设备上也能流畅运行。“打地鼠”是游戏的主题，“javascript”和“html”是实现这个游戏的技术基础。通过这个项目，开发者可以学习到JavaScript编程、HTML布局设计以及如何将两者结合创建动态、交互性强的Web应用。同时，这也是一种提升用户体验和掌握前端技术的好方法。

资源推荐

资源详情

资源评论

收起资源包目录

地鼠.zip （6个子文件）

地鼠

打地鼠.htm 8KB

image

0.png 6KB

bg.jpg 52KB

m.gif 15KB

cur

cz1-64.cur 13KB

cz-64.cur 13KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>打地鼠(速度递增)</title> <style type="text/css"> html { margin:8px; padding:0px; height:100%; } body { margin:0px; padding:0px; height:100%;  } .bg { position:absolute; height : 480px; width : 100%; } .fast { position:absolute; margin:20px; height : 300px; width : 100%; } .m { position:absolute; height:90px; width:100px; } .btn { margin-top:482px; } </style> <script type="text/javascript"> //定义全局变量 //分数 var score = 0; //定义两个变量用于下方的setInterval 老鼠出现 /消失/ timeout var Interval; var IntervalDisappear; var t; var per; var timeAll = 2000; var timeHalf = 0.5 *timeAll; var CountsShow = 0; var CountsHit = 0; var level = 0; var levelTime; var halfLevelTime = timeHalf; var lv = 0; //top function funTop(x) { switch (x) { case 1: return x = 110 + 'px' break; case 2: return x = 110 + 'px' break; case 3: return x = 115 + 'px' break; case 4: return x = 203 + 'px' break; case 5: return x = 203 + 'px' break; case 6: return x = 200 + 'px' break; case 7: return x = 300 + 'px' break; case 8: return x = 305 + 'px' break; case 9: return x = 305 + 'px' break; } } //left function funLeft(x) { switch (x) { case 1: return x = 155 break; case 2: return x = 342 break; case 3: return x = 546 break; case 4: return x = 125 break; case 5: return x = 349 break; case 6: return x = 549 break; case 7: return x = 117 break; case 8: return x = 346 break; case 9: return x = 569 break; } } //时间到了自动停止 function funTimeout() { funStop(); } //每隔一段时间老鼠消失 function funDisappear() { t = setTimeout(" var m = document.getElementById('m'); m.style.display = 'none'; " ,halfLevelTime); } function funPercent()//图片缩放比例 { var cW = document.body.clientWidth; per = cW / 800; } //老鼠随机位置 function funRandom() { if((CountsShow - CountsHit) < 10)//有十个没打到就GameOver { if(lv==level)//等级不变 { funPercent(); var m = document.getElementById('m'); m.style.display = "none"; //随即整数1-9 代表9个位置 var random = Math.ceil(Math.random()*9); m.style.top= funTop(random); m.style.left= (funLeft(random)) * per + 'px'; m.style.width = 100 * per + 'px'; m.style.display = ""; CountsShow +=1; level = Math.floor(CountsShow / 10) } else { lv = level; funChangeLevel(); } } else { funStop(); } } function funChangeLevel() { clearInterval(Interval); clearInterval(IntervalDisappear); clearTimeout(t) levelTime = timeAll * Math.pow(0.75, level); halfLevelTime = levelTime * 0.5; var fastter = document.getElementById('fastter'); fastter.style.display = ""; setTimeout("fastter.style.display = 'none'; " ,halfLevelTime); Interval = setInterval(funRandom,levelTime); IntervalDisappear = setInterval(funDisappear,levelTime); } //开始按钮事件 function funStart() { score = 0; document.getElementById('score').innerHTML = "得分：" + score + "；等级：" + (level+1);//分数清空 Interval = setInterval(funRandom,timeAll); IntervalDisappear = setInterval(funDisappear,timeAll);//实现思路老鼠的出现和消失周期都是 timeAll ，但老鼠消失是在出现halfTimes后发生；总体效果就是出现halftimes 消失halftimes document.getElementById('btnStop').disabled=""; document.getElementById('btnStart').disabled="disabled";//按钮变化 // t = setTimeout(funTimeout,61000);//时间60000 再加上间隔时间1000 ==61000 } function funStop() { clearInterval(Interval); clearInterval(IntervalDisappear); // clearTimeout(t);//停止计时器 document.getElementById('btnStop').disabled="disabled"; document.getElementById('btnStart').disabled=""; //按钮变化 alert("游戏结束！您的得分为：" + score);//弹出成绩 CountsShow = 0; CountsHit = 0; level = 0; halfLevelTime = timeHalf; lv = 0; } function getScore()//计分 { var m = document.getElementById('m'); m.style.display = "none";//点击完地鼠消失避免重复计分 var yourScore = document.getElementById('score'); score += 1; yourScore.innerHTML = "得分：" + score + "；等级：" + (level+1); CountsHit += 1; } function funClickDown()//锤子垂下 cur变 { var m = document.getElementById('m'); var bg = document.getElementById('bg'); m.style.cursor = 'url(cur/cz1-64.cur),auto' bg.style.cursor = 'url(cur/cz1-64.cur),auto' } function funClickUp()//锤子提起 cur变 { var m = document.getElementById('m'); var bg = document.getElementById('bg'); m.style.cursor = 'url(cur/cz-64.cur),auto' bg.style.cursor = 'url(cur/cz-64.cur),auto' } </script> </head> <body> <div style="cursor:url(cur/cz-64.cur),auto"> <img id="bg" class="bg" src="image/bg.jpg" alt="" style="cursor:url(cur/cz-64.cur),auto" onmousedown="funClickDown()"; onmouseup="funClickUp()" /> <img id="m" class="m" src="image/m.gif" alt="" style="display:none; left: 345px; top: 210px;"onclick="getScore()" onmousedown="funClickDown()"; onmouseup="funClickUp()" /> <img id="fastter" class="fast" src="image/0.png" alt="" style="display:

评论收藏

内容反馈