简约打地鼠HTML5源码_html5打地鼠游戏源码,html打地鼠代码资源-CSDN文库

共2个文件

html：1个

png：1个

版权申诉

html5

html

5星 · 超过95%的资源 50 浏览量 2022-03-18 10:09:33 上传评论收藏 86KB RAR 举报

【简约打地鼠HTML5源码】是一款基于HTML5技术开发的简单游戏，适用于学习和实践前端编程。这个游戏的核心在于其交互性和动态性，利用HTML5的Canvas元素、JavaScript编程以及CSS3样式来实现。接下来，我们将深入探讨这些知识点。 HTML5是超文本标记语言的最新版本，它引入了许多新特性，比如离线存储、音频/视频处理、拖放功能、Canvas绘图等。在这款游戏中，Canvas起着至关重要的作用。Canvas是HTML5中的一个图形绘制区域，通过JavaScript可以实现实时的动态图形绘制，例如在游戏中创建地鼠洞口、地鼠的动画效果等。 JavaScript是实现游戏逻辑的主要语言，它与HTML5结合，提供了丰富的交互体验。在这个“简约打地鼠”游戏中，JavaScript负责处理用户输入（如鼠标点击）、游戏规则（如地鼠出现和消失的时间间隔、得分计算）以及游戏状态的更新（如游戏开始、暂停、结束）。此外，JavaScript还可以通过AJAX实现与服务器的异步通信，虽然在本例中可能并未涉及。 CSS3是层叠样式表的第三版，提供了许多新的样式和动画功能。在游戏界面设计中，CSS3可以用来设置游戏背景、按钮样式、字体效果等，让游戏更加美观。例如，通过CSS3的过渡和动画效果，可以实现地鼠钻出洞口的平滑动作，或者游戏得分变化时的动态显示。游戏的结构通常包括以下几个部分： 1. HTML结构：定义页面的基本元素，如Canvas元素，用于游戏画面的绘制。 2. CSS样式：定义元素的外观，包括颜色、布局、动画等。 3. JavaScript脚本：处理游戏逻辑，如事件监听、计时器、游戏状态控制等。 4. 数据结构：可能包含JSON或其他格式的数据，用于存储游戏数据，如分数、关卡等。在实际开发过程中，开发者可能会使用到一些现代前端框架或库，如jQuery简化DOM操作，或者Three.js这样的库进行Canvas的3D渲染，但根据题目描述，这个项目可能没有使用这些高级工具，而是纯JavaScript原生实现。通过分析和理解这款简约打地鼠HTML5源码，开发者不仅可以掌握HTML5、CSS3和JavaScript的基本应用，还能了解到如何将它们整合在一起构建一个完整的交互式游戏。这对于初学者来说是一个很好的实践项目，有助于提升前端开发技能，并对网页动态效果有更深入的理解。

资源推荐

资源详情

资源评论

收起资源包目录

67.rar （2个子文件）

ds.png 85KB

index.html 5KB

<!DOCTYPE html> <html> <head lang="en"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no"> <meta charset="UTF-8"> <title>HTML5简约打地鼠小游戏</title> <style type="text/css"> *{ padding: 0; margin: 0; } body{ text-align: center; background-color: cornsilk; overflow: hidden; } h1{ font-size: 40px; margin-top: 50px; } h2{ margin-top:20px; } img,.active{ position: absolute; width: 33.33%; max-width: 300px; max-height: 300px; transform: scale(0); -webkit-transform: scale(0); transition: all .4s ease-out; -webkit-transition: all .4s ease-out;/*动画*/ } .active{ transform: scale(1); -webkit-transform: scale(1); } canvas,div{ position: absolute; left: 50%; width: 72%; height: auto; max-width: 1000px; max-height: 1000px; transform: translate(-50%,0%); -webkit-transform: translate(-50%,0%);/*居中*/ margin-top: 50px; } div{z-index: 1;} #temp{ position: fixed; top: 200%; left: 200%; transform: scale(0.1); -webkit-transform: scale(0.1); } </style> </head> <body> <h1>打地鼠</h1> <h2>得分:0</h2> <h2>剩余机会:3</h2> <div class="diShu"> </div> <canvas>对不起。。。</canvas> <img id="temp" src="ds.png"> <script> var canvas = document.getElementsByTagName("canvas")[0]; canvas.width = 1000; canvas.height = 1000; var cubes = 3; var ctx = canvas.getContext("2d"); ctx.fillStyle = "#d9bf9a"; var areaSize = 1000/cubes; var cubeSize = areaSize*0.96; ctx.translate(areaSize*0.02,areaSize*0.02); var rats = []; var points; var hp; var interval; var t,t2; window.onload = function(){ drawPannel();//游戏中的方格是用canvas画的 initGame();//初始化游戏 }; function initGame(){ points = 0; hp = 3; interval = 100; document.getElementsByTagName("h2")[0].innerHTML = "得分:"+points; document.getElementsByTagName("h2")[1].innerHTML = "剩余机会:"+hp; t = setInterval(function(){ generateRats();//产生地鼠的方法 maintanceRats();//维护地鼠的方法 },interval); } function drawPannel(){//画出方格，每个方格放一个地鼠并且隐藏 for(var i=0;i<cubes;i++){ for(var j=0;j<cubes;j++){ ctx.fillRect(i*areaSize,j*areaSize,cubeSize,cubeSize);//画一个方格 var img = new Image(); img.src = "ds.png"; img.style.left = i*33.33 + "%"; img.style.top = j*0.3333*canvas.clientHeight + "px"; img.addEventListener("mousedown",clicked);//两种事件是为了适配不同的移动设备 img.addEventListener('touchstart', touched); document.getElementsByTagName("div")[0].appendChild(img);//每个方格放地鼠 rats.push(img);//地鼠放入队列中，用于后面维护 } } } function touched(){//触摸中了 chosen(this); //var touch = event.touches[0]; //var rect = canvas.getBoundingClientRect(); //checkArea(touch.pageX - rect.left,touch.pageY - rect.top); } function clicked(){//点击中了 chosen(this); //var rect = canvas.getBoundingClientRect(); //checkArea(event.clientX - rect.left,event.clientY - rect.top); } function chosen(rat){ if(rat.className == "active"){//如果地鼠显示出来了 rat.classList.remove("active");//隐藏 points ++;//加分 document.getElementsByTagName("h2")[0].innerHTML = "得分:"+points;//更新分数显示 interval -= interval*0.03>2?interval*0.03:interval*0.015;//增加游戏难度 } } function checkArea(x,y){//检测是否点中的方法，方法已经被替代，可以删除 x = Math.ceil(x/(canvas.clientWidth/3)) - 1; y = Math.ceil(y/(canvas.clientHeight/3)) - 1; console.log("点击坐标 x:"+x+",y:"+y); if(rats[x*3+y].className == "active"){ rats[x*3+y].classList.remove("active"); points ++; document.getElementsByTagName("h2")[0].innerHTML = "得分:"+points; interval -= interval*0.03>2?interval*0.03:interval*0.015; } } function generateRats(){//产生地鼠的方法 if(parseInt(Math.random()*100)%parseInt(((interval/12)>2?(interval/12):2))==0){//产生的几率越来越大 var ID = Math.ceil(Math.random()*8); if(rats[ID].className == ""){//如果没有出现 t2 = setTimeout(function(){//出现 rats[ID].classList.add("active"); rats[ID].id = interval/4;//用id表示地鼠自动消失的时间，和游戏难度相关 },500); } } } function maintanceRats(){//维护地鼠的方法 var activeRats = document.getElementsByClassName("active");//获取所有出现的地鼠 for(var i=0;i<activeRats.length;i++){//用id表示剩余时间 activeRats[i].id --; if(activeRats[i].id<0){//如果到时间了 activeRats[i].classList.remove("active");//当前地鼠隐藏 hp --;//掉血 interval *= 1.08;//回退一点游戏难度 document.getElementsByTagName("h2")[1].innerHTML = "剩余机会:"+hp;//更新血量显示 if(hp == 0){ lose(); } } } } function lose(){//如果输了 clearInterval(t);//停止计时器，等待游戏重新开始 clearTimeout(t2); setTimeout(function(){//延时一点 alert("您输了，共打了"+points+"只地鼠。"); for(var i=0;i<rats.length;i++){ rats[i].classList.remove("active");//全部地鼠隐藏 } setTimeout(function(){ initGame();//重新开始游戏 },500);//延时，等待地鼠隐藏的动画效果结束 },10); } </script> </body> </html>

评论收藏

内容反馈

版权申诉