news 2026/6/9 12:18:34

离线一分钟小游戏《挖宝石》

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
离线一分钟小游戏《挖宝石》

公司内网无外网的情况下,就玩这个…
把上面代码全选→复制→记事本→另存为“miner.html”。
双击打开,方向键或WASD移动。
挖土找绿宝石(+10分),躲开灰色落石。
60秒倒计时结束或被砸中即游戏结束,刷新可重开。

<!DOCTYPEhtml><htmllang="zh-CN"><head><metacharset="utf-8"><title>像素矿工</title><style>body{margin:0;background:#111;display:flex;justify-content:center;align-items:center;height:100vh;font-family:monospace;color:#fff}canvas{border:2px solid #444;background:#000}#hud{position:absolute;top:10px;left:50%;transform:translateX(-50%);font-size:18px}</style></head><body><divid="hud">时间<spanid="t">60</span>分数<spanid="s">0</span></div><canvasid="c"></canvas><script>constC=document.getElementById('c'),X=C.getContext('2d');C.width=400;C.height=400;constS=20,G=20;// 格子大小 & 行列数constmap=Array.from({length:G},()=>Array(G).fill(1));// 1=土 0=空constgems=[],rocks=[];// 宝石与落石letpx=0,py=0,score=0,timeLeft=60,gameOver=false;// 随机挖个初始空洞for(leti=0;i<60;i++){letrx=Math.floor(Math.random()*G),ry=Math.floor(Math.random()*G);map[ry][rx]=0;}// 初始玩家位置px=Math.floor(Math.random()*G)*S;py=Math.floor(Math.random()*G)*S;// 键盘constkeys={};onkeydown=e=>keys[e.key.toLowerCase()]=1;onkeyup=e=>keys[e.key.toLowerCase()]=0;// 生成宝石functionspawnGem(){letx=Math.floor(Math.random()*G)*S;lety=Math.floor(Math.random()*G)*S;gems.push({x,y});}for(leti=0;i<10;i++)spawnGem();// 生成落石functionspawnRock(){letx=Math.floor(Math.random()*G)*S;rocks.push({x,y:0});}// 主循环setInterval(()=>{if(gameOver)return;// 倒计时timeLeft-=0.05;if(timeLeft<=0){gameOver=true;alert('时间到!得分:'+score);}document.getElementById('t').textContent=Math.ceil(timeLeft);// 移动letnx=px,ny=py;if(keys['a']||keys['arrowleft'])nx-=S;if(keys['d']||keys['arrowright'])nx+=S;if(keys['w']||keys['arrowup'])ny-=S;if(keys['s']||keys['arrowdown'])ny+=S;nx=Math.max(0,Math.min(C.width-S,nx));ny=Math.max(0,Math.min(C.height-S,ny));// 挖土letgx=nx/S|0,gy=ny/S|0;if(map[gy][gx]===1)map[gy][gx]=0;px=nx;py=ny;// 捡宝石gems.forEach((g,i)=>{if(Math.abs(g.x-px)<S&&Math.abs(g.y-py)<S){gems.splice(i,1);score+=10;spawnGem();}});// 落石if(Math.random()<0.02)spawnRock();rocks.forEach((r,i)=>{r.y+=3;if(r.y>C.height)rocks.splice(i,1);if(Math.abs(r.x-px)<S&&Math.abs(r.y-py)<S){gameOver=true;alert('你被落石砸中!得分:'+score);}});// 绘制X.fillStyle='#000';X.fillRect(0,0,C.width,C.height);// 画地图for(lety=0;y<G;y++){for(letx=0;x<G;x++){if(map[y][x]===1){X.fillStyle='#654';X.fillRect(x*S,y*S,S,S);}}}// 画宝石gems.forEach(g=>{X.fillStyle='#3f3';X.fillRect(g.x+6,g.y+6,8,8)});// 画落石rocks.forEach(r=>{X.fillStyle='#aaa';X.fillRect(r.x+4,r.y+4,12,12)});// 画玩家X.fillStyle='#f63';X.fillRect(px+2,py+2,S-4,S-4);document.getElementById('s').textContent=score;},50);</script></body></html>

最近业务不忙,所以丧心病狂的资本家开始作妖了!收手机,关外网…能玩的就一个能通电的铁疙瘩…所以你看到了上边的html~你知道我有多无聊么…

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/6/9 17:27:02

Redis面试必知:持久化、哨兵、集群与缓存穿透全解析

一、Redis 持久化机制深度剖析 在 Redis 的应用中&#xff0c;持久化是一项关键特性&#xff0c;它确保了即使在服务器崩溃、重启或其他意外情况下&#xff0c;数据也能得以保存和恢复。Redis 提供了多种持久化方式&#xff0c;每种方式都有其独特的优势和适用场景&#xff0c;…

作者头像 李华
网站建设 2026/6/9 15:25:40

22、网络驱动:数据结构与数据包处理

网络驱动:数据结构与数据包处理 1. 以太网设备的设置与拆卸 1.1 ether_ifattach 函数 ether_ifattach 函数用于为以太网设备设置 ifnet 结构。该函数接收一个 ifnet 结构 ifp 和一个链路层地址 lla ,并对 ifp 进行一系列设置: #ifdef VIMAGEifp->if_reass…

作者头像 李华
网站建设 2026/6/4 23:54:23

3步法揭秘:如何用提示工程让AI输出质量稳定提升72%

3步法揭秘&#xff1a;如何用提示工程让AI输出质量稳定提升72% 【免费下载链接】generative-ai Sample code and notebooks for Generative AI on Google Cloud 项目地址: https://gitcode.com/GitHub_Trending/ge/generative-ai 在生成式AI项目开发中&#xff0c;我们常…

作者头像 李华
网站建设 2026/6/7 21:20:03

向量数据库集成中的常见陷阱与性能优化策略

向量数据库集成中的常见陷阱与性能优化策略 【免费下载链接】mindsdb mindsdb/mindsdb: 是一个基于 SQLite 数据库的分布式数据库管理系统&#xff0c;它支持多种数据存储方式&#xff0c;包括 SQL 和 NoSQL。适合用于构建分布式数据库管理系统&#xff0c;特别是对于需要轻量级…

作者头像 李华
网站建设 2026/6/9 5:41:03

Bananas:免费跨平台屏幕共享工具完整使用教程

Bananas&#xff1a;免费跨平台屏幕共享工具完整使用教程 【免费下载链接】bananas Bananas&#x1f34c;, Cross-Platform screen &#x1f5a5;️ sharing &#x1f4e1; made simple ⚡. 项目地址: https://gitcode.com/gh_mirrors/ba/bananas Bananas是一款简单易用…

作者头像 李华
网站建设 2026/6/8 13:46:41

终极指南:离线环境一键部署宝塔面板7.7.0

你是否曾在完全断网的环境中束手无策&#xff1f;是否因网络限制而无法享受便捷的服务器管理体验&#xff1f;今天&#xff0c;我们将一起解决这个技术难题&#xff0c;让你在零网络环境下也能轻松搭建功能完整的宝塔面板7.7.0版本。 【免费下载链接】btpanel-v7.7.0 宝塔v7.7.…

作者头像 李华