游戏截图
项目代码结构目录
index.html 代码展示
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=3, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<title>chick</title>
<link rel="stylesheet" type="text/css" href="lib/viewui/styles/iview.css">
<script src="https://www.jq22.com/jquery/vue.min.js"></script>
<script type="text/javascript" src="lib/viewui/iview.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/base.css">
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>
<div id="app" :class="{onSubject: isSubject}">
<div class="container" :class="{ beingskin: skinBox}">
<div class="user-box" @click="showUser">
<div class="user-logo">
<div class="user-level">{
{chick.level}}</div>
<span class="portrait-item portrait0"></span>
</div>
<div class="user-info">
<div class="user-name">{
{user.name}}</div>
<div class="user-money">
<div class="user-mi"><Icon type="logo-usd" /></div>
<p>{
{user.money}}</p>
</div>
</div>
</div>
<!-- 功能菜单 -->
<ul class="nav-list">
<li @click="showPopup(skin)"><span class="nav-icon"><i class="ivu-icon ivu-icon-ios-shirt"></i></span><span class="nav-name">换装</span></li>
<li @click="showPopup(shop)"><span class="nav-icon"><i class="ivu-icon ivu-icon-ios-basket"></i></span><span class="nav-name">商店</span></li>
<li @click="showPopup(bag)"><span class="nav-icon"><i class="ivu-icon ivu-icon-ios-filing"></i></span><span class="nav-name">背包</span></li>
<li @click="showAchievement()"><span class="nav-icon"><i class="ivu-icon ivu-icon-ios-filing"></i></span><span class="nav-name">勋章</span></li>
<li @click="showPopup(study)" class="n-green"><span class="nav-icon"><i class="ivu-icon ivu-icon-ios-flask"></i></span><span class="nav-name">学习</span></li>
</ul>
<div class="content">
<!-- 太阳光 -->
<c-sunlight></c-sunlight>
<!-- 山峰 -->
<c-peak></c-peak>
<!-- 白云 -->
<c-clouds></c-clouds>
<div class="land-wrap">
<!-- 草地 -->
<c-grass></c-grass>
<!-- 房子 -->
<c-house></c-house>
<!-- 护栏 -->
<c-fence></c-fence>
<!-- 蜜蜂鲜花 -->
<c-bee></c-bee>
<!-- 鸡蛋 -->
<c-egg :eggnum="chick.egg.num" :eggprogress="chick.egg.progress" ref="paper"></c-egg>
</div>
<!-- 叶子 -->
<c-leaf></c-leaf>
<!-- 鸡饭碗 -->
<c-trough></c-trough>
<!-- chick -->
<div class="chick" :class="{noeat:!chick.eat}">
<!-- 进食倒计 -->
<div class="countdown-box">
<p class="countdown-text" :class="{active : !chick.eat }">{
{content}}{
{setTime}}</p>
<!-- 进食进度条 -->
<div class="progress" v-if="value != 0 && value < 100">
<div class="progress-content" :style="'width:' + value + '%' "></div>
</div>
</div>
<!-- 装扮-帽子 -->
<div class="skin-hat">
<keep-alive>
<component
:is="chick.componentHat"></component>
</keep-alive>
</div>
<div class="chick-head"></div>
<div class="chick-body">
<!-- 装扮-衣服 -->
<keep-alive>
<component
:is="chick.componentClothes"></component>
</keep-alive>
<!-- 青蛙衣服 -->
</div>
<div class="eye">
<span></span>
<span></span>
</div>
<div class="blusher">
<span></span>
<span></span>
</div>
<div class="face"></div>
<div class="wing-left"></div>
<div class="wing-content">
<span></span>
</div>
<div class="arm" style="display: none;">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="wing-r" style="display: none;"></div>
<div class="wing-right">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<div class="food">
<p></p>
<div class="dot-box">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="mouth">
<span></span>
<span></span>
<p></p>
</div>
<div class="foot">
<span></span>
<span></span>
</div>
</div>
<!-- 弹窗遮罩层 -->
<div class="popup-mask" v-show="skinBox" @click="hidePopup"></div>
</div>
<!-- 功能弹窗面板 -->
<div class="page-popup">
<div class="popup-item" v-show="isSkin">
<div class="popup-head border-bottom-1px">
<span class="popup-title fl">换装</span>
<i class="ivu-icon ivu-icon-md-close-circle" @click="hidePopup"></i>
</div>
<div class="popup-content">
<!-- 换装内容 -->
<tabs :animated="false">
<tab-pane label="" icon="ios-egg">
<ul class="opt-list">
<li
v-for="suit in suits"
:key="suit.name"
:class="['opt-btn', { active: chick.currentSuit === suit.id && chick.currentHat === suit.id && chick.currentClothes === suit.id}]"
@click="replaceDress(0,suit.id)">
<span class="opt-mask fadeIn animated"><Icon type="md-checkmark-circle" /></span>
{
{ suit.name }}
</li>
</ul>
</tab-pane>
<tab-pane label="" icon="ios-school">
<ul class="opt-list">
<li
v-for="hat in hats"
:key="hat.name"
:class="['opt-btn', { active: chick.currentHat === hat.id}]"
@click="replaceDress(1,hat.id)">
<span class="opt-mask fadeIn animated"><Icon type="md-checkmark-circle" /></span>
{
{ hat.name }}
</li>
</ul>
</tab-pane>
<tab-pane label="" icon="ios-shirt">
<ul class="opt-list">
<li
v-for="clothe in clothes"
:key="clothe.name"
:class="['opt-btn', { active: chick.currentClothes === clothe.id}]"
@click="replaceDress(2,clothe.id)">
<span class="opt-mask fadeIn animated"><Icon type="md-checkmark-circle" /></span>
{
{ clothe.name }}
</li>
</ul>
</tab-pane>
<tab-pane label="" icon="md-rose"><p style="padding-top: 40px; text-align: center;">首饰饰品开发中...</p></tab-pane>
<tab-pane label="" icon="md-glasses"><p style="padding-top: 40px; text-align: center;">眼睛饰品开发中...</p></tab-pane>
</tabs>
</div>
</div>
<div class="popup-item" v-show="isShop">
<div class="popup-head border-bottom-1px">
<span class="popup-title fl">商店</span>
<i class="ivu-icon ivu-icon-md-close-circle" @click="hidePopup"></i>
</div>
<div class="popup-content">
<p style="padding-top: 50px; text-align: center;">商店功能开发中...</p>
</div>
</div>
<div class="popup-item" v-show="isBag">
<div class="popup-head border-bottom-1px">
<span class="popup-title fl">背包</span>
<i class="ivu-icon ivu-icon-md-close-circle" @click="hidePopup"></i>
</div>
<div class="popup-content">
<tabs :animated="false">
<tab-pane label="粮食" icon="md-ice-cream">
<div class="food-box">
<ul class="food-list">
<li v-for="(food, index) in foods" @click="showFood(index)" :class="{ isMask: food.num == 0 || food.unlock == 0}">
<div class="food-item">
<div class="food-img">
<img :src="food.url">
</div>
<p class="food-name">{
{food.name}}</p>
<span class="food-num" v-if="food.num !== 0">{
{food.num}}</span>
<div class="mask-bg shortage-tips" @click.stop="showShop(food.name)" v-if="food.num == 0 && food.unlock == 1">
<i-button :size="buttonSize" type="success">购买</i-button>
</div>
<div class="mask-bg shortage-tips" v-if="food.unlock == 0" @click.stop="showUnlock(food.name)">
<i-button :size="buttonSize" type="warning">解锁</i-button>
</div>
</div>
</li>
</ul>
</div>
</tab-pane>
<tab-pane label="物品" icon="ios-archive">
<div class="food-box">
<ul class="food-list">
<li v-for="(good, index) in goods" v-if="good.num != 0" @click="showGood(good.name)">
<div class="food-item">
<div class="food-img egg-img">
<img :src="good.img">
</div>
<p class="food-name">{
{good.name}}</p>
<span class="food-num">{
{good.num}}</span>
</div>
</li>
</ul>
<div class="no-data" v-show="goods.length == 0">暂无物品</div>
</div>
</tab-pane>
</tabs>
</div>
</div>
<div class="popup-item" v-show="isStudy">
<div class="popup-head border-bottom-1px">
<span class="popup-title fl">学习</span>
<i class="ivu-icon ivu-icon-md-close-circle" @click="hidePopup"></i>
</div>
<div class="popup-content">
<tabs :animated="false">
<tab-pane v-for="(subject, index1) in subjectList" :label="subject.type" :icon="subject.icon" :key="subject.type">
<ul class="subject-list">
<li v-for="item in subject.list" :key="item.name" :class="{on:item.learning == 1, over:item.learning == 2}" @click="onSubject(item,index1)">
<div class="subject-img">
<div class="learning-label">
<span v-if="item.learning == 0">未学习</span>
<span v-if="item.learning == 1">学习中</span>
<span v-if="item.learning == 2">已学完</span>
</div>
<img :src="item.img">
</div>
<p class="subject-name">{
{item.name}}</p>
</li>
</ul>
</tab-pane>
</tabs>
<p style="padding-top: 50px; text-align: center; display: none;">学习功能开发中...</p>
</div>
</div>
</div>
</div>
<transition name="fade">
<div class="loading" v-if="isLoad">
<div class="pic">
<div class="egg-wrapper">
<div class="egg infinite">
</div>
</div>
<p>我是一只鸡</p>
</div>
</div>
</transition>
<!-- 用户信息 -->
<Modal v-model="modalUser"
class-name="hide-footer"
@on-ok="keepUser">
<div class="user-form" v-if="!editUserName">
<div class="head-portrait">
<span class="portrait-item portrait0"></span>
</div>
<div class="user-name">
{
{user.name}}<Icon type="ios-create" @click="editUser"/>
</div>
<div class="user-zl">
<Row>
<i-col span="12">
<div class="uz-i"><Icon type="ios-podium" class="c-green" /></div>
<div class="uz-i">等级：{
{chick.level}}</div>
</i-col>
<i-col span="12">
<div class="uz-i"><Icon type="ios-heart" class="c-red"/></div>
<div class="uz-i">粉丝：0</div>
</i-col>
</Row>
<Row>
<i-col span="12">
<div class="uz-i"><Icon type="md-pricetags" class="c-blue"/></div>
<div class="uz-i">积分：0</div>
</i-col>
<i-col span="12">
<div class="uz-i"><Icon type="ios-medal" class="c-orange"/></div>
<div class="uz-i">段位：0</div>
</i-col>
</Row>
</div>
<!-- <i-form :model="user" :label-width="80">
<form-item label="用户名称">
<i-input v-model="user.name" placeholder="设置用户名称..."></i-input>
</form-item>
</i-form>
<div><p>等级：{
{chick.level}}级，经验：{
{chick.exp}}，升级所需：{
{chick.upgradeExp}}</p></div> -->
</div>
<div class="user-form" v-if="editUserName">
<i-form :model="user">
<p class="pl-title">修改用户名需要1000金币</p>
<form-item>
<i-input v-model="newUserName" placeholder="设置用户名称..."></i-input>
</form-item>
<i-button type="primary" @click="saveUser">保存</i-button>
</i-form>
</div>
</Modal>
<!-- 升级弹窗 -->
<Modal :value="modalLevel" @on-ok="levelUser">
<p class="c-modal__label">升级了</p>
<p class="c-modal__title" style="font-size: 20px;">恭喜您升到 {
{chick.level}} 级了！</p>
</Modal>
<!-- 直接购买商品 -->
<Modal :value="modalShop"
@on-ok="shopSettle"
@on-cancel="hideShop">
<div class="shopping-box">
<p>{
{currFood.name}}</p>
<p>单价：${
{currFood.price}}/个</p>
<div class="num-form">
<div class="shop-btn" @click="shopReduce"><Icon type="md-remove-circle" /></div>
<div class="shop-input"><i-input type="text" v-model="shoppingNum" placeholder="数量"></i-input></div>
<div class="shop-btn" @click="shopAdd"><Icon type="md-add-circle" /></div>
</div>
<p>总价：${
{currFood.price * shoppingNum}}</p>
</div>
</Modal>
<!-- 查看食物详情 -->
<Modal :value="modalFood"
class-name="hide-footer"
@on-cancel="hideFood">
<div class="modal-box">
<div class="food-img">
<img :src="currFood.url">
</div>
<div class="food-t">
<p>物品名称：{
{currFood.name}}</p>
<p>拥有数量：{
{currFood.num}}</p>
<p>进食时长：{
{currFood.eatTime | SecondToDate}}</p>
<p>获得经验：{
{currFood.exp}}</p>
<div class="food-t-btn">
<i-button type="primary" @click="feedClick">喂食</i-button>
</div>
</div>
</div>
</Modal>
<!-- 查看出售物品详情 -->
<Modal :value="modalGood"
class-name="hide-footer"
@on-cancel="hideGood">
<div class="modal-box" v-if="!goodDetails">
<div class="food-img">
<img :src="currGood.img">
</div>
<div class="food-t">
<p>物品名称：{
{currGood.name}}</p>
<p>拥有数量：{
{currGood.num}}</p>
<p>出售价值：{
{currGood.price}}</p>
<div class="food-t-btn">
<i-button type="primary" @click="setSell">出售</i-button>
</div>
</div>
</div>
<div class="shopping-box" v-if="goodDetails">
<p>{
{currGood.name}}</p>
<div class="num-form">
<div class="shop-btn" @click="sellReduce"><span>-</span></div>
<div class="shop-input"><i-input type="text" v-model="sellNum" placeholder="数量"></i-input></div>
<div class="shop-btn" @click="sellAdd"><Icon type="md-add-circle" /></div>
</div>
<p>出售总价：${
{currGood.price * sellNum}}</p>
<i-button type="primary" @click="commitSell">出售</i-button>
</div>
</Modal>
<!-- 勋章列表 -->
<Modal v-model="modalAchievement" class-name="hide-footer" @on-cancel="hideAchievement">
<p style="margin-bottom: 10px;">成就数量：<span>{
{targetList}}</span>/{
{achievement.length}}</p>
<ul class="a-list">
<li v-for="(item, index) in achievement" :class="{ active: item.complete, onin: item.completeID == 1 }">
<div class="a-info">
<p>{
{item.title}}<span class="fr">{
{item.completeCurrCount}}/{
{item.completeNeedCount}}</span></p>
<div>{
{item.desc}}
<div class="reward" v-if="item.completeID == 0">
<div class="reward-icon"><Icon type="logo-usd" /></div>
<span class="reward-profit">{
{item.profit}}</span>
</div>
</div>
</div>
<div class="a-right" v-if="item.complete && item.completeID == 0" @click="receiveAwards(item.title)">
<i-button type="primary">领取奖励</i-button>
</div>
<div class="a-right" v-if="item.completeID == 1">
<i-button type="primary">已完成</i-button>
</div>
</li>
</ul>
</Modal>
<!-- 解锁商品确认 -->
<Modal :value="modalUnlock"
@on-ok="commitUnlock"
@on-cancel="hideUnlock">
<div class="shopping-box">
<p>确定解锁吗？</p>
<p>解锁需要：${
{currFood.unlockPrice}}</p>
</div>
</Modal>
<!-- 做题组件 -->
<c-subject @outsubject="hideSubject" :showsubject="isSubject"></c-subject>
</div>
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="lib/vuex/vuex.min.js"></script>
<script src="component.js"></script>
<script src="js/store/stateFoods.js"></script>
<script src="js/store/stateAchievement.js"></script>
<script src="js/store/subject.js"></script>
<script src="js/store/index.js"></script>
<script>
new Vue({
el: '#app',
data: {
troughTitle: '鸡碗',
effects: 2,
isLoad: true,
editUserName: false,
modalUser: false,
skinBox: false,
modalAchievement: false,
modalShop: false,
modalUnlock: false,
modalFood: false,
modalGood: false,
goodDetails: false,
isSubject: false,
sellNum: 1, // 物品出售默认值
skin: 'skin',
shop: 'shop',
bag: 'bag',
study: 'study',
isSkin: false,
isShop: false,
isBag: false,
isStudy: false,
buttonSize: 'small',
newUserName:'',
formUser: { // 用户信息填写表单
name: ''
},
clothes: [ // 衣服列表
{
id: 'default',
name: '默认上衣'
},
{
id: 'forg',
name: '青蛙上衣'
}
],
hats: [ // 帽子列表
{
id: 'default',
name: '默认帽子'
},
{
id: 'forg',
name: '青蛙帽子'
}
],
suits: [ // 套装列表
{
id: 'default',
name: '默认套装'
},
{
id: 'forg',
name: '青蛙套装'
}
],
shoppingNum: 0 // 购物数量
},
store, // 把 store 对象提供给 “store” 选项，这可以把 store 的实例注入所有的子组件
computed: {
// 计算已完成成就的数量
targetList() {
let target = this.$store.state.achievement.filter(obj => obj.complete);
console.log("target:"+target);
return target.length;
},
user() {
return this.$store.state.user;
},
chick() {
return this.$store.state.chick;
},
foods() {
return this.$store.state.foods;
},
goods() {
return this.$store.state.goods;
},
subjectList() {
return this.$store.state.subjectList
},
eat() {
return this.$store.state.eat;
},
setTime() {
return this.$store.state.setTime;
},
startDate() {
return this.$store.state.startDate;
},
endDate() {
return this.$store.state.endDate;
},
content() {
return this.$store.state.content;
},
currFood() {
return this.$store.state.currFood;
},
currGood() {
return this.$store.state.currGood;
},
achievement() {
return this.$store.state.achievement;
},
modalLevel() {
return this.$store.state.modalLevel;
},
value() {
return this.$store.state.value;
}
},
mounted () {
this.init() // 初始化
},
methods: {
// 初始化
init () {
this.$nextTick(function () {
var self = this;
//var time = new date();
// 页面加载读取缓存
self.$store.dispatch('loadgame');
// 判断是否是新的一天
//self.isNewDay(time);
// 判断是否在进食
self.chickIsEat();
});
this.hideLoading();
},
isNewDay: function(time) {
},
// 判断是否正在进食
chickIsEat: function() {
// 页面加载获取当前时间
let loadDate = new Date().getTime();
// 判断上一次是否进食结束
let isEat = this.$store.state.endDate - loadDate;
if (isEat > 0) {
this.$store.state.chick.eat = true;
this.countdown(loadDate);
} else {
this.$store.commit('CHICK_IS_EAT');
return;
}
},
hideFood: function() {
this.modalFood = !this.modalFood;
},
showFood: function(index) {
this.modalFood = !this.modalFood;
this.$store.state.currFood = this.$store.state.foods[index];
},
// 点击食物进行喂食
feedClick: function () {
// 判断是否在进食
if (this.$store.state.chick.eat) {
this.error("我还在吃着呢");
return
} else if (this.$store.state.currFood.num > 0) {
let startDate = new Date().getTime();
let endDate = startDate + this.$store.state.currFood.eatTime;
this.$store.commit('FEED_CLICK',endDate);
this.countdown(startDate);
} else {
this.error("你没有"+this.state.currFood.name+"食物了");
}
this.hideFood();
this.hidePopup();
this.success('喂食成功');
},
// 喂食倒计时方法
countdown (startdate) {
let self = this;
let es = self.$store.state.endDate - startdate;
let delay = 100/self.$store.state.currFood.eatTime*1000; // 计算每秒走的进度
console.log("计算每秒走的进度:"+delay+"%");
if (es > 0) {
let timer = setInterval (function() {
let nowTime = new Date().getTime();
let t = self.$store.state.endDate - nowTime;
let value = (self.$store.state.currFood.eatTime - t)/1000 * delay; // 计算进度条
console.log("计算进度条:"+value+"%");
if (value <= 100) {
self.$store.state.value = value
} else {
self.$store.state.value = 100;
}
console.log("t:"+t+"进度条："+value+"%");
if (t > 0) {
self.$store.state.chick.eat = true;
let day = Math.floor(t/86400000);
let hour=Math.floor((t/3600000)%24);
let min=Math.floor((t/60000)%60);
let sec=Math.floor((t/1000)%60);
hour = hour < 10 ? "0" + hour : hour;
min = min < 10 ? "0" + min : min;
sec = sec < 10 ? "0" + sec : sec;
let format = '';
if (day > 0) {
format = `${day}天${hour}小时${min}分${sec}秒`;
}
if (day <= 0 && hour > 0 ) {
format = `${hour}小时${min}分${sec}秒`;
}
if (day <= 0 && hour <= 0) {
format =`${min}分${sec}秒`;
}
self.$store.state.content = format; // 显示倒计时
self.$store.dispatch('savegame');
} else {
clearInterval(timer); // 清除定时器
// 喂食结束
self.$store.dispatch('endeat');
// 弹出鸡蛋加成
self.$refs.paper.popAdd(self.$store.state.chick.egg.addEggExps+'%');
}
},1000)
}
},
showShop: function (name) {
this.$store.commit('shopFood',name);
this.modalShop = true;
},
hideShop: function() {
this.modalShop = false;
},
shopReduce: function() {
this.shoppingNum--;
},
shopAdd: function() {
this.shoppingNum++;
},
showGood: function(name) {
this.$store.dispatch('shopGood',name);
this.modalGood = true;
},
hideGood: function() {
this.modalGood = false;
},
setSell: function() {
this.goodDetails = !this.goodDetails;
},
sellAdd: function() {
if (this.sellNum == this.$store.state.currGood.num) {
this.error('不能再加了');
return;
} else {
this.sellNum++;
}
},
sellReduce: function() {
if (this.sellNum == 1) {
this.error('不能再减了');
return;
} else {
this.sellNum--;
}
},
commitSell: function() {
this.goodDetails = !this.goodDetails;
//var price = this.$store.state.currGood.price*this.selNum;
this.success('出售了'+this.$store.state.currGood.num+'个'+this.$store.state.currGood.name);
this.$store.dispatch('sellgood',this.sellNum);
this.modalGood = false;
},
showUnlock: function(name) {
this.$store.commit('shopFood',name);
this.modalUnlock = true;
},
hideUnlock: function() {
this.modalUnlock = false;
},
commitUnlock: function() {
var food = this.$store.state.currFood.name;
var unlockPrice = this.$store.state.currFood.unlockPrice;
console.log("解锁需要金币："+unlockPrice);
if (this.$store.state.user.money < unlockPrice) {
this.error('不够金币解锁');
this.modalUnlock = false;
return false;
} else {
this.$store.dispatch('unlockfood',unlockPrice);
this.success('成功解锁了'+food);
}
this.hideUnlock();
},
showAchievement: function() {
this.modalAchievement = true;
},
hideAchievement: function() {
this.modalAchievement = false;
},
// 领取成就奖励
receiveAwards: function(val) {
this.$store.dispatch('receiveawards',val);
},
// 点击学习课程
onSubject: function (val, pid) {
console.log("pid:"+pid);
this.$store.state.currSubject = val;
if (val.learning == 0) {
console.log(val.name+"-未开始学习");
this.$store.dispatch('startsubject',pid);
} else if (val.learning == 2) {
console.log(val.name+"-已学习完成");
} else {
console.log(val.name+"-正在学习");
this.isSubject = true;
}
console.log(this.$store.state.currSubject);
},
// 关闭题目界面
hideSubject: function(val) {
this.isSubject = val;
},
// 打开功能菜单弹窗
showPopup: function (val) {
this.skinBox = true;
if (val == 'skin') {
this.isSkin = true;
} else if (val == 'shop') {
this.isShop = true;
} else if (val == 'study') {
this.isStudy = true;
} else {
this.isBag = true;
}
},
// 关闭功能菜单弹窗
hidePopup: function () {
this.skinBox = false;
var that = this;
setTimeout(function(){
that.isSkin = false;
that.isShop = false;
that.isBag = false;
that.isStudy = false;
}, 400);
},
// 打开用户信息面板
showUser: function () {
this.modalUser = true;
},
editUser: function() {
this.editUserName = !this.editUserName;
},
saveUser: function() {
if (this.newUserName == '') {
console.log('请输入用户名称');
this.error('请输入用户名称');
return false;
} else {
this.success('修改成功');
this.editUserName = !this.editUserName;
this.$store.dispatch('setusername', this.newUserName);
//this.$store.dispatch('savegame');
}
},
// 设置服装
replaceDress: function(type,pid) {
this.$store.dispatch("replacedress",{"type":type,"pid":pid});
},
keepUser: function() {
this.$store.dispatch('keepuser');
},
// 升级弹窗确认按钮，确认后再检测是否可以继续升级
levelUser: function() {
var self = this;
self.$store.state.modalLevel = false;
setTimeout (function() {
self.$store.dispatch('settlelevel', self.$store.state.chick.exp);
},500);
},
shopSettle: function() {
var num = this.shoppingNum;
var name = this.$store.state.currFood.name;
if (num == 0) {
this.error('请输入购买数量');
this.modalShop = false;
return false;
} else if ( this.$store.state.user.money < this.$store.state.currFood.price * num) {
this.error('不够金币购买');
this.modalShop = false;
return false;
} else {
this.success('成功购买了'+num+"个"+name);
this.hidePopup();
}
this.$store.dispatch('shopsettle',num);
this.hideShop();
this.shoppingNum = 0;
},
// 公共成功提示
success: function(val) {
this.$Message.success(val);
},
// 公共失败提示
error: function(val) {
this.$Message.error(val);
},
hideLoading: function() {
var that = this;
//定义2秒后隐藏loading
setInterval(function(){
that.isLoad = false;
},2000)
}
},
// 过滤器
filters: {
// 格式化显示时间 毫秒转：天-小时-分钟-秒
SecondToDate (value) {
var time = value;
if (null != time && "" != time) {
if (time > 60 * 1000 && time < 60 * 60 * 1000) {
time = parseInt(time / 1000 / 60.0) + "分钟" + parseInt((parseFloat(time / 1000 / 60.0) -
parseInt(time / 1000 / 60.0)) * 60) + "秒";
} else if (time >= 60 * 60 * 1000 && time < 60 * 60 * 24 * 1000) {
time = parseInt(time / 1000 / 3600.0) + "小时" + parseInt((parseFloat(time / 1000 / 3600.0) -
parseInt(time / 1000 / 3600.0)) * 60) + "分钟" +
parseInt((parseFloat((parseFloat(time / 1000 / 3600.0) - parseInt(time / 1000 / 3600.0)) * 60) -
parseInt((parseFloat(time / 1000 / 3600.0) - parseInt(time / 1000 / 3600.0)) * 60)) * 60) + "秒";
} else if (time >= 60 * 60 * 24 * 1000) {
time = parseInt(time / 1000 / 3600.0/24) + "天" +parseInt((parseFloat(time / 1000 / 3600.0/24)-
parseInt(time / 1000 / 3600.0/24))*24) + "小时" + parseInt((parseFloat(time / 1000 / 3600.0) -
parseInt(time / 1000 / 3600.0)) * 60) + "分钟" +
parseInt((parseFloat((parseFloat(time / 1000 / 3600.0) - parseInt(time / 1000/ 3600.0)) * 60) -
parseInt((parseFloat(time / 1000 / 3600.0) - parseInt(time / 1000 / 3600.0)) * 60)) * 60) + "秒";
} else {
time = Math.round((time % (1000 * 60)) / 1000) + "秒";
}
}
return time;
}
}
});
</script>
</body>
</html>完整代码下载
仿支付宝小鸡农场vue版本.zip-游戏开发文档类资源-CSDN下载仿支付宝小鸡农场vue版本，纯前端项目更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_40986713/71898671?spm=1003.2166.3001.6637.1打开方式 ，本地浏览器直接打开，web服务器静态访问