<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>頁(yè)面布局</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;
}
/*動(dòng)畫猜拳區(qū)域*/
.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;
}
/*石頭剪刀布選擇區(qū)域*/
.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;
}
/*倒計(jì)時(shí)*/
.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;
}
}
/*結(jié)果樣式*/
.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;
? ? }
}
/*出拳動(dòng)畫樣式*/
.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){
//電腦猜拳數(shù)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(){
//電腦隨機(jī)
? ? ? ? ? ? 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>
