jquery实现一个拖动云朵下雨水漫金山小游戏效果代码
代码语言:html
所属分类:游戏
代码描述:jquery实现一个拖动云朵下雨水漫金山小游戏效果代码,拖动鼠标移动云朵按左键下雨
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Condiment&display=swap" rel="stylesheet"> <style> @import url("https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap"); html, body { height: 100%; width: 100%; overflow: hidden; background: #cfe3f1; } .title { user-select: none; position: absolute; font-family: "Major Mono Display", monospace; color: #3333ff; top: 16px; left: 16px; right: 100px; font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-spacing: -5px; letter-spacing: -1.5px; padding-bottom: 15px; } .title::before { content: ""; position: absolute; bottom: 0; opacity: 0.25; left: 0px; height: 3px; width: 87px; background: #3333ff; } .background { position: absolute; top: 0; bottom: 0; left: 0; right: 0; opacity: 0.5; } .background span { width: 35vw; height: 35vw; background: linear-gradient(135deg, rgba(181, 189, 200, 0.94) 0%, #769cbd 36%, #126b2e 100%); position: absolute; bottom: 0; left: 0; transform: rotate(45deg) translateY(50%); border-radius: 40px; } .background span:nth-of-type(2) { left: 25%; } .background span:nth-of-type(3) { left: 50%; } .background span:nth-of-type(4) { left: 75%; } .background span:nth-of-type(5) { left: 100%; } .fps { position: absolute; top: 110px; right: 10px; font: 400 16px/1 sans-serif; } .rain-count { position: absolute; top: 135px; right: 10px; font: 400 16px/1 sans-serif; } .reset, .debug { position: absolute; top: 10px; right: 10px; font: 400 16px/1 sans-serif; padding: 10px; border: 1px solid black; cursor: pointer; } .reset:hover, .debug:hover { background: black; color: white; } .debug { top: 60px; } .raindrop { position: absolute; top: 0px; width: 2px; height: 5px; background: #3333ff; transform: translateY(150px); z-index: 0; } .ground-grid { display: flex; flex-wrap: wrap; position: absolute; bottom: 0; left: 0; width: 100%; } .ground-grid__block { width: 3.33vw; padding-top: 3.33vw; box-sizing: border-box; position: relative; } .ground-grid__block--water span { position: absolute; bottom: 0; left: 0; right: 0; background: #3333ff; } .ground-grid__block--water span:not([style="height:0%"])::before, .ground-grid__block--water span:not([style="height:0%"])::after { content: ""; position: absolute; z-index: 0; background: #3333ff; top: 0; right: 90%; height: 3vw; width: 1vw; border-radius: 15px; } .ground-grid__block--water span:not([style="height:0%"])::after { right: auto; left: 90%; } .ground-grid__block--water.heavyWater::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 2vw; background: #3333ff; } .ground-grid__block--dirt, .ground-grid__block--leftRound, .ground-grid__block--rightRound { background: #481d13; } .ground-grid__block--dirt::after, .ground-grid__block--leftRound::after, .ground-grid__block--rightRound::after { content: ""; position: absolute; z-index: 1; width: 100%; height: 100%; background: #481d13; top: 0; left: 0; border-radius: 15px 0 0 0; } .ground-grid__block--leftRound { border-radius: 15px 0 0 0; } .ground-grid__block--leftRound.spillage::before { content: ""; position: absolute; right: 0; bottom: 0; background: #3333ff; top: -2px; left: -2px; border-radius: 15px 0 0 0; } .ground-grid__block--rightRound { border-radius: 0 15px 0 0; } .ground-grid__block--rightRound::after { border-radius: 0 15px 0 0; } .ground-grid__block--rightRound.spillage::before { content: ""; position: absolute; left: 0; bottom: 0; background: #3333ff; right: -2px; top: -2px; border-radius: 0 15px 0 0; } .ground-grid__block--rightSlope::after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-width: 5vw 0 0 5vw; border-color: transparent transparent transparent #481d13; } .ground-grid__block--leftSlope::after { content: ""; position: absolute; top: 0px; left: 0px; width: 0; height: 0; border-style: solid; border-width: 0 0 5vw 5vw; border-color: transparent transparent #481d13 transparent; } .cloud { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); width: 110px; cursor: pointer; z-index: 1; } .cloud::after { content: ""; position: absolute; background: white; width: 70px; height: 30px; top: 27px; left: 22px; } .cloud span { position: absolute; width: 40px; height: 40px; top: 0; left: 0; border-radius: 100%; background: white; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1); } .cloud span:nth-of-type(1) { top: 25px; } .cloud span:nth-of-type(2) { width: 30px; height: 30px; top: 13px; left: 20px; } .cloud span:nth-of-type(3) { left: 40px; } .cloud span:nth-of-type(4) { width: 30px; height: 30px; top: 12px; left: 67px; } .cloud span:nth-of-type(5) { width: 30px; height: 30px; top: 30px; left: 80px; } .cloud span:nth-of-type(6) { width: 23px; height: 23px; left: 24px; top: 45px; } .cloud span:nth-of-type(7) { width: 35px; height: 35px; left: 38px; top: 38px; } .cloud span:nth-of-type(8) { left: 60px; top: 40px; width: 30px; height: 30px; } </style> </head> <body > <div class="background"><span></span><span></span><span></span><span></span><span></span> </div> <div class="cloud"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span> </div> <div class="reset">Reset</div> <div class="title">mouse moves cloud ° click to rain ° FLOOD the VALLEY</div> <div class="ground-grid"></div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script > let rows = [ [ 0, 0, 0, 5, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5], [ 6, 0, 5, 4, 4, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 4], [ 4, 4, 4, 4, 4, 4, 4, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 5, 4, 4, 4], [ 4, 4, 4, 4, 4, 4, 4, 4, 6, 0, 5, 6, 0, 0, 5, 4, 6, 0, 0, 0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4], [ 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 6, 0, 5, 4, 6, 0, 0, 0, 5, 4, 4, 4, 4]]; const rowsBackup = JSON.parse(JSON.stringify(rows)); const cloudW = 110; const density = 0.0333; const maxDroplets = 80; let raining = false; const time.........完整代码请登录后点击上方下载按钮下载查看
网友评论0