js实现简易塔防类小游戏代码
代码语言:html
所属分类:其他
代码描述:js实现简易塔防类小游戏代码,有两个塔,一个塔攻击距离远,凡是速度慢,一个塔攻击距离近,但是速度快,点击鼠标选择放到你想要的位置,敌人就开始进来了。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> html { min-height: 100vh; display: grid; place-items: center; font-family: system-ui; line-height: 100%; user-select: none; background: #000; } body { width: calc(var(--tile-size) * 7); position: relative; } * { user-select: none; } #game_map { position: relative; width: 100%; height: 100%; } #game_map > div:not(.enemy) { width: var(--tile-size); aspect-ratio: 1 / 1; float: left; display: grid; place-items: center; position: relative; outline: 1px dotted #000; } .game_ground { background: #1436FF; } .game_ground:hover { background: darkblue; } .game_path { outline: 0 !important; background: black; /* background: radial-gradient(circle, #FFABA5 20%, transparent 20%); */ } .start:after { content: ''; width: 100% ; height: 100%; position: absolute; lefT: 0; top: 0; display: grid; place-items: center; color: rgba(0,0,0,.25); /* background: radial-gradient(circle, #FFABA5 15%, transparent 15%); */ } .game_gold { color: black; outline: 0 !important; } .game_gold:before { content:''; width: 25%; height: 25%; position: absolute; left: 40%; top: 5%; z-index: -1; border-radius: 50%; box-shadow: inset 2px 0 0 2px sienna; transform: rotate(20deg); } .game_gold:after { content:''; width: 80%; height: 80%; position: absolute; left: 10%; top: 15%; background: red; clip-path: polygon(50% 14%, 60% 5%, 78% 4%, 94% 12%, 100% 40%, 97% 76%, 81% 94%, 69% 100%, 57% 100%, 50% 93%, 42% 100%, 26% 98%, 7% 77%, 0% 37%, 6% 11%, 25% 4%); z-index: -1; } #towers_box { width: 100%; position: absolute; top: 10px; left: 50%; transform: translate(-50%, -200%); text-align: center; z-index: 200; } .tower { width: var(--tile-size); aspect-ratio: 1 / 1; /* outline: 1px solid lightgray; */ display: inline-block; line-height: var(--tile-size); vertical-align: top; position: relative; margin: 0 5px; } .game_ground.tower, .game_ground.tree { pointer-events: none; } .game_on { /* pointer-events: auto !important; */ } .rapid:after, .long:after, .tree:after { content: ''; width: var(--tile-size); height: 60px; display: grid; justify-content: center; align-items: end; font-size: 12px; position: absolute; bottom:0; left:0; background-size: 300% 100%; background-repeat: repeat-x; z-index: 900; } .rapid:after { content: '快攻'; background: #FFFB00; clip-path: polygon(0% 0%, 100% 0%, 75% 25%, 100% 50%, 100% 100%, 0% 100%, 0% 50%, 25% 25%); } .long:after { content: '长攻'; background: #FFFB00; clip-path: polygon(0% 0%, 25% 25%, 50% 0%, 75% 25%, 100% 0%, 100% 100%, 0% 100%); } .tree:after { height: 45px; background: conic-gradient(rgba(0,0,0,.25) 0deg 45deg, rgba(0,0,0,.4) 45deg 135deg, rgba(0,0,0,.55) 135deg 225deg, rgba(0,0,0,.4) 225deg 315deg, rgba(0,0,0,.25) 315deg 360deg); } .game_ground.tower { margin: 0 !important; } .bullet { width: 10px; aspect-ratio: 1 / 1; border-radius: 50%; background: white; box-shadow: 0 0 0 1px black; position: fixed; transition: .1s linear; z-index: 900; } .enemy { width: 45px; aspect-ratio: 1 / 1; /* background: red; */ position: absolute; z-index: 200; display: grid; place-items: end center; opacity: 0; font-size: 10px; line-height: 35px; } .enemy:before { content: ''; width: 80%; height: 80%; position: absolute; left: 10%; top: 0; background: radial-gradient(circle at 66% 44%, #1436FF 2px, transparent 3px), radial-gradient(circle at 33% 44%, #1436FF 2px, transparent 3px), radial-gradient(circle at 66% 40%, white 5px, transparent 6px), radial-gradient(circle at 33% 40%, white 5px, transparent 6px), var(--enemy-color); border-radius: 50% 50% 0 0; z-index: -1; } .enemy:after { content: ''; width: 80%; height: 30%; position: absolute; left: 10%; top: 75%; background: radial-gradient(circle, var(--enemy-color) 50%, transparent 55%); background-size: 20% 40%; background-repeat: repeat-x; z-index: -1; animation: wiggle .5s linear infinite; } @keyframes wiggle { 25% { left: 12%; } 75% { left: 8%; } } /* list of enemy movement animations*/ #game_map[data-level="0"] .enemy { animation: level_0 9s linear forwards; } @keyframes level_0 { 6.66% { left: 45px; top: 225px; opacity: 1; } 33.33% { left: 45px; top: 45px; } 66.66% { left: 225px; top: 45px; } 93.34% { left: 225px; top: 225px; } 100% { left: 270px; top: 225px; opacity: 1; } } #game_map[data-level="1"] .enemy { animation: level_1 9s linear forwards; } @keyframes level_1 { 5.55% { left: 45px; top: 225px; opacity: 1; } 33.33% { left: 45px; top: 45px; } 55.53% { left: 225px; top: 45px; } 77.73% { left: 225px; top: 225px; } 88.83% { left: 135px; top: 225px; } 100% { left: 135px; top: 135px; opacity: 1; } } #game_map[data-level="2"] .enemy { animation: level_2 9s linear forwards; } @keyframes level_2 { 5.25% { left: 45px; top: 225px; opacity: 1; } 31.56% { left: 225px; top: 225px; } 42.08% { left: 225px; top: 135px; } 68.38% { left: 45px; top: 135px; } 78.9% { left: 45px; top: 45px; } 100% { left: 270px; top: 45px; opacity: 1; } } .selected:after { font-weight: 900 !important; } #preview_radius { position: fixed; transform: translate(-50%,-50%); border-radius: 50%; border: 1px solid white; opacity: .5; z-index: 1000; pointer-events: none; } :root { --tile-size: 45px; --gold-hp: '5'; --towers-tree: url('data:image/png;base64,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.........完整代码请登录后点击上方下载按钮下载查看
网友评论0