hammer+lodash实现2048小游戏代码
代码语言:html
所属分类:游戏
代码描述:hammer+lodash实现2048小游戏代码
代码标签: hammerl odash 2048 小游戏 代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"> <link href="https://fonts.googleapis.com/css?family=Rubik:300,400,700" rel="stylesheet"> <style> /* Variables: */ /**/ *, *:before, *:after { box-sizing: border-box; } button:hover, a:hover { cursor: pointer; } .clearfix::after { content: ""; display: block; clear: both; } html { min-height: 100%; width: 100%; font-size: 16px; font-family: "Rubik", sans-serif; line-height: 1.5em; color: #fff; background: #160140; background: linear-gradient(to top, #160140, #261535); } .wrapper { max-width: 500px; margin: 0 auto; padding: 15px; } h2 { font-style: italic; } /* Introduction */ .intro { margin-bottom: 60px; } .intro_title { text-align: center; color: #f9d49a; font-size: 3rem; } /**/ /* Guide instructions */ .guide { border-bottom: 1px solid grey; } .guide:first-of-type { margin-top: 4rem; border-top: 1px solid gray; } .guide_arrow { display: inline-block; margin: 15px; font-size: 3rem; color: #fff; } .controls_game, .controls_score { display: inline-block; width: 50%; float: left; } @media all and (max-width: 767px) { .controls_game, .controls_score { width: 100%; } } .controls_game-btn { margin-bottom: 1rem; padding: 0.5em 0.75em; background: transparent; color: #f9d49a; outline: 2px solid #f9d49a; -webkit-appearance: none; -moz-appearance: none; appearance: none; border: 5px solid transparent; box-shadow: inset 0 0 0px 2px #d4a8cf; letter-spacing: 0.1em; font-weight: bold; text-transform: lowercase; } .controls_score { display: inline-block; min-width: 4em; margin-bottom: 4rem; padding: 0.5em 0.75em; background: #0000003b; text-align: center; background: linear-gradient(90deg, #f9d49a, #d4a8cf); } .controls_score-label, .controls_score-text { display: inline-block; } .controls_score-label { color: initial; } .controls_score-text { color: #4a3647; font-size: 2rem; } /**/ /* Gameboard: the container for the static grid background; and generated tiles/numbers; */ .gameboard { /* Position: relative; set for tile-container, which absolutely positions over it to match grid's dimensions; */ position: relative; width: 100%; max-width: 500px; height: 100%; max-height: 500px; margin: auto; padding: 8px; background: #ffffff08; border-radius: 5px; box-shadow: 0 0 8px 0px #f9d49a; } .gameboard::before { content: ""; display: block; padding-bottom: 100%; } /**/ /* Grid: Creates the static grid background and individual grid cells; */ .grid { width: 100%; height: 100%; position: absolute; top: 0; bottom: 0; right: 0; left: 0; margin: auto; } .grid_cell, .tile { display: inline-block; height: 25%; width: 25%; padding: 8px; float: left; background: rgba(238, 228, 218, 0.35); background-clip: content-box; } /**/ /* Tile container: Contains the dynamically-generated tiles; absolutely positioned over gameboard to match grid dimensions; */ .tile-container { /* absolutely positioned over gameboard to match dimensions */ position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 5px; } .tile { display: table; background: #eee4da; background-clip: content-box; position: absolute; z-index: 2; will-change: top, left; transition-property: top, left; transition-duration: 0.175s; transition-timing-function: ease-out; } .tile.initialize { -webkit-animation-name: newTile; animation-name: newTile; -webkit-animation-duration: 0.175s; animation-duration: 0.175s; -webkit-animation-timing-function: linear; animation-timing-function: linear; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; } @-webkit-keyframes newTile { 0% { .........完整代码请登录后点击上方下载按钮下载查看
网友评论0