【原】我是超级收银员,你敢来挑战吗

微信在最新的iPhone版应用中运营刷卡功能,为了推广该功能,小组成员自主开发了简单的超级收银员小游戏。第一次写前端游戏,严重意识到js写少了,趁这次恶补下,毕竟还年轻,感觉老了脑袋不好使。今天给大家分享本次游戏的学习成果,有兴趣的同学先扫描二维码挑战。

目录:

  • 游戏思路
  • 游戏场景
  • 核心代码

游戏思路

本人很喜欢玩游戏,也玩过不少小游戏,5月份的时候我接触了手游《刀塔传奇》,好玩、有趣味性,让自己又爱又恨投入了时间和金钱,享受其中的乐趣,相信“好玩”和“商业化成功”是做一款游戏的目标,对于超级收银员游戏,市场上类似的有很多,而我们的目标很简单,只想把超级收银员做成一个好玩的小游戏,更有趣味性,思路如下:

玩法简单

游戏界面随机出现不同物品,点击条形码格加分,其它减分。

易上手

随便玩一二局游戏就知道怎么玩,学习成本低。

趣味性

游戏UI风格幽默,如鸟被击中后爆炸。

虐心

游戏从一开始简单快速到困难,容易出错,用户不服输。

分享文案拉仇恨

大部分用户第一次玩得的分数低于40,被授予“水货收银员”的称号,并被全部50%上的收银员打败,求朋友来帮忙报仇;

分数大于40,被授予“超级收银员”的称号,求朋友来超越;

通过用户传播、推广。

游戏场景

来自咸菜大师的作品,微信版截图,原版界面更好看- -

核心代码

1.随机生成物品

九宫格中,随时出现物品,函数如下:

//产生随机数,例如从1~9数字中随机选择3个,getRandom(3,9)
function getRandom(count,totle){
    var arr = [];
    var tmp;
    while(arr.length < count){
        tmp = parseInt(Math.random() * totle);
        if(arr.indexOf(tmp) == -1){
            arr.push(tmp);
        }
    }
    return arr;
}

九宫格中,随时为li标签添加class:

var time;//游戏时间
var interval;//游戏运行的频率
//随机显示卡牌,剩余时间越少,卡片的切换速度和数量的递增
function _updateInterval(){
    //随机选择class 并随机为选择的li添加该class
    $("body").find(".game-main li").removeClass();
    var prize_config = ["bird","code","code","code","bird","code","bird","code","card"]; 

    if((interval >= 800)){
      var classname_arr = getRandom("1","3");
      var li_arr = getRandom("1","9");
      for(var i = 0; i < 1; i ++){
        var li_randomName = prize_config[classname_arr[i]];
        var li_randomLi = $(".game-main li")[li_arr[i]];
        $("body").find(li_randomLi).addClass("ico-"+li_randomName);
      }
    }

    //此处省略代码...

    if((interval < 50)){
      var classname_arr = getRandom("8","9");
      var li_arr = getRandom("8","9");
      for(var i = 0; i < 8; i ++){
        var li_randomName = prize_config[classname_arr[i]];
        var li_randomLi = $(".game-main li")[li_arr[i]];
        $("body").find(li_randomLi).addClass("ico-"+li_randomName);
      }
    }

    //循环自身
    time_out = setTimeout(arguments.callee,interval);
}

2.时间、分数控制

var time_minus;
var time_out;

//时间控制
function prize_time(){
  time_minus = setInterval(_countdown,1000);
  time_out = setTimeout(_updateInterval,interval);
}
function _updateTime(minus){
  time -= minus;
}
//游戏时间更新
function _updateCount(){
  $("#game_time").text(time);
}
//游戏时间减少
function _countdown(){

  _updateTime(1);

  if(time >= 0){
    _updateCount();
    interval = time * 15;

    interval = Math.max(interval,550);

  }
  else if(time < 0){
    _showEnd();
    time_minus && clearInterval(time_minus);
    time_out && clearTimeout(time_out);
  }

}

//分数控制,触摸到鸟和卡片的头像扣5分
$(".game-main li").on("tap",function(){
  var gameMainLi = $(this);
  gameMainLi.addClass("on");
  if(gameMainLi.hasClass("ico-bird")){
    _updateTime(5)
  }
  else if(gameMainLi.hasClass("ico-card")){
    _updateTime(5)
  }
  else if(gameMainLi.hasClass("ico-code")){
    val += 1;
    $("#game_order").text(val);
  }
})

3.根据游戏结果的单数生成分享文案

首先要加载微信分享模块的接口,这里就不做介绍,分享到朋友圈的分案如下:

//时间到,显示结果
function _showEnd(){
  $(".game-main li").removeClass();
  $(".state").removeClass("hide");
  $(".state-order").text(val);

  //分享到朋友圈的文案
  txt2 = Math.min((((val / 80)*100)+ (Math.random() *99 / 100)).toFixed(2)  ,100);
  if(val >= 40){
    $(".state").addClass("show-suc");
    txt1 = "我是超级收银员,你敢挑战么";//分享出去的标题
    share_img = "ico_share_suc.jpg"//分享出去的图标
    share_txt = "我用微信扫码刷卡,60秒收银"+val+"单,打败全球"+txt2+"%的收银员,你敢挑战么?"//分享出去的描述
  }
  else{
    $(".state").addClass("show-fail");
    txt1 = "我是水货收银员,谁来替我报仇";
    share_img = "ico_share_fail.jpg"
    share_txt = "我用微信扫码刷卡,60秒收银"+val+"单,被全球"+(100.00-txt2)+"%的收银员打败/(ㄒoㄒ)/~~,谁来替我报仇"
  }
}

总结

第一次完整开发一个小游戏,虽然不难,但也是折腾了好几天,以上一点想法,水平有限,不足之处,欢迎大家拍砖~

最后感谢前端大猫的大力协助~

时间: 2024-10-09 14:30:33

【原】我是超级收银员,你敢来挑战吗的相关文章

超市收银系统设计

首先根据业务分析共有几个功能模块: 收银员模块: 服务台模块:会员管理(注册.注销.信息修改等),商品管理(商品的退货,库存管理) 管理员模块:查看收银台销售情况和商品情况 共有模块:登录,用户身份验证,退出 用户:服务台用户,收银员,管理员 权限: 服务台:管理维护,对会员.商品的信息进行管理和维护 收银员用户:结账权限

超市收银系统

1,登录界面 代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Data.SqlClient; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.F

超市无人自助收银系统

作者:李昊旻链接:https://www.zhihu.com/question/26571129/answer/33319341来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 科普一下,应该还有朋友不太熟悉无人自助收银系统.上个图,自助收银机大概是这个样子(网图): &lt;img src="https://pic2.zhimg.com/00aa7c13eccec846bc403575c91ec23d_b.jpg" data-rawwidth=&

收银和库存管理员操作

需求: 登陆后,判断用户是收银员还是库存管理员,收银员权限:对客户购买商品进行扫描.计算价格.收款.找零.打印小票 库存管理员:对商品库存进行增.删.改.查操作 关联地方:收银员扫描出的商品也就是被购买的商品,库存相应减少 这里没有用socket通信,因为我对这个的使用不熟悉,只是简单的2种操作 整体代码架构如下所示 一个一个的贴吧: 1.来2个XML吧,产品和用户角色 <?xml version="1.0" encoding="utf-8"?> <

消磁扫描枪如何用于超市收银

消磁扫描枪如何用于超市收银? 我们得现从电子商品防盗系统说起: EAS(Electronic Article Surveillance)又称电子商品防窃(盗)系统,是目前大型零售行业广泛采用的商品安全措施之一.   EAS系统主要由三部分组成:检测器(Sensor).解码器(Deactivator)和电子标签(Electronic Label and Tag).电子标签分为软标签和硬标签,软标签成本较低,直接粘附在较"硬"商品上,软标签不可重复使用:硬标签一次性成本较软标签高,但可以重

购买优质美发收银系统 从此生意滚滚来

购买优质美发收银系统 从此生意滚滚来 干美发这一行的,作为管理者除了自己要全面把握各方面的知识外,还需要懂得运用一些软件体系来帮助管理店铺.选购一款优质美发收银系统就是比较好的选择. 那么,美发收银系统到底有哪些具体的优势呢?从专业的角度来讲,其实它主要用于美容美发行业的收银软件,支持消费方式.该系统有快速消费功能,换句话说消费者就算不用现金也能付款,用现金的情况下收银员也不用为找零而发愁,是美容美发行业不可缺少的管理工具. 有了这样一款系统,无论是客流高峰期还是员工换班时期,美发店的管理者也能

新大陆fr40超市收银二维码扫描平台的特点

据了解目前台式的扫描设备在收银台的应用尤为广泛,很多超市为了优化收银流程,采用新大陆fr40二维码扫描平台,下面我们通过它的特点来简单介绍一下它. 新大陆FR40系列桌面式条码扫描器,能快速地识读屏幕及纸张的一维或二维条码.该型号支持RS-232/USB等PC接口,结实耐用,具有良好性价比.据远景达了解它适合在超市.商场和仓库等环境中应用. 产品特性 1.一键切换识读模式 可通过顶部按键一键切换纸质码识读模式/屏幕码识读模式. 2.良好的运动容差能力 2.5米/秒的运动容差能力结合46度的超大识

基于C#的超市收银管理系统

基于C#的超市收银管理系统 前序 一直在忙学习Qt有关的知识,非常有幸这学期学习了C#.让我也感觉到了一丝欣慰,欣慰的是感觉好上手啊,学了几天顿时懂了.好多控件的使用方法好类似,尽管平时上课没有怎么认真听过课.可是好多知识还是理解的几乎相同.这一点还是挺高兴的!又到了一学期的期末,凡是编程语言这门课,最后肯定少不了课程设计.想来想去还是用C#实现以下自己以前做过的超市收银管理系统.业务逻辑也不用多想了,直接開始编写代码. 说实话.感觉学校里边包含作业以及各种任务都好应付,要是真正做企业级的项目,

思迅/泰格/科脉/收银软件/商超软件数据库修复解决断电造成损坏的mdb\dat文件SQL数据库 置疑 修复 恢复

拥有专业管理软件数据库修复技术工程师,专业提供管家婆.美萍.思迅.科脉等管理软件技术服务,电脑维修\重装系统技 术服务.无法登陆打不开等出错问题处理(连接失败,请输入正确的服务器名,SQL Server不存在或拒绝访问,用户sa登陆失败等等),数据损坏修复 .软件外网远程访问,年结存.软件版本升级,解决升级数据库失败错误.美萍软件到期升级.断电数据库修复(不可识别的数据库格式.连接数据库失败)等技术服务.各类管理软件.电脑技术服务等.  案例分析 [单位名称] 山东某连锁超市泰格收银软件 [数据