纯JavaScript入门级小游戏:兔子抢金币(附演示地址+源码)

简介: Hello,大家好,我是兔哥,我又来分享好玩的入门级项目啦。今天给大家带来的是一个纯JavaScript入门级小游戏:兔子抢金币,规则非常简单,控制屏幕上的兔子去接天上掉下来的金币,接满20个就可以通关。

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

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

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

http://java18.cn/tuzi/index.html


游戏画面:

3c68a3e5ed244db0a68782b816fcb070.png

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

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

a2aaeea30245486cbafaa94c2fad52a3.png

如上图所示,运用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); //清除定时器
}

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

e3dba5325d204285a713e9ffe620d93e.png

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

57f3d287e9664cd7abab439bfc8d71bb.png

 //通用的道具类
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;
}

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

完整源码,放到码云上了:https://gitee.com/skyblue0678/rabbit-grabs-gold-coin

相关文章
|
1月前
|
JavaScript
JS实现简单的打地鼠小游戏源码
这是一款基于JS实现简单的打地鼠小游戏源码。画面中的九宫格中随机出现一个地鼠,玩家移动并点击鼠标控制画面中的锤子打地鼠。打中地鼠会出现卡通爆破效果。同时左上角统计打地鼠获得的分数
65 1
|
11天前
|
Web App开发 移动开发 HTML5
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码
html5 + Three.js 3D风雪封印在棱镜中的梅花鹿动效源码。画面中心是悬浮于空的梅花鹿,其四周由白色线段组成了一个6边形将中心的梅花鹿包裹其中。四周漂浮的白雪随着多边形的转动而同步旋转。建议使用支持HTML5与css3效果较好的火狐(Firefox)或谷歌(Chrome)等浏览器预览本源码。
38 2
|
21天前
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
53 14
|
27天前
|
JavaScript
原生JS实现斗地主小游戏
这是一个原生的JS网页版斗地主小游戏,代码注释全。带有斗地主游戏基本的地主、选牌、提示、出牌、倒计时等功能。简单好玩,欢迎下载
29 7
|
28天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
1月前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
118 1
|
1月前
|
JavaScript
JS趣味打字金鱼小游戏特效源码
hi fish是一款打字趣味小游戏,捞出海里的鱼,捞的越多越好。这款游戏用于电脑初学者练习打字。初学者可以根据自己的水平设置游戏难度。本段代码可以在各个网页使用,有需要的朋友可以直接下载使用,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码!
30 3
|
1月前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
42 4
|
1月前
|
JavaScript
js实现简洁实用的网页计算器功能源码
这是一款使用js实现简洁实用的网页计算器功能源码。可实现比较基本的加减乘除四则运算功能,界面简洁实用,是一款比较基本的js运算功能源码。该源码可兼容目前最新的各类主流浏览器。
24 2
|
1月前
|
JavaScript
JS实现的虚化雪景动态背景特效源码
JS实现的虚化雪景动态背景特效源码是一段基于JS实现的虚化雪景动态背景动画效果代码,非常有意思,欢迎对此特效感兴趣的朋友前来下载参考。
32 4

热门文章

最新文章