页面布局

html{

font-size: 125%;

margin: 0rem;

}

.wap-main{

background: -webkit-linear-gradient(right,#7e2b9a,#ac3e34); /*safari 5.1 to 6.0*/

background: -o-linear-gradient(right,#7e2b9a,#ac3e34); /*opera 11.1 to 12.0*/

background: -moz-linear-gradient(right,#7e2b9a,#ac3e34);/*firefox 3.6 to 15*/

background: linear-gradient(to right,#7e2b9a,#ac3e34);/*#7e2b9a,#ac3e34*/

height: 32rem;

}

/*动画猜拳区域*/

.game-content{

position: fixed;

background: url(img/bg_ring@2x.png)no-repeat center/contain;

width: 13.36rem;

height: 16.64rem;

left: 50%;

margin-left: -6.68rem;

top: 2.56rem;

}

.list1{

position: absolute;

width: 7.2rem;

height: 4.2rem;

background: url(img/bg-round1.png)no-repeat center/contain;

left: 50%;

margin-left: -3.34rem;

top: 4.5rem;

}

.list2{

position: absolute;

width: 7.2rem;

height: 3.2rem;

background: url(img/countdown_ready@2x.png)no-repeat center/contain;

left: 50%;

margin-left: -3.34rem;

top: 8.5rem;

}

.list3{

position: absolute;

width: 6.2rem;

height: 2.0rem;

background: url(img/tip_choosegesture@2x.png)no-repeat center/contain;

left: 50%;

margin-left: -3rem;

top: 15rem;

}

/*石头剪刀布选择区域*/

.game-btn{

position: absolute;

background-color: #df574a;

width: 14.48rem;

height: 4.8rem;

left: 50%;

margin-left: -7.24rem;

top: 20rem;

border: 0.2rem #f8e71c solid;

/*圆角矩形*/

border-radius: 1em;

}

.btn{

width: 3.5rem;

height: 3.5rem;

float: left;

margin-left: 1rem;

margin-top: 0.6rem;

/*background: url();*/

}

.btn1{

background: url(img/btn_gesture_jiandao@2x.png)no-repeat center/contain;

}

.btn2{

background: url(img/btn_gesture_shitou@3x.png)no-repeat center/contain;

}

.btn3{

background: url(img/btn_gesture_bu@2x.png)no-repeat center/contain;

}

.game-chong{

position: absolute;

width: 6.2rem;

height: 10rem;

background: url(img/chongxinkaishi.png)no-repeat center/contain;

left: 50%;

margin-left: -3rem;

top: 15rem;

}

/*倒计时*/

.game-time{

position: absolute;

width: 6rem;

height: 8rem;

top: 3rem;

left: 50%;

margin-left: -3rem;

animation: imgmove1 1s linear;

animation-fill-mode: forwards;

-moz-animation: imgmove1 1s linear;

-moz-animation-fill-mode: forwards;

-webkit-animation: imgmove1 1s linear;

-webkit-animation-fill-mode: forwards;

}

@keyframes imgmove1{

from{

transform: scale(0);

opacity: 1;

}

to{

transform: scale(1.5);

opacity: 0;

}

}

/*结果样式*/

.game-result{

position: absolute;

top:5rem;

left: 50%;

margin-left: -3.8rem;

width: 7.6rem;

height:6.08rem;

animation: move 1.5s linear ;

animation-fill-mode: forwards;

}

@keyframes move{

0%{

/*transform: translateY(0rem);*/

top:6rem;

margin-left: -3rem;

width: 3.8rem;

height:3.04rem;

}

100%{

/*transform: translateY(-2rem);*/

width: 7.6rem;

height:6.08rem;

}

}

/*出拳动画样式*/

.game-enemy, .game-player{

position: absolute;

left: 50%;

margin-left:-1.5rem;

width: 3.2rem;

height: 6.4rem;

}

.game-enemy{

top:-6.4rem;

animation: move1 1.5s linear ;

animation-fill-mode: forwards;

-webkit-animation: move1 1.5s linear ;

-moz-animation: move1 1.5s linear ; ;

-moz-animation-fill-mode:forwards ;

-webkit-animation-fill-mode:forwards ;

}

@keyframes move1{

0%{

/*transform: translateY(0rem);*/

top:-6.4rem

}

100%{

/*transform: translateY(-2rem);*/

top:-2rem

}

}

.game-player{

bottom: -6.4rem;

animation: move2 1.5s linear ;

animation-fill-mode: forwards;

-webkit-animation: move2 1.5s linear ;

-moz-animation: move2 1.5s linear ; ;

-moz-animation-fill-mode:forwards ;

-webkit-animation-fill-mode:forwards ;

}

@keyframes move2{

0%{

/*transform: translateY(0rem);*/

bottom:-6.4rem

}

100%{

/*transform: translateY(-2rem);*/

bottom:-1rem

}

}

function aa(n){

//电脑猜拳数1剪刀2拳头3布

/*Math.random()  [0,1)*3---->[0,3)+1------->[1,4) --->1,3*/

var cnum=cnum=parseInt(Math.random()*3+1,0);

var num=5;

var gametimeaa=function(){

if(num>0){

console.log(num)

document.getElementById("game-content").innerHTML=""

num--;

}else{

clearInterval(gametimeinterobj)

}

}

gametimeinterobj=setInterval(gametimeaa,1000);

function check(){

//电脑随机

console.log("cnum:"+cnum);

if(cnum==1){ //剪刀

if(n==1){

console.log("平");

return 1;

}else if(n==2){

console.log("赢");

return 2;

}else{

console.log("输");

return 3;

}

}else if(cnum==2){//石头

if(n==1){

console.log("输");

return 3;

}else if(n==2){

console.log("平");

return 1;

}else{

console.log("赢");

return 2;

}

}else if(cnum==3){//步

if(n==1){

console.log("赢");

return 2;

}else if(n==2){

console.log("输");

return 3;

}else{

console.log("平");

return 1;

}

}

}

setTimeout(bbb,5000);

function bbb(){

document.getElementById("game-content").innerHTML="";;

}

}