赵媛·威美斯号太空冒险
by ChromePirate25172 lines4.0 KB
https://htmlpreview.github.io/<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>赵媛·威美斯号太空冒险</title>
<style>
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:#000}
canvas{display:block;width:100%;height:100%}
#restart{
position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);
padding:14px 28px;background:#42A5F5;color:#fff;
border:none;border-radius:14px;font-size:18px;
display:none;z-index:999
}
</style>
</head>
<body>
<canvas id="c"></canvas>
<button id="restart">重新开始</button>
<script>
const c=document.getElementById("c");
const ctx=c.getContext("2d");
const btn=document.getElementById("restart");
c.width=window.innerWidth;
c.height=window.innerHeight;
let game={over:0,score:0};
let ship={
x:c.width*0.15,y:c.height/2,w:46,h:34,
color:"#42A5F5",explode:0,et:0,glow:0
};
let rocks=[],stars=[],bg=[],fx=[];
for(let i=0;i<120;i++)bg.push({
x:Math.random()*c.width,y:Math.random()*c.height,
r:Math.random()*1.6+0.3,s:Math.random()*0.6+0.1,b:Math.random()
});
document.addEventListener("touchmove",e=>{
e.preventDefault();
if(game.over||ship.explode)return;
ship.y=e.touches[0].clientY-ship.h/2;
if(ship.y<0)ship.y=0;
if(ship.y+ship.h>c.height)ship.y=c.height-ship.h;
});
btn.onclick=()=>location.reload();
function addRock(){
rocks.push({
x:c.width+20,y:Math.random()*(c.height-50),
w:36,h:36,s:Math.random()*1.9+2.3
})
}
function addStar(){
stars.push({
x:c.width+10,y:Math.random()*(c.height-40),
r:9,s:Math.random()*1.6+1.4,a:0
})
}
function hit(a,b){
return a.x<b.x+b.w&&a.x+a.w>b.x&&a.y<b.y+b.h&&a.y+a.h>b.y
}
function fxAdd(x,y){fx.push({x,y,r:0,a:1})}
function draw(){
ctx.clearRect(0,0,c.width,c.height);
bg.forEach(o=>{
o.b+=0.07;
ctx.fillStyle=`rgba(255,255,255,${0.3+Math.abs(Math.sin(o.b))*0.6})`;
ctx.beginPath();
ctx.arc(o.x,o.y,o.r,0,6.28);
ctx.fill();
o.x-=o.s;
if(o.x<0)o.x=c.width;
});
stars.forEach((o,i)=>{
o.a+=0.13;o.x-=o.s;
ctx.save();
ctx.translate(o.x,o.y);
ctx.rotate(o.a);
ctx.fillStyle="#FFD700";
ctx.beginPath();
ctx.moveTo(0,-9);ctx.lineTo(2,2);ctx.lineTo(9,4);
ctx.lineTo(4,9);ctx.lineTo(0,6);ctx.lineTo(-4,9);
ctx.lineTo(-9,4);ctx.lineTo(-2,2);ctx.closePath();
ctx.fill();
ctx.restore();
if(o.x<-25)stars.splice(i,1);
});
rocks.forEach((o,i)=>{
o.x-=o.s;
ctx.fillStyle="#888";
ctx.beginPath();
ctx.ellipse(o.x+o.w/2,o.y+o.h/2,o.w/2,o.h/2,0,0,6.28);
ctx.fill();
if(o.x<-50)rocks.splice(i,1);
});
fx.forEach((o,i)=>{
o.r+=1.3;o.a-=0.04;
if(o.a<=0||o.r>24){fx.splice(i,1);return}
ctx.strokeStyle=`rgba(255,215,0,${o.a})`;
ctx.lineWidth=2;
ctx.beginPath();
ctx.arc(o.x,o.y,o.r,0,6.28);
ctx.stroke();
});
if(!ship.explode){
ship.glow+=0.13;
ctx.shadowColor=ship.color;
ctx.shadowBlur=Math.sin(ship.glow)*5+5;
ctx.fillStyle=ship.color;
ctx.beginPath();
ctx.moveTo(ship.x+ship.w,ship.y+ship.h/2);
ctx.lineTo(ship.x+ship.w*0.4,ship.y);
ctx.lineTo(ship.x,ship.y+4);
ctx.lineTo(ship.x,ship.y+ship.h-4);
ctx.lineTo(ship.x+ship.w*0.4,ship.y+ship.h);
ctx.closePath();
ctx.fill();
ctx.fillStyle="#FFF";
ctx.beginPath();
ctx.arc(ship.x+17,ship.y+17,7,0,6.28);
ctx.fill();
ctx.shadowBlur=0;
ctx.fillStyle="#FFF";ctx.font="13px sans-serif";
ctx.fillText("威美斯",ship.x-8,ship.y-6);
ctx.fillStyle="#FFD700";
ctx.fillText("赵媛",ship.x+8,ship.y+22);
}
if(ship.explode){
ship.et++;
let r=ship.et*3.6;
ctx.fillStyle=`rgba(255,60,0,${1-ship.et/18})`;
ctx.beginPath();
ctx.arc(ship.x+23,ship.y+17,r,0,6.28);
ctx.fill();
if(ship.et>=18){
game.over=1;
btn.style.display="block";
}
}
ctx.fillStyle="#FFF";
ctx.font="bold 22px sans-serif";
ctx.fillText("分数："+game.score,20,42);
if(!game.over&&!ship.explode){
rocks.forEach((o,i)=>{if(hit(ship,o))ship.explode=1});
stars.forEach((o,i)=>{
if(hit(ship,{x:o.x-9,y:o.y-9,w:18,h:18})){
game.score+=10;fxAdd(o.x,o.y);stars.splice(i,1);
}
})
}
requestAnimationFrame(draw);
}
setInterval(()=>{
if(!game.over&&!ship.explode){
Math.random()<0.023&&addRock();
Math.random()<0.032&&addStar();
}
},30);
draw();
</script>
</body>
</html>Game Source: 赵媛·威美斯号太空冒险
Creator: ChromePirate25
Libraries: none
Complexity: moderate (172 lines, 4.0 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: -chromepirate25" to link back to the original. Then publish at arcadelab.ai/publish.