纯css实现一款迷宫游戏代码
代码语言:html
所属分类:游戏
代码描述:纯css实现一款迷宫游戏代码,无一行js代码,通过css来实现游戏碰撞监测。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700"); *, *::before, *::after { padding: 0; margin: 0 auto; box-sizing: border-box; } body { font-family: Raleway, sans-serif; background-color: #111; color: #fff; min-height: 100vh; display: grid; place-items: center; } .mazeContainer { position: relative; width: 90vmin; aspect-ratio: 1; border: 2px solid #fff; -webkit-animation: maze 1ms forwards paused; animation: maze 1ms forwards paused; cursor: crosshair; } @-webkit-keyframes maze { to { --textOpacity: 1; --textPointer: all; } } @keyframes maze { to { --textOpacity: 1; --textPointer: all; } } .mazeContainer:has(w:hover) { -webkit-animation-play-state: running; animation-play-state: running; } .mazeContainer:has(.target_start:hover) { -webkit-animation: none; animation: none; } .mazeContainer:has(.target_start:hover) .text_start { -webkit-animation-play-state: running; animation-play-state: running; } .mazeContainer:has(.target_start:hover) .text_win { -webkit-animation: none; animation: none; } .mazeContainer:has(.target_end:hover) { background-color: red; } .mazeContainer:has(.target_end:hover) .text_win { -webkit-animation-play-state: running; animation-play-state: running; } .tiles { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(12, 1fr); } .tiles * { width: 100%; } .tiles w { background-color: hotpink; background-image: linear-gradient(90deg, #0002, transparent 25% 75%, #0002), linear-gradient(#0002, transparent 25% 75%, #0002), conic-gradient(from -45deg, #fff4 90deg, #fff2 0 180deg, #0004 0 270deg, #0002 0); background-size: 50% 50%; } .tiles w[rtr] { border-radius: 0 50% 0 0; } .tiles w[rbl] { border-radius: 0 0 0 50%; } .target { position: absolute; width: 5%; aspect-ratio: 1; background-color: var(--color, #fff); } .target_start { --color: dodgerblue; left: 85%; top: 85%; } .target_end { --color: limegreen; left: 10%; top: 10%; } .text { position: absolute; inset: 0; font-size: 5vmin; padding: 1em; } .text_start { background-color: #222; -webkit-animation: text-out 1ms forwards paused; animation: text-out 1ms forwards paused; } @-webkit-keyframes text-out { to { display: none; } } @keyframes text-out { to { display: none; } } .text_haw { background-color: maroon; opacity: var(--textOpacity, 0); pointer-events: var(--textPointer, none); transition: opacity 200ms; cursor: not-allowed; } .text_win { background-color: green; text-align: center; font-size: 12vmin; font-weight: bold; opacity: 0; pointer-events: none; -webkit-animation: text-in 1ms forwards paused; animation: text-in 1ms forwards paused; } @-webkit-keyframes text-in { to { opacity: 1; pointer-events: all; --embedDisplay: block; } } @keyframes text-in { to { opacity: 1; pointer-events: all; --embedDisplay: block; } } .text_win embed { visibility: hidden; display: var(--embedDisplay, none); } .text .blue { color: dodgerblue; } .text .red { color: red; } .text .pink { color: hotpink; } .text .green { color: limegreen; } </style> </head> <body> <div class="mazeContainer"> <div class="tiles"> <w></w> <w></w> <w></w> <w></w> <w></w> <w></w> &l.........完整代码请登录后点击上方下载按钮下载查看
网友评论0