javascript游戏形状移动
游戏的精髓：自定义形状（圆形、正方形、三角形、菱形）移动到游戏浏览器宽度的80%。当玩家按下她消失的形状时，点数将添加到帐户中（从0到100点，取决于人物从左边缘移动的距离）。以下自定义形状开始移动javascript游戏形状移动,javascript,jquery,Javascript,Jquery,游戏的精髓：自定义形状（圆形、正方形、三角形、菱形）移动到游戏浏览器宽度的80%。当玩家按下她消失的形状时，点数将添加到帐户中（从0到100点，取决于人物从左边缘移动的距离）。以下自定义形状开始移动 <body> <div id="count">0</div> <div id="left"></div> <div id="right"></div> <div class="linear"&
<body>
<div id="count">0</div>
<div id="left"></div>
<div id="right"></div>
<div class="linear">
<i id="circle"></i>
<i id="rhombus"></i>
</div>
</body>
<style>
body {
text-align: center;
background: #F0EFEE;
color: #777;
}
#count {
position: fixed;
display: inline-block;
float: left;
padding: 10px 20px;
background: #fff;
font: 1.5rem/1 monospace;
border-radius: .25rem;
box-shadow: 0 2px 2px rgba(0, 0, 0, .2);
z-index:20;
left:20px;
top:15px;
}
.linear {
display: inline-block;
position: relative;
margin: 20px 16px 20px 20px;
width: 80%;
height: 400px;
background:white;
}
#left {
background: #F0EFEE;
width: 10%;
height: 100%;
top:0;
left:0;
position: fixed;
z-index:15;
}
#right {
background: #F0EFEE;
width: 11%;
height: 100%;
top:0;
left:89%;
position: fixed;
z-index:15;
}
#circle {
position: absolute;
width: 45px;
height: 45px;
left: 0;
top: 150px;
border-radius: 50%;
background: #F6AC31;
}
#rhombus {
border-style: solid;
border-color: transparent transparent #00BFFF transparent;
border-width: 0 15px 15px 15px;
height: 0;
width: 30px;
left: 0;
top: 150px;
position: absolute;
}
#rhombus:after {
content: "";
position: absolute;
top: 15px;
left: -15px;
width: 0;
height: 0;
border-style: solid;
border-color: #00BFFF transparent transparent transparent;
border-width: 40px 30px 0 30px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("#circle").animate({ left: '100%' }, 7000 );
$("#rhombus").hide();
$("#circle").click(function(){
$(this).hide();$("#rhombus").show().animate({ left: '100%' }, 7000 );$('#count').html(+$('#count').html()+1);
});
</script>
0
身体{
文本对齐：居中；
背景：#F0EFEE；
颜色：#777；
}
#计数{
位置：固定；
显示：内联块；
浮动：左；
填充：10px 20px；
背景：#fff；
字体：1.5rem/1单空格；
边界半径：.25rem；
盒影：02px2pRGBA（0,0,0,2）；
z指数：20；
左：20px；
顶部：15px；
}
.线性{
显示：内联块；
位置：相对位置；
保证金：20px 16px 20px 20px；
宽度：80%；
高度：400px；
背景：白色；
}
#左{
背景：#F0EFEE；
宽度：10%；
身高：100%；
排名：0；
左：0；
位置：固定；
z指数：15；
}
#对{
背景：#F0EFEE；
宽度：11%；
身高：100%；
排名：0；
左：89%；
位置：固定；
z指数：15；
}
#圈{
位置：绝对位置；
宽度：45px；
高度：45px；
左：0；
顶部：150px；
边界半径：50%；
背景：#F6AC31；
}
#菱形{
边框样式：实心；
边框颜色：透明透明#00bff透明；
边框宽度：0 15px 15px 15px；
身高：0；
宽度：30px；
左：0；
顶部：150px；
位置：绝对位置；
}
#菱形：之后{
内容：“；
位置：绝对位置；
顶部：15px；
左：-15px；
宽度：0；
身高：0；
边框样式：实心；
边框颜色：#00bff透明；
边框宽度：40px 30px 0 30px；
}
$（“#圆圈”）。动画（{左：'100%}，7000）；
$（“#菱形”）.hide（）；
$（“#圆”）。单击（函数（）{
$（this）.hide（）；$（“#菱形”）.show（）.animate（{left:'100%}，7000）；$（'#count'）.html（+$（'#count'）.html（）+1）；
});
$（函数（）{
initShape（）；
});
函数initShape（）{
变量形状=['圆形'，'菱形']；
var rdIndex=Math.floor（Math.random（）*shapes.length）；
var rdShape=形状[rdIndex]；
var$i=$（''，{id:rdShape}）；
$（'.linear'）。前置（$i）；
createShape（一美元）；
}
函数createShape（el）{
$（'#'+el.prop（'id'））.show（）.animate({
左：“100%”
}，7000，函数（）{
initShape（）；
}).on（'单击'，函数（））{
var count=（parseInt（$（'#count'）.html（））+1）；
$（this.stop（）；
$（this.remove（）；
$（'#count'）.html（count）；
initShape（）；
});
}正文{
文本对齐：居中；
背景：#F0EFEE；
颜色：#777；
}
#计数{
位置：固定；
显示：内联块；
浮动：左；
填充：10px 20px；
背景：#fff；
字体：1.5rem/1单空格；
边界半径：.25rem；
盒影：02px2pRGBA（0,0,0,2）；
z指数：20；
左：20px；
顶部：15px；
}
.线性{
显示：内联块；
位置：相对位置；
保证金：20px 16px 20px 20px；
宽度：80%；
高度：400px；
背景：白色；
溢出：隐藏；
}
.线性i{
显示：无；
左：-60px；
顶部：150px；
位置：绝对位置；
}
#左{
背景：#F0EFEE；
宽度：10%；
身高：100%；
排名：0；
左：0；
位置：固定；
z指数：15；
}
#对{
背景：#F0EFEE；
宽度：11%；
身高：100%；
排名：0；
左：89%；
位置：固定；
z指数：15；
}
#圈{
宽度：45px；
高度：45px；
边界半径：50%；
背景：#F6AC31；
}
#菱形{
边框样式：实心；
边框颜色：透明透明#00bff透明；
边框宽度：0 15px 15px 15px；
身高：0；
宽度：30px；
}
#菱形：之后{
内容：“；
位置：绝对位置；
顶部：15px；
左：-15px；
宽度：0；
身高：0；
边框样式：实心；
边框颜色：#00bff透明；
边框宽度：40px 30px 0 30px；
}
0