纯JavaScript入门级小游戏：兔子抢金币（附演示地址+源码）

Hello，大家好，我是兔哥，我又来分享好玩的入门级项目啦。

今天给大家带来的是一个纯JavaScript入门级小游戏：兔子抢金币，规则非常简单，控制屏幕上的兔子去接天上掉下来的金币，接满20个就可以通关。

下面先放出在线试玩的地址：

​​JavaScript应用http://java18.cn/tuzi/index.html​​游戏画面：

用键盘上的A和D控制兔子的左右运动。

兔子是会一直跳动的，这其实是用了帧动画：

如上图所示，运用setInterval不停地更换背景图片就可以实现兔子跳动的效果，相关代码：

animation(document.getElementById('tuzi'),"img/奔跑的兔子.png");

 这边有一个animation方法，这是我单独封装的一个帧动画方法。

/**
* 帧动画函数
* ele 需要控制的DOM元素
* imgUrl 图片地址
*/
function animation(ele,imgUrl){

  //变更元素的背景图素材
  ele.style.backgroundImage = 'url('+imgUrl+')';
  ele.style.backgroundRepeat = 'no-repeat';
  var index = 0;
  function run(){

     index++;
      if (index >= positions.length) {
        index = 0;
      }
    var position = positions[index].split(' ');
    ele.style.backgroundPosition = position[0]+'px '+position[1]+'px';
     


  }
   
  running = setInterval(run,80);


  //clearInterval(running); //清除定时器
}

 在这个案例中，金币也是动态的，其实也是用了类似的方法：

 金币的动画我封装到了外部js中

代码：

//通用的道具类
function Item(type,speed){

  var html = "";
  var _timer = null;

  

  this.draw = function(){



    _timer = setInterval(function(){

      if(type == 'medicine'){
        var itop = Math.ceil( getScreenHeight() * Math.random() );
        var ileft = Math.ceil(getScreenWidth() * Math.random() );
        
        /*console.log(itop + "," + ileft);
        return;*/
        html = "<div class='medicine' style='top:"+itop+"px;left:"+ileft+"px'></div>";
      }else if(type == 'gold'){

        var itop = Math.ceil( getScreenHeight() * Math.random() );
        var ileft = Math.ceil(getScreenWidth() * Math.random() );

        html= "<img src='img/gold/左斜转0000.png' class='gold'style='top:"+itop+"px;left:"+ileft+"px'></img>";

        if($(".gold").length >= 10) return;
          

      }

      $("body").append(html);

    },speed);
  };

  this.pause = function(){
    clearInterval(_timer);
  }

  

};

 还有一个兔子和金币的碰撞逻辑：

function checkTouch($dom){

  var tuzi = document.getElementById('tuzi');

  var W = tuzi.clientWidth * 2; //兔子的宽度
  var H = tuzi.clientHeight * 2; //兔子的高度

  

  var p_X = (tuzi.offsetLeft * 1 + W / 2); //兔子的当前横坐标
  var p_Y = (tuzi.offsetTop  * 1 + H / 2); //兔子的当前纵坐标

  //console.log(p_X + "," + p_Y);


  var w = $dom.width(); //金币的宽度
  var h = $dom.height(); //金币的高度

  var m_top = getTop($dom.get(0));  //金币的当前纵坐标
  var m_left = getLeft($dom.get(0));  //金币的当前横坐标

  var m_X = (m_left * 1 + w/2);
  var m_Y = (m_top * 1 + h/2);
  

  //console.log(Math.abs(p_Y - m_Y) + "========" + (H + h) / 2)
  
  if(Math.abs(p_X - m_X) <= (W + w) / 2    &&   Math.abs(p_Y - m_Y) <= (H + h) / 2 ){
    
    return true;
  }
  
  return false;
  
}

至于最后的排行榜，是用浏览器缓存做的。

完整源码，放到码云上了：

​​兔子抢金币: 纯JavaScript入门级小游戏：兔子抢金币A：向左，D：向右https://gitee.com/skyblue0678/rabbit-grabs-gold-coin​​

喜欢的话，还请点个 赞 哦，谢谢各位啦~~