html实现跳跳棋游戏,原生JS实现的跳一跳小游戏完整实例

本文实例讲述了原生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;

}