news 2026/4/3 2:06:49

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

作者头像

张小明

前端开发工程师

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/3/29 22:19:34

Spring Boot 入门实战:10 分钟搞定接口开发,新手零踩坑指南

作为后端开发新手&#xff0c;我曾被传统 Spring 框架的 XML 配置、依赖版本冲突折磨得怀疑人生 —— 写一个简单接口要手动配置 DispatcherServlet、梳理依赖关系、解决半天包冲突&#xff0c;往往折腾 3 小时还跑不起来。直到上手 Spring Boot&#xff0c;其 “约定优于配置”…

作者头像 李华
网站建设 2026/3/28 6:45:04

如何利用LobeChat镜像降低GPU算力成本?高性能推理优化技巧

如何利用LobeChat镜像降低GPU算力成本&#xff1f;高性能推理优化技巧 在AI应用加速落地的今天&#xff0c;越来越多企业与开发者希望部署自己的大语言模型&#xff08;LLM&#xff09;对话系统。然而&#xff0c;高昂的GPU算力成本、复杂的部署流程以及对云端API的持续依赖&am…

作者头像 李华
网站建设 2026/4/1 14:50:58

24、Linux Shell脚本基础与信号控制全解析

Linux Shell脚本基础与信号控制全解析 1. 列出打开的文件描述符 在Linux系统中,仅有九个文件描述符可供使用,理论上管理起来并不复杂。但实际操作时,跟踪文件描述符的重定向位置很容易让人混淆。为解决这一问题,bash shell提供了 lsof 命令。 lsof 命令可列出整个Lin…

作者头像 李华
网站建设 2026/4/1 9:00:00

小型无人机核心部件轻量化的注意事项

无人机核心部件轻量化的核心原则是 “减重不减值”—— 在降低重量的同时&#xff0c;必须保障部件性能、兼容性、安全性&#xff0c;避免因过度减重导致无人机故障&#xff08;如飞控失控、激光雷达数据异常、飞行坠毁等&#xff09;。结合小型无人机的飞行特性&#xff08;振…

作者头像 李华
网站建设 2026/4/1 19:51:13

CellsInsideObject 网格面内外与交界的判定

一&#xff1a;主要的知识点 1、说明 本文只是教程内容的一小段&#xff0c;因博客字数限制&#xff0c;故进行拆分。主教程链接&#xff1a;vtk教程——逐行解析官网所有Python示例-CSDN博客 2、知识点纪要 本段代码主要涉及的有①vtkMultiThreshold工作原理&#xff0c;②…

作者头像 李华
网站建设 2026/3/27 6:55:41

springboot学生读书笔记共享平台设计(11496)

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

作者头像 李华