纯css实现避障类不碰墙抓住恐龙小游戏代码-html代码-BFW代码库

纯css实现避障类不碰墙抓住恐龙小游戏代码

代码语言：html

所属分类：游戏

代码描述：纯css实现避障类不碰墙抓住恐龙小游戏代码，没有一行js，全部是css代码，移动键盘进行操控移动骷髅头。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@charset "UTF-8";

@property --s1 {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --x {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
@property --y {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
b {
  display: block;
  width: 600px;
  height: 300px;
  position: sticky;
  left: 0;
  top: 0;
  --g:conic-gradient(var(--b) 0 0) no-repeat;
  background: conic-gradient(from 90deg at 1px 1px, #0000 25%, var(--c1) 0) -1px -1px/calc((100% + 1px)/10) calc((100% + 1px)/5), url(//repo.bfw.wiki/bfwrepo/images/cssgame/dii.png) no-repeat calc(100% - 6px) calc(100% - 6px)/auto 48px, var(--g) 0 0/120px 60px, var(--g) 60px 180px/180px 60px, var(--g) 180px 120px/180px 60px, var(--g) 300px 60px/180px 60px, var(--g) 300px 240px/180px 60px, var(--g) 420px 180px/180px 60px, var(--g) 60px 0/60px 240px, var(--g) 300px 60px/60px 240px, var(--g) 540px 0/60px 300px, var(--g) 420px 0/60px 300px, var(--g) 420px 0/180px 60px, url(//repo.bfw.wiki/bfwrepo/images/cssgame/w.jpg) 0 0/60px 60px;
  animation: x linear, y linear;
  animation-timeline: scroll(nearest inline), scroll(nearest block);
  container-name: b;
}

@keyframes x {
  to {
    --x: 9;
  }
}
@keyframes y {
  to {
    --y: 4;
  }
}
m {
  content: "";
  position: absolute;
  translate: calc(var(--x)*100%) calc(var(--y)*100%);
  width: 60px;
  aspect-ratio: 1;
  opacity: 0;
  background: url(//repo.bfw.wiki/bfwrepo/images/cssgame/ad.png) center/cover;
}

b:after {
  content: "TIME - " counter(s1, decimal-leading-zero) "s";
  white-space: pre-wrap;
  color: #fefeff;
  font-size: 35px;
  visibility: hidden;
  font-variant-numeric: tabular-nums;
  counter-reset: s1 var(--s1);
  position: absolute;
  left: 0;
  right: 0;
  bottom: -60px;
  text-align: center;
  padding: 8px;
  z-index: 99989;
  animation: f 0.1s linear forwards paused, s1 60s linear forwards paused;
}
@container style(--x: 9) and style(--y: 4) {
  b:after {
    animation-play-state: running, paused !important;
    --_c: "\a Congratulations!\a \aYou did it in " counter(s1,decimal-leading-zero) "s";
  }
}
@container (style(--x: 0) and (style(--y: 1) or style(--y: 2) or style(--y: 3) or style(--y: 4)))
 or (style(--x: 1) and (style(--y: 4)))
 or (style(--x: 2) and (style(--y: 0) or style(--y: 1) or style(--y: 2) or style(--y: 4)))
 or (style(--x: 3) and (style(--y: 0) or style(--y: 1) or style(--y: 4)))
 or (style(--x: 4) and (style(--y: 0) or style(--y: 1) or style(--y: 3) or style(--y: 4)))
 or (style(--x: 5) and (style(--y: 0)))
 or .........完整代码请登录后点击上方下载按钮下载查看