javascript
猜拳游戏html,JavaScript中实现猜拳小游戏
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;
}
/*動畫猜拳區(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;
}
/*倒計時*/
.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){
//電腦猜拳數(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=""
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="";;
}
}
--
總結
以上是生活随笔為你收集整理的猜拳游戏html,JavaScript中实现猜拳小游戏的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： java 把方法当参数传递_java 中
- 下一篇： js 获取url问号前_收下这波 JS