Question

游戏的本质：自定义形状（圆形，方形，三角形，菱形）移动到盒子游戏浏览器宽度的80％。当玩家按下她消失的形状时，会将点数添加到帐户中（从0到100点，具体取决于图形从左边缘移动的距离）。以下自定义形状开始移动。

<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>

https://jsfiddle.net/gc0jv3s8/1/

Answer 1

这是你需要的吗？

＆＃13;

$(function() {
  initShape();
});

function initShape() {
  var shapes = ['circle', 'rhombus'];
  var rdIndex = Math.floor(Math.random() * shapes.length);
  var rdShape = shapes[rdIndex];
  var $i = $('<i>', { id: rdShape });

  $('.linear').prepend($i);
  
  createShape($i);
}

function createShape(el) {
  $('#' + el.prop('id')).show().animate({
    left: '100%'
  }, 7000, function() {
    initShape();
  }).on('click', function() {
    var count = (parseInt($('#count').html()) + 1);
    
    $(this).stop();
    $(this).remove();
    
    $('#count').html(count);
    
    initShape();
  });
}

＆＃13;

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;
  overflow: hidden;
}

.linear i {
  display: none;
  left: -60px;
  top: 150px;
  position: absolute;
}

#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 {
  width: 45px;
  height: 45px;
  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;
}

#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;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="count">0</div>
  <div id="left"></div>
  <div id="right"></div>
  <div class="linear"></div>
</body>

＆＃13;

javascript游戏形状移动

1 个答案: