堕落了啊，上班摸鱼，搞个游戏玩玩

为啥

闲出屁来了，都在忙，就我在摸鱼

玩游戏又不敢玩，怕被发现

所以，直接F12粘进去吧

(function () {
  let div = document.createElement("div");
  div.innerHTML = `
<div id="s">
<div id="p"> </div>
<div id="c" class="xrz"> </div>
<div id="t">空格开始</div>
<div id="f">分数：0</div>
</div>
<style>

/* 场景 */
div#s {
    opacity: 0;
    position: fixed;
    bottom: 10px;
    left: 50px;
    width: 300px;
    height: 100px;
    box-shadow: -6px -6px 10px 0 #fff inset, 6px 6px 10px 0 #646464 inset, 0 0 1px 0 #787878;
    background: linear-gradient(#99cdfd,#fff, 90%,#f5b52c,90%,#f5b52c);
    border-radius: 10px;
    overflow:hidden;
} 
/* 鼠标放在上面才会显示 */
div#s:hover{
    opacity: 1;
}

/* 玩家 */
div#p {
    background: #99cdfd;
    width: 16px;
    height: 10px;
    border-radius: 50% 50% 30% 30%;
    transform: translate(40px, 80px);
}

/* 提示 */
div#t {
    text-align: center;
    font-size: 20px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 2px #333;
}

/* 分数 */
div#f {
    position: absolute;
    top: 10px;
    left: 10px;
    color: #000000;
    font-weight: bold;
    text-shadow: 0 0 2px #fff;
}


/* 障碍物 */
div#c {
    width: 10px;
    height: 30px;
    transform: translate(20px, 50px);
}

/* 仙人掌 */
#c.xrz{ 
    background: #20b362;
    border-radius: 5px 5px 0 0;
}
#c.xrz::before{
    content:
    "";
    display: block;
    border: solid 5px  #20b362;
    transform: translate(-7px,8px);
    width: 3px;
    height: 5px;
    border-top: none;
    position:
    absolute;
}
#c.xrz::after{
    content:
    "";
    display: block;
    border: solid 5px  #20b362;
    transform: translate(4px,5px);
    width: 3px;
    height: 5px;
    border-top: none;
}


/* 石头 */
div#c.st {
    background: #c1c1c1;
    border-radius: 4px 10px 0 0;
    width: 20px;
}
div#c.st::after {
    content: "";
    display: block;
    position: absolute;
    background: #adadad;
    width: 20px;
    height: 15px;
    bottom: 0px;
    left: -10px;
    border-radius: 8px 6px 0 0;
}



/* 风滚草 */
div#c.fgc { }

div#c.fgc::after{
    content:  "";
    display:
    block;
    position:
    absolute;
    background: repeating-linear-gradient(#6e4c00, 1px,transparent 2px);
    width:15px;
    height:15px;
    bottom:0px;
    left: 0px;
    border-radius: 50%;
    animation:fgc 1s infinite linear;
}

@keyframes fgc{
    0%{
        transform:translateY(0) rotate(0deg) ;
    }
    50%{
        transform:translateY(-20px) rotate(-180deg);
    }
    100%{
        transform:translateY(0) rotate(-360deg);
    }
} 

/* 史莱姆 */
div#c.slm {}  

div#c.slm::after{
    content:  "";
    display:
    block;
    position:
    absolute;
    background: #ffce9f;
    width: 15px;
    height: 15px;
    bottom: 15px;
    left: 0px;
    border-radius: 10px 10px 8px 8px;
        animation:slm .6s infinite ;
}

@keyframes slm{
    0%{
        width: 18px;
        height: 10px;
        bottom: 0px;
        left: 0px;
        border-radius: 10px 10px 5px 5px;
    }
    50%{
        width: 15px;
        height: 15px;
        bottom: 15px;
        left: 0px;
        border-radius: 10px 10px 8px 8px;
    }
    100%{
        width: 18px;
        height: 10px;
        bottom: 0px;
        left: 0px;
        border-radius: 10px 10px 5px 5px;
    }
}



/* 飞标 */
div#c.dao::before,
div#c.dao::after{
    content:  "";
    display:
    block;
    position:
    absolute;
    width: 20px;
    height: 10px;
    background: radial-gradient(#000,20%,#000,20%,#fff);
    border-radius: 50px 0;
    border-left: solid 4px #bfbfbf;
    border-right: solid 4px #bfbfbf;
    animation:
    dao 1s infinite linear;
} 

div#c.dao::before{
    animation:dao 1s .25s infinite linear;
}

@keyframes dao{
    0%{
        transform:  rotate(-360deg)  rotateX(45deg);
    } 
    100%{
        transform: rotate(0deg) rotateX(70deg) ;
    }
}
</style>
`;
  document.body.append(div);

  
  // dom
  let c = document.getElementById("c"),
    p = document.getElementById("p"),
    t = document.getElementById("t"),
    f = document.getElementById("f");

  let gamestate = false, // 游戏状态
    fs = 0, // 分数
    olddate, // 计时
    left, // 玩家横坐标位置
    jumph, // 玩家纵坐标位置
    v, // 玩家速度
    hasjump = false, // 跳跃状态
    ptv = 10, // 玩家跳跃加速度
    pt = 0; //

  // 开始游戏
  function gamestart() {
    left = 250; // 障碍物移开
    v = 100; // 速度还原
    fs = 0; // 分数归零
    olddate = Date.now(); // 计时
    jumph = 0; // 跳跃高度归零
    t.innerText = ""; // 提示清空
    gamestate = true; // 游戏状态为：开始

    // 开始渲染
    renderleft();
  }
  // 随机障碍物皮肤
  function randomC() {
    c.className = ["xrz", "st", "fgc", "slm", "dao"][
      Math.floor(Math.random() * 5)
    ];
  }
  // 渲染方法
  function renderleft() {
    let nowdate = Date.now();
    let timespan = nowdate - olddate;
    left -= (v * timespan) / 1000;
    olddate = nowdate;
    if (left < -50) {
      left = 250;
      fs++;
      f.innerText = `分数: ${fs}`;
      randomC();
      v += 5;
      if (v > 200) {
        v = 200;
      }
    }
    // 渲染
    c.style.transform = `translate(40px, 50px) translateX(${left}px)`;
    p.style.transform = `translate(40px, 80px) translateY(${-jumph}px)`;
    if (left < 10 && left > -10 && jumph < 30) {
      console.log("游戏结束");
      t.innerText = "游戏结束,空格继续";
      gamestate = false;
    } else {
      requestAnimationFrame(renderleft);
    }
  }

  // 监听按键
  document.onkeydown += () => {
    // 未开始游戏的，开始游戏
    if (!gamestate) {
      gamestart();
    }
    // 未跳跃的开始跳跃
    else if (!hasjump) {
      jump();
    }
  };
  // 跳跃
  function jump() {
    hasjump = true;
    ptv = 10;
    pt = setInterval(() => {
      jumph += ptv;
      ptv -= 1;
      if (jumph < 0) {
        jumph = 0;
        hasjump = false;
        clearInterval(pt);
      }
    }, 50);
  }
})();

咋没反应

别急，这玩意在左下角，鼠标放上去才会显示

说是空格，其实其他按键也都行，懒得判断了，哪个按键顺手用哪个吧

卧槽，老板来了!

鼠标一滑，欸，没了~

再回来一看，欸，没了~