<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面布局</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<style>
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
}
}
</style>
<script>
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="<img class='game-time' src='img/daojishi"+num+".png' >"
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="<img class='game-player' src='img/player"+n+".png'><img class='game-enemy' src='img/enemy"+cnum+".png'><img class='game-result' src='img/result"+check()+".png'>";;
}
}
</script>
</head>
<body>
<div class="wap-main">
<div class="game-content" id="game-content">
--<div class="list1"></div>
<div class="list2"></div>
<div class="list3"></div>
<!--<img class="game-time" src="img/daojishi1.png" />-->
</div>
<div class="game-btn">
<div class="btn1 btn" onclick="aa(1)"></div>
<div class="btn2 btn" onclick="aa(2)"></div>
<div class="btn3 btn" onclick="aa(3)"></div>
</div>
<divclass="game-chong"></div>
</div>
</body>
</html>
