html网游戏页设计,网页版游戏设计.html

网页版2048游戏

body{font-family:Arial;text-align:center;}

.game{margin:0 auto;text-align:center;display:inline-block;}

.game-score{font-size:20px;margin:20px auto;}

.game-container{background-color:#bbada0;border-radius:10px;position:relative;}

.game-cell{border-radius:6px;background-color:#ccc0b3;position:absolute;}

.game-num{width:0px;height:0px;border-radius:6px;font-weight:bold;font-size:40px;color:#fff;text-align:center;position:absolute;}

.game-num-2{background:#eee4da;color:#776e65;}

.game-num-4{background:#ede0c8;color:#776e65;}

.game-num-8{background:#f2b179;}

.game-num-16{background:#f59563;}

.game-num-32{background:#f67c5f;}

.game-num-64{background:#f65e3b;}

.game-num-128{background:#edcf72;font-size:35px;}

.game-num-256{background:#edcc61;font-size:35px;}

.game-num-512{background:#9c0;font-size:35px;}

.game-num-1024{background:#33b5e5;font-size:30px;}

.game-num-2048{background:#09c;font-size:30px;}

.game-over{width:100%;height:100%;position:absolute;border-radius:10px;box-sizing:border-box;z-index:1;display:table;background:rgba(123,102,85,0.5)}

.game-over-info{display:table-cell;vertical-align:middle}

.game-over p{font-size:45px;color:#fff;margin:20px auto;}

.game-over span{cursor:pointer;background-color:rgba(103,82,65,0.6);display:block;margin:20px auto;width:180px;padding:10px 10px;font-size:25px;color:#f7f2e5;border-radius:10px;border:1px solid #978271;transition:all .2s}

.game-over span:hover{background-color:rgba(103,82,65,0.7);color:#fff}

.game-hide{display:none;}

分数： 0

重新开始

Game2048({prefix: 'game', len: 4, size: 100, margin: 20});

一键复制

编辑

Web IDE

原始数据

按行查看

历史