游戲截圖
專案代碼結構目錄
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服務器靜態訪問
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/404160.html
標籤：其他