像素草原生存
by SuperFlare63204 lines7.1 KB
<!DOCTYPE html>
<html lang="zh‑CN">
<head>
<meta charset="UTF‑8">
<meta name="viewport" content="width=device‑width, initial‑scale=1.0,user‑scalable=no">
<title>像素草原生存</title>
<style>
*{margin:0;padding:0;box-sizing:border-box;font-family:sans-serif}
body{background:#111;display:flex;justify-content:center;align-items:center;height:100vh;overflow:hidden}
#game{position:relative;width:800px;height:600px;background:#7cc46b;overflow:hidden;border:3px solid #000;image‑rendering:pixelated}
#ui{position:absolute;top:8px;left:8px;color:white;font-size:18px;text-shadow:1px 1px #000;z-index:5}
.ctrl{position:absolute;width:90px;height:90px;border-radius:50%;background:rgba(255,255,255,0.25);border:2px solid #fff;color:#fff;font-size:15px;z-index:20;user-select:none;touch-action:none}
#btnL{left:30px;bottom:30px}
#btnR{left:140px;bottom:30px}
#btnDig{right:140px;bottom:30px}
#btnAtk{right:30px;bottom:30px}
.player{position:absolute;width:26px;height:26px;font-size:24px;display:flex;align-items:center;justify-content:center}
.mob{position:absolute;display:flex;align-items:center;justify-content:center}
.wood{position:absolute;width:20px;height:20px;background:#8b5a2b;border:1px solid #3b2410}
</style>
</head>
<body>
<div id="game">
<div id="ui">生命:15｜击杀:0｜武器:木剑｜护盾:无｜时间：白天</div>
<button class="ctrl" id="btnL">←</button>
<button class="ctrl" id="btnR">→</button>
<button class="ctrl" id="btnDig">挖掘</button>
<button class="ctrl" id="btnAtk">攻击</button>
</div>
<script>
const game=document.getElementById("game");
const ui=document.getElementById("ui");
const W=800,H=600;
let player={x:400,y:300,w:26,h:26,hp:15,maxHp:15,dmg:2,kills:0,shield:false,weapon:"木剑"};
let night=false,nightTimer=0;
let mobs=[],woods=[];
let gameOver=false;
let smallBossOut=false,finalBossOut=false;
//主角😊
const p=document.createElement("div");
p.className="player";
p.textContent="😊";
game.appendChild(p);
//生成草原木头
for(let i=0;i<25;i++){
const obj={x:Math.random()*(W‑30),y:Math.random()*(H‑30)};
const el=document.createElement("div");
el.className="wood";
el.style.left=obj.x+"px";
el.style.top=obj.y+"px";
game.appendChild(el);
obj.el=el;
woods.push(obj);
}
//按键状态
let move={left:false,right:false,up:false,down:false};
const btnL=document.getElementById("btnL");
const btnR=document.getElementById("btnR");
btnL.addEventListener("touchstart",e=>{e.preventDefault();move.left=true});
btnL.addEventListener("touchend",e=>{e.preventDefault();move.left=false});
btnL.addEventListener("mousedown",()=>move.left=true);
btnL.addEventListener("mouseup",()=>move.left=false);
btnL.addEventListener("mouseleave",()=>move.left=false);
btnR.addEventListener("touchstart",e=>{e.preventDefault();move.right=true});
btnR.addEventListener("touchend",e=>{e.preventDefault();move.right=false});
btnR.addEventListener("mousedown",()=>move.right=true);
btnR.addEventListener("mouseup",()=>move.right=false);
btnR.addEventListener("mouseleave",()=>move.right=false);
document.getElementById("btnAtk").addEventListener("click",playerAttack);
document.getElementById("btnDig").addEventListener("click",digWood);
//生成怪物
function spawnMob(type){
const m={};
m.x=Math.random()*W;
m.y=Math.random()*H;
if(type==="alien"){
m.type="alien";m.hp=12;m.dmg=2;m.size=26;m.icon="👽";
}else if(type==="ghost"){
m.type="ghost";m.hp=12;m.dmg=3;m.size=26;m.icon="👻";
}else if(type==="roachBoss"){
m.type="roachBoss";m.hp=40;m.dmg=6;m.size=42;m.icon="🪳";
}else if(type==="finalBoss"){
m.type="finalBoss";m.hp=50;m.dmg=10;m.size=104;m.icon="🐎";
}
m.el=document.createElement("div");
m.el.className="mob";
m.el.style.width=m.size+"px";
m.el.style.height=m.size+"px";
m.el.style.fontSize=(m.size‑4)+"px";
m.el.textContent=m.icon;
game.appendChild(m.el);
mobs.push(m);
}
//玩家攻击
function playerAttack(){
if(gameOver)return;
for(let i=mobs.length‑1;i>=0;i--){
const m=mobs[i];
const dx=Math.abs(player.x‑m.x);
const dy=Math.abs(player.y‑m.y);
if(dx<55&&dy<55){
m.hp‑=player.dmg;
if(m.hp<=0){
m.el.remove();
mobs.splice(i,1);
player.kills++;
checkUnlock();
}
}
}
}
//挖木头
function digWood(){
if(gameOver)return;
for(let i=woods.length‑1;i>=0;i--){
const w=woods[i];
const dx=Math.abs(player.x‑w.x);
const dy=Math.abs(player.y‑w.y);
if(dx<45&&dy<45){
w.el.remove();
woods.splice(i,1);
}
}
}
//解锁武器、Boss
function checkUnlock(){
if(player.kills>=30&&!player.shield){
player.shield=true;
}
if(player.kills>=50&&!smallBossOut){
smallBossOut=true;
spawnMob("roachBoss");
}
if(player.kills>=100&&player.weapon==="木剑"){
player.weapon="钻石剑";player.dmg=6;
}
if(player.kills>=200&&player.weapon==="钻石剑"){
player.weapon="合金剑";player.dmg=8;
}
if(player.kills>=300&&!finalBossOut){
finalBossOut=true;
spawnMob("finalBoss");
}
}
//受到伤害
function takeDamage(d){
if(gameOver)return;
if(player.shield) d=Math.ceil(d*2/3);
player.hp‑=d;
if(player.hp<=0){
player.hp=0;
gameOver=true;
ui.innerText="你被怪物击败，游戏结束！";
}
}
//主循环
function loop(){
if(gameOver){requestAnimationFrame(loop);return;}
const speed=3;
if(move.left) player.x‑=speed;
if(move.right) player.x+=speed;
player.x=Math.max(0,Math.min(W‑player.w,player.x));
player.y=Math.max(0,Math.min(H‑player.h,player.y));
p.style.left=player.x+"px";
p.style.top=player.y+"px";
//昼夜循环
nightTimer++;
if(nightTimer>650){
night=!night;
nightTimer=0;
if(night){
spawnMob("alien");
spawnMob("ghost");
}
}
game.style.background=night?"#25304e":"#7cc46b";
//怪物追逐玩家
for(const m of mobs){
const dx=player.x‑m.x;
const dy=player.y‑m.y;
const dist=Math.hypot(dx,dy);
if(dist>32){
m.x+=(dx/dist)*1.3;
m.y+=(dy/dist)*1.3;
}
if(dist<38&&Math.random()<0.016){
takeDamage(m.dmg);
}
m.el.style.left=m.x+"px";
m.el.style.top=m.y+"px";
}
//胜利条件：最终Boss死亡
if(finalBossOut&&!mobs.some(x=>x.type==="finalBoss")){
gameOver=true;
ui.innerText="恭喜通关！你击败了恶灵骑士Boss！";
}
const t=night?"夜晚":"白天";
ui.innerText=`生命:${player.hp}｜击杀:${player.kills}｜武器:${player.weapon}｜护盾:${player.shield?"有":"无"}｜时间：${t}`;
requestAnimationFrame(loop);
}
loop();
</script>
</body>
</html>Game Source: 像素草原生存
Creator: SuperFlare63
Libraries: none
Complexity: complex (204 lines, 7.1 KB)
The full source code is displayed above on this page.
Remix Instructions
To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-superflare63" to link back to the original. Then publish at arcadelab.ai/publish.