js实现一个打桌球游戏代码
代码语言:html
所属分类:游戏
代码描述:js实现一个打桌球游戏代码,点击白球按住鼠标不放,选择力度,松开鼠标推球。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Major+Mono+Display&display=swap'> <style> * { box-sizing: border-box; } body { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; background-image: url("//repo.bfw.wiki/bfwrepo/image/62745d1f454cd.png"); background-size: 350px; overflow: hidden; } .title { user-select: none; position: absolute; z-index: 20; font-family: "Major Mono Display", monospace; color: white; top: 16px; right: 16px; font-size: 28px; text-align: right; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; word-spacing: -5px; letter-spacing: -1px; padding-bottom: 15px; text-shadow: 4px 4px 2px rgba(0, 0, 0, 0.5); } .title small { font-size: 14px; position: absolute; top: 120%; right: 0; } .title::before { content: ""; position: absolute; bottom: 0; opacity: 0.25; right: 0px; height: 3px; width: 87px; background: white; } .controls { position: relative; margin-bottom: 10px; } .controls button { border: 1px solid white; background: none; appearance: none; color: white; padding: 5px 10px; border-radius: 4px; text-transform: uppercase; font-size: 11px; cursor: pointer; } .controls button:hover { background: white; color: #333; } .fade { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: radial-gradient(rgba(0, 0, 0, 0), black); } .table { width: 540px; height: 310px; border-radius: 10px; background: #5b230d; position: relative; display: flex; padding: 20px; box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.5), inset 0px 0px 5px rgba(0, 0, 0, 0.5); } .table__pockets { position: absolute; z-index: 1; pointer-events: none; top: 0; left: 0; right: 0; bottom: 0; } .table__pockets span { width: 25px; height: 25px; border-radius: 100%; background: black; position: absolute; background: linear-gradient(0deg, black, #111); box-shadow: inset 0 3px black, 0px 0px 5px rgba(0, 0, 0, 0.5); border: 1px solid rgba(0, 0, 0, 0.5); } .table__pockets span:nth-of-type(1) { top: 7px; left: 7px; } .table__pockets span:nth-of-type(2) { top: 7px; right: 7px; } .table__pockets span:nth-of-type(3) { top: 7px; left: calc(50% - 12.5px); } .table__pockets span:nth-of-type(4) { bottom: 7px; left: 7px; } .table__pockets span:nth-of-type(5) { bottom: 7px; left: calc(50% - 12.5px); } .table__pockets span:nth-of-type(6) { bottom: 7px; right: 7px; } .table__inner { background-image: url(//repo.bfw.wiki/bfwrepo/image/62745d833cd2e.png); background-size: 100px; border-radius: 10px; width: 100%; height: 100%; box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 0px 5px rgba(0, 0, 0, 0.5); position: relative; } .table__sunk { position: absolute; top: calc(100% + 20px); left: 50%; transform: translateX(-50%); display: flex; padding: 5px; border-radius: 4px; } .table__sunk .ball { margin: 0 2px; position: relative; top: 0 !important; left: 0 !important; box-shadow: 0px 0px 3px 1px rgba(0, 0, 0, 0.5); } .table__sunk:not(:empty) { background: #bbb; } .ball { width: 20px; height: 20px; border-radius: 100%; position: absolute; background: white; overflow: hidden; } .ball::before { content: ""; position: absolute; z-index: 1; background: radial-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.35)); top: 0; left: 0; right: 0; bottom: 0; border-radius: 100%; } .ball::after { content: ""; position: absolute; width: 30px; height: 10px; top: 5px; left: -5px; } .ball__aimer { position: absolute; top: 7.5px; left: -50px; width: 40px; height: 5px; border: 1px solid white; transform-origin: 60px 2.5px; overflow: hidden; } .ball__aimer span { background: white; position: absolute; top: 0; right: 0; height: 100%; width: 0; } .ball.primary { top: calc(50% - 10px); left: 100px; overflow: visible; } .ball.primary.active { box-shadow: 0px 0px 5px black; } .ball.num-1 { background: #e8952d; } .ball.num-1.racked { left: 300px; top: calc(50% - 10px); } .ball.num-2 { background: #07486e; } .ball.num-2.racked { left: 320px; top: calc(50% - 21px); } .ball.num-3 { background: #bd263a; } .ball.num-3.racked { left: 320px; top: calc(50% + 1px); } .ball.num-4 { background: #3a2e51; } .ball.num-4.racked { left: 340px; top: calc(50% - 32px); } .ball.num-5 { background: #de5136; } .ball.num-5.racked { left: 340px; top: calc(50% + 12px); } .ball.num-6 { background: #134a30; } .ball.num-6.racked { left: 360px; top: calc(50% - 42px); } .ball.num-7 { background: #602f2c; } .ball.num-7.racked { left: 360px; top: calc(50% - 20px); } .ball.num-8 { background: #111; } .ball.num-8.racked { left: 340px; top: calc(50% - 10px); } .ball.num-9::after { display: block; background: #eb992f; } .ball.num-9.racked { left: 360px; top: calc(50% + 2px); } .ball.num-10::after { display: block; background: #07486e; } .ball.num-10.racked { left: 360px; top: calc(50% + 24px); } .ball.num-11::after { display: block; background: #bd263a; } .ball.num-11.racked { left: 380px; top: calc(50% - 52px); } .ball.num-12::after { display: block; background: #3a2e51; } .ball.num-12.racked { left: 380px; top: calc(50% - 30px); } .ball.num-13::after { display: block; background: #de5136; } .ball.num-13.racked { left: 380px; top: calc(50% - 8px); } .ball.num-14::after { display: block; background: #134a30; } .ball.num-14.racked { left: 380px; top: calc(50% + 14px); } .ball.num-15::after { display: block; background: #602f2c; } .ball.num-15.racked { left: 380px; top: calc(50% + 36px); } .branding { position: fixed; bottom: 10px; right: 10px; } .branding img { width: 50px; } </style> </head> <body> <div class="fade"></div> <div class="title">the Pool Table<small>trigonometry is hard</small></div> <div class="controls"> <button class="reset">Reset</button> </div> <div class="table"> <div class="table__pockets"><span></span><span></span><span></span><span></span><span></span><span></span> </div> <div class="table__inner"> <div class="ball primary"></div> <div class="ball racked num-1"></div> <div class="bal.........完整代码请登录后点击上方下载按钮下载查看
网友评论0