光头大叔跑酷

by ApexRider47

68 lines1.6 KB

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>光头大叔跑酷</title>
<style>
body{margin:0;padding:0;overflow:hidden;}
canvas{display:block;background:#71c665;}
</style>
</head>
<body>
<canvas id="c"></canvas>
<script>
let c=document.getElementById('c');
let ctx=c.getContext('2d');
c.width=window.innerWidth;
c.height=window.innerHeight;

let player={x:50,y:c.height-100,w:50,h:80,vy:0,jump:-12,gravity:0.6,on:true};
let obs=[];
let spd=5;
let score=0;
let over=false;

function rect(a,b,c,d,col){
  ctx.fillStyle=col;
  ctx.fillRect(a,b,c,d);
}

function drawPlayer(){
  rect(player.x,player.y,player.w,player.h,'#ffd29d');
  rect(player.x+10,player.y-30,30,30,'#ffd29d');
}

function makeObs(){
  let w=20;
  let h=60+Math.random()*40;
  obs.push({x:c.width,y:c.height-h,w:w,h:h});
}

document.addEventListener('touchstart',()=>{
  if(player.on&&!over) player.vy=player.jump,player.on=false;
});
document.addEventListener('mousedown',()=>{
  if(player.on&&!over) player.vy=player.jump,player.on=false;
});

function loop(){
  if(over) return;
  ctx.clearRect(0,0,c.width,c.height);
  rect(0,c.height-40,c.width,40,'#5a9e4b');

  player.vy+=player.gravity;
  player.y+=player.vy;
  if(player.y+player.h>c.height-40){
    player.y=c.height-40-player.h;
    player.vy=0;
    player.on=true;
  }

  if(Math.random()<0.02) makeObs();
  for(let i=obs.length-1;i>=0;i--){
    obs[i].x-=spd;
    rect(obs[i].x,obs[i].y,obs[i].w,obs[i].h,'#333');
    if(obs[i].x+obs[i].w<0) obs.splice(i,1),score++;
    if(player.x<obs[i].x+obs[i].w && player.x+player.w>obs[i].x &&
       player.y<obs[i].y+obs[i].h && player.y+pl

Game Source: 光头大叔跑酷

Creator: ApexRider47

Libraries: none

Complexity: moderate (68 lines, 1.6 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: -apexrider47" to link back to the original. Then publish at arcadelab.ai/publish.