news 2026/8/15 21:37:50

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

作者头像

张小明

前端开发工程师

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/8/15 19:51:09

18、深入探索Shell脚本基础与结构化命令

深入探索Shell脚本基础与结构化命令 1. 基础脚本构建 在Shell脚本中,我们可以将多个命令组合在一起执行。创建脚本的基本方法之一是在命令行使用分号分隔多个命令,Shell会按顺序执行每个命令,并在监视器上显示每个命令的输出。也可以创建一个Shell脚本文件,将多个命令放在…

作者头像 李华
网站建设 2026/8/15 10:17:05

Python实现Linux日志查询:从基础读取到高级分析(附实战代码)

在Linux运维中&#xff0c;日志查询是定位问题的核心手段。虽然Linux原生的grep、tail、less等命令足够强大&#xff0c;但在需要**定制化分析**、**自动化集成**、**复杂逻辑处理**&#xff08;如多日志关联分析、数据可视化&#xff09;的场景下&#xff0c;Python的优势便凸…

作者头像 李华
网站建设 2026/8/15 10:23:28

姚庄站一七里沟站区间盾构隧道 K2+300-K2+800 段开挖面稳定性数值模拟分析(任务书)

毕业论文(设计)任务书 学院 建筑工程学院 专业 土木工程 班级 学生姓名 指导教师姓名 1.毕业论文(设计)题目:姚庄站一七里沟站区间盾构隧道 K2+300-K2+800 段开挖面稳定性数值模拟分析 2.毕业论文(设计)应完成的主要内容及进度安排 毕业设计主要内容: 本类毕业设计…

作者头像 李华
网站建设 2026/8/15 10:38:49

12、并行端口打印机驱动案例分析

并行端口打印机驱动案例分析 1. 引言 在并行端口打印机驱动的开发中,有多个关键函数协同工作,以实现打印机设备的识别、检测、连接、数据传输等功能。下面将按照函数执行的大致顺序,对这些函数进行详细分析。 2. lpt_identify 函数 功能 :该函数是 lpt(4) 的 device_…

作者头像 李华
网站建设 2026/8/16 6:10:48

springboot房产销售系统(11495)

有需要的同学&#xff0c;源代码和配套文档领取&#xff0c;加文章最下方的名片哦 一、项目演示 项目演示视频 二、资料介绍 完整源代码&#xff08;前后端源代码SQL脚本&#xff09;配套文档&#xff08;LWPPT开题报告&#xff09;远程调试控屏包运行 三、技术介绍 Java…

作者头像 李华
网站建设 2026/8/16 8:21:58

37 日志分析:ELK(Elasticsearch+Logstash+Kibana)

文章目录前言理论部分1_ELK日志分析系统概述1.1_核心组件角色2_Elasticsearch介绍2.1_核心功能2.2_架构与关键概念2.3_使用场景2.4_优缺点3_Logstash介绍3.1_三大处理阶段3.2_使用场景3.3_轻量级替代方案4_Kibana介绍4.1_核心功能4.2_使用场景4.3_工作原理5_为何使用ELK进行数据…

作者头像 李华