本文实例讲述了原生JS实现的跳一跳小游戏。分享给大家供大家参考,具体如下:
以下说的是闲暇编写的一个小游戏--跳一跳,类似于微信的跳一跳,大体实现功能有:
1.先随机生成地图;
2.按住按钮释放后完成动作并进行判断;
首先po一下代码;
代码如下:
跳一跳*{padding: 0;margin: 0;}
.game{
position: relative;
width: 800px;
height: 400px;
border: 1px solid black;
margin: 0 auto;
}
.game .content{
position: absolute;
width: 700px;
height: 400px;
left: 0;
top: 0;
}
.game #chess{
position: absolute;
width: 40px;
height: 48px;
overflow: hidden;
z-index:99;
transition-property: all;
}
.cylinder{
position: relative;
width: 70px;
height: 101px;
float: left;
}
.cylinder .top{
position: absolute;
width: 70px;
height: 35px;
border-radius: 50%;
background: yellow;
z-index: 4;
}
.cylinder .front{
position: absolute;
width: 70px;
height: 70px;
background: black;
margin-top: 17px;
z-index: 3;
}
.cylinder .bottom{
position: absolute;
width: 70px;
height: 35px;
border-radius: 50%;
background: black;
margin-top: 65px;
z-index: 4;
}
button{
position: absolute;
width: 80px;
height: 30px;
font-size: 16px;
text-align: center;
line-height: 30px;
border-radius: 20%;
bottom: 10px;
right: 10px;
}