原生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;
color: gray;
background: lightgray;
font-size: 13px;
text-align: center;
}
body {
width: 100%;
max-width: 400px;
transform: scale(1);
filter: drop-shadow(0 0 3px rgba(0,0,0,.5));
}
#game_console {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
position: relative;
background:
linear-gradient(to bottom, skyblue, dodgerblue 27%, #99c445 27%);
background-size: 100% auto;
background-repeat: no-repeat;
perspective: 1000px;
border-radius: 5px;
/* clip-path: polygon(0% 0%, 100% 0%, 100% 62.5%, 50% 100%, 0% 62.5%); */
}
.hr_sparkle {
background:
url('//repo.bfw.wiki/bfwrepo/images/bangqiu/success.gif'),
linear-gradient(to bottom, skyblue, dodgerblue 27%, #99c445 27%) !important;
background-size: 50% auto, 100% auto !important;
background-repeat: repeat-x, repeat !important;
}
#start_screen {
width: 300px;
padding: 1rem;
font-family: system-ui;
border-radius: 2px;
background: SeaGreen;
text-align: center;
font-size: 28px;
letter-spacing: 3px;
font-weight: 900;
color: white;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
box-shadow:
0px 0px 0px 3px white,
0 0 25px black;
cursor: pointer;
box-sizing: border-box;
}
#start_screen p {
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
line-height: 150%;
}
#start_screen span {
font-family: monospace;
font-size: 24px;
font-weight: 500;
box-sizing: border-box;
border: 1px solid #333;
.........完整代码请登录后点击上方下载按钮下载查看
网友评论0