ssh小型购物网站开发,asp网站 会员注册,小超人成都网站建设,外贸网络推广公司排名#x1f31f; 前言 欢迎来到我的技术小宇宙#xff01;#x1f30c; 这里不仅是我记录技术点滴的后花园#xff0c;也是我分享学习心得和项目经验的乐园。#x1f4da; 无论你是技术小白还是资深大牛#xff0c;这里总有一些内容能触动你的好奇心。#x1f50d; #x… 前言 欢迎来到我的技术小宇宙 这里不仅是我记录技术点滴的后花园也是我分享学习心得和项目经验的乐园。 无论你是技术小白还是资深大牛这里总有一些内容能触动你的好奇心。 洛可可白个人主页 个人专栏✅前端技术 ✅后端技术 个人博客洛可可白博客 代码获取bestwishes0203 封面壁纸洛可可白wallpaper 文章目录 打造你的HTML5打地鼠游戏零基础入门教程简介准备工作创建游戏结构1. HTML布局 设计游戏样式2. CSS样式 实现游戏逻辑3. JavaScript编程 全部代码 结语 往期精彩回顾 打造你的HTML5打地鼠游戏零基础入门教程
简介
在这个教程中我们将一起学习如何使用HTML、CSS和JavaScript来创建一个简单的打地鼠游戏。这不仅是一个有趣的项目也是学习前端开发技能的绝佳方式。 体验地址 PC端体验地址 洛可可白⚡️打地鼠 暂时只支持键盘输入操作 准备工作
确保你的开发环境已经安装了现代浏览器如Chrome、Firefox或Safari。我们将使用这些浏览器的开发者工具来调试和优化我们的游戏。
代码编辑器我推荐 Visual Studio Code
创建游戏结构
1. HTML布局
首先我们需要创建一个基本的HTML页面它将包含游戏的布局和地鼠洞。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title洛可可白⚡️打地鼠/titlelink relstylesheet hrefstyles.css
/head
bodydiv idgame-containerdiv classwam-holediv classwam-mole/div/divdiv classwam-holediv classwam-mole/div/div!-- 更多地鼠洞 --/divscript srcscript.js/script
/body
/html设计游戏样式
2. CSS样式
接下来我们将使用CSS来美化我们的游戏界面。 /* styles.css */* {box-sizing: border-box;}h1 {text-align: center;line-height: 30px;}.bigBox {width: 60%;height: 400px;margin: 20px auto;background-color: #cbbb3e;}.wam-container {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;height: 260px;}.wam-hole {position: relative;width: 100px;height: 100px;margin: 0 20px;background-color: #f5732d;}.wam-mole {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* 地鼠 */background-image: url(https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg);background-size: 100% 100%;display: none;}.wam-mole--up {display: block;}.wam-score {font-size: 2rem;text-align: center;}.wam-message {font-size: 1rem;text-align: center;margin-top: 20px;cursor: pointer;}/* 你可以添加更多的CSS来美化地鼠洞和地鼠 */实现游戏逻辑
3. JavaScript编程
现在我们将使用JavaScript来添加游戏逻辑。
const container document.querySelector(.wam-container);const scoreBoard document.querySelector(.wam-score);const message document.querySelector(.wam-message);const moles Array.from(container.querySelectorAll(.wam-hole));let lastHole;let score 0;let isPlaying false;let timeUp false;// 随机时间生成地鼠function popUpMole() {if (timeUp) return;const time Math.random() * (1500 - 500) 500;const hole randomHole(moles);hole.querySelector(div).classList.add(wam-mole--up);setTimeout(() {hole.querySelector(div).classList.remove(wam-mole--up);if (!timeUp) popUpMole();}, time);}// 随机选择一个地鼠洞function randomHole(holes) {const idx Math.floor(Math.random() * holes.length);const hole holes[idx];if (hole lastHole) return randomHole(holes);lastHole hole;return hole;}// 点击地鼠function whackMole(e) {if (!e.isTrusted) return; // 防止作弊if (!isPlaying) return;if (!e.target.matches(.wam-mole)) return;score;scoreBoard.textContent 分数: ${score};e.target.parentNode.querySelector(div).classList.remove(wam-mole--up);}// 开始游戏function startGame() {score 0;scoreBoard.textContent 分数: 0;isPlaying true;timeUp false;message.textContent ;popUpMole();setTimeout(() {isPlaying false;timeUp true;message.textContent 一分钟您的得分是: ${score}点我再来一次;}, 60000);}// 初始化地鼠洞moles.forEach((mole) mole.addEventListener(click, whackMole));document.querySelector(.wam-message).addEventListener(click, startGame);这段代码创建了一个简单的游戏循环每秒钟随机显示一个地鼠并在用户点击地鼠时给予反馈。你可以根据需要调整地鼠出现的速度和游戏的其他方面。
全部代码
!DOCTYPE html
html langenheadmeta charsetUTF-8 /meta http-equivX-UA-Compatible contentIEedge /meta nameviewport contentwidthdevice-width, initial-scale1.0 /title洛可可白⚡️打地鼠/titlestyle* {box-sizing: border-box;}h1 {text-align: center;line-height: 30px;}.bigBox {width: 60%;height: 400px;margin: 20px auto;background-color: #cbbb3e;}.wam-container {display: flex;flex-wrap: wrap;justify-content: center;align-items: center;height: 260px;}.wam-hole {position: relative;width: 100px;height: 100px;margin: 0 20px;background-color: #f5732d;}.wam-mole {position: absolute;top: 0;left: 0;width: 100%;height: 100%;/* 地鼠 */background-image: url(https://pic.52112.com/180516/EPS180516_57/9jagBhddHW_small.jpg);background-size: 100% 100%;display: none;}.wam-mole--up {display: block;}.wam-score {font-size: 2rem;text-align: center;}.wam-message {font-size: 1rem;text-align: center;margin-top: 20px;cursor: pointer;}/style/headbodyh1打地鼠/h1div classbigBoxdiv classwam-containerdiv classwam-holediv classwam-mole/div/divdiv classwam-holediv classwam-mole/div/divdiv classwam-holediv classwam-mole/div/divdiv classwam-holediv classwam-mole/div/divdiv classwam-holediv classwam-mole/div/div/divdiv classwam-score分数: 0/divdiv classwam-message准备好了吗点击我开始/div/divscriptconst container document.querySelector(.wam-container);const scoreBoard document.querySelector(.wam-score);const message document.querySelector(.wam-message);const moles Array.from(container.querySelectorAll(.wam-hole));let lastHole;let score 0;let isPlaying false;let timeUp false;// 随机时间生成地鼠function popUpMole() {if (timeUp) return;const time Math.random() * (1500 - 500) 500;const hole randomHole(moles);hole.querySelector(div).classList.add(wam-mole--up);setTimeout(() {hole.querySelector(div).classList.remove(wam-mole--up);if (!timeUp) popUpMole();}, time);}// 随机选择一个地鼠洞function randomHole(holes) {const idx Math.floor(Math.random() * holes.length);const hole holes[idx];if (hole lastHole) return randomHole(holes);lastHole hole;return hole;}// 点击地鼠function whackMole(e) {if (!e.isTrusted) return; // 防止作弊if (!isPlaying) return;if (!e.target.matches(.wam-mole)) return;score;scoreBoard.textContent 分数: ${score};e.target.parentNode.querySelector(div).classList.remove(wam-mole--up);}// 开始游戏function startGame() {score 0;scoreBoard.textContent 分数: 0;isPlaying true;timeUp false;message.textContent ;popUpMole();setTimeout(() {isPlaying false;timeUp true;message.textContent 一分钟您的得分是: ${score}点我再来一次;}, 60000);}// 初始化地鼠洞moles.forEach((mole) mole.addEventListener(click, whackMole));document.querySelector(.wam-message).addEventListener(click, startGame);/script/body
/html 结语
恭喜你现在你已经创建了一个基本的打地鼠游戏这个游戏可以作为一个起点你可以添加计分系统、动画效果、音效等来提升游戏体验。记得保存你的代码并在浏览器中打开HTML文件来查看游戏效果。祝你编程愉快
如果对你有帮助点赞、收藏、关注是我更新的动力 往期精彩回顾 VS Code上搭建Vue开发环境 文章浏览阅读10.1k次点赞64次收藏13次。 Color-UI 简介及使用教程 文章浏览阅读5.9k次点赞13次收藏2次。 Vue.2Vue.3项目引入Element-UI教程踩坑 文章浏览阅读9.2k次点赞82次收藏22次。 VS code搭建C/C运行环境简单易上手 文章浏览阅读2.7k次点赞8次收藏5次。 入门指南使用uni-app构建跨平台应用 文章浏览阅读1.2k次点赞29次收藏9次。
