jquery实现电脑猜拳计分游戏代码
代码语言:html
所属分类:游戏
代码描述:jquery实现电脑猜拳计分游戏代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic' rel='stylesheet' type='text/css'> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> @-webkit-keyframes icon-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); } 60% { opacity: 0; } 80% { transform: scale(0.5); } 90% { opacity: 0; } } @keyframes icon-animation { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.4); } 60% { opacity: 0; } 80% { transform: scale(0.5); } 90% { opacity: 0; } } body { background-color: #151e28; color: #edf0f9; font-family: "Open Sans", sans-serif; font-size: 16px; } #moves { list-style: none; width: 100%; padding: 0; display: flex; } #moves li { background: #35b197; width: 33.33%; margin: 1em; } #moves li:hover { background: #4fcab0; } #moves li:active { background: #f66e3a; } #moves li .fa { display: block; font-size: 48px; text-align: center; width: 100%; padding: 1em; box-sizing: border-box; } #moves li .fa.animating { -webkit-animation: icon-animation 2s 1; animation: icon-animation 2s 1; } #moves li .text { text-align: center; width: 100%; display: block; padding-bottom: 2em; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 600; font-size: 11px; } .scoreboard { width: 100%; } .scoreboard table { width: 100%; background: #1a2632; } .scoreboard table td { padding: 0.5em; box-sizing: border-box; text-align: center; text-transform: uppercase; } .scoreboard table thead { font-size: 12px; font-weight: 700; letter-spacing: 0.2em; } .scoreboard table thead td { padding-top: 2em; } .scoreboard table tbody td { font-size: 96px; font-weight: 900; line-height: 1em; } </style> </head> <body> <!-- partial:index.partial.html --> <ul id="moves"> <li data-move="rock"> <span class="fa fa-fw fa-hand-rock-o"></span> <span class="text">Rock</span> </li> <li data-move="paper"> <span class="fa fa-fw fa-hand-paper-o"></span> <span class="text">Paper</span> </li> <li data-move="scissors"> <span class="fa fa-fw fa-hand-scissors-o"></span> <span class="text">Scissors<.........完整代码请登录后点击上方下载按钮下载查看
网友评论0