前言
最近抽時間把前兩個界面重新做了下,看起來不那麼像demo了,之後會把遊戲內容豐富一下。
今天要做的效果是這樣的,出牌:
老電影:
線上地址:http://cardgame.xiejingyang.com
github:https://github.com/xieisabug/card-game
同樣建議大家看着視頻,同步看文章,會比較直觀:地址
開始
先實現的是出牌,聽起來可能比傷害簡單,可實際上它比傷害更復雜。所以,這裏的出牌,單單隻實現打出夥伴,更復雜的邏輯比如效果卡和需要目標選擇的卡牌留到之後的文章。
出牌的思路如下:檢查費用,費用夠的情況才能打出牌,檢查場上還能否放置更多的夥伴,滿了也不能打出牌,手牌中刪除要出的牌,扣除對應費用,場上添加對應的夥伴,出牌的邏輯才完成。
先完成客戶端操作,拖拽卡牌並且放在自己的桌面上代表出牌,處理卡牌拖拽,爲卡牌dom加上ref:ref="cardDom"
,接着在mounted中加入獲取dom引用代碼:
mounted() {
this.cardDom = this.$refs['cardDom'];
},
然後傳入是否可拖拽的選項canDrag: Boolean
同時加入是否在桌面選項isOut: Boolean
,在Card.vue
的mouseDown
事件中,加入拖拽的處理:
mouseDown(e) {
if (this.canDrag) {
this.isDrag = true;
window.isCardDrag = true;
this.cardDom.style['transition'] = 'all 0s';
this.startX = e.pageX;
this.startY = e.pageY;
window.cardMoveX = this.startX;
window.cardMoveY = this.startY;
this.outCardLoop();
} else if (this.isOut) {
this.$emit('onAttackStart', {
startX: e.pageX, startY: e.pageY, index: this.index
});
}
},
outCardLoop() {
if (this.isDrag) {
requestAnimationFrame(this.outCardLoop);
this.cardDom.style['transform'] = 'translate(' + (window.cardMoveX - this.startX) + 'px, ' + (window.cardMoveY - this.startY) + 'px) scale(1.1)';
} else {
this.cardDom.style['transform'] = '';
}
},
在GameTable.vue
中registerOutCardEvent
方法之前定義了鼠標移動和鼠標擡起事件,在移動事件中需要更新window.cardMoveX
和window.cardMoveY
:
// 出牌時抓起牌移動
window.onmousemove = (e) => {
if (window.isCardDrag) {
window.cardMoveX = e.pageX;
window.cardMoveY = e.pageY;
}
// other code ...
}
再爲卡牌加上canDrag和isOut就可以看看效果了:
這樣就用transform動畫實現了卡牌拖拽,接下來處理放置,當我們開始拖拽卡牌的時候,實際上GameTable
還是不知道點擊的是哪張卡牌的,所以必須在開始拖拽的時候告訴GameTable
,恰好在之前攻擊的時候也出現了這樣的需求,所以重構一下,將方法改爲GameTable
傳遞進來,命名爲chooseCard: Function
:
mouseDown(e) {
if (this.canDrag) {
this.isDrag = true;
window.isCardDrag = true;
this.cardDom.style['transition'] = 'all 0s';
this.startX = e.pageX;
this.startY = e.pageY;
window.cardMoveX = this.startX;
window.cardMoveY = this.startY;
this.outCardLoop();
} else if (this.data.isActionable && this.isOut) {
this.$emit('onAttackStart', {
startX: e.pageX, startY: e.pageY
});
}
if (this.chooseCard) {
this.chooseCard(this.index, e);
}
},
修改GameTable中桌面部分的代碼,爲Card傳入chooseCard,桌面牌傳入chooseTableCard,手牌傳入chooseHandCard:
/**
* 選擇卡片
* @param index 我手上的卡片
*/
chooseHandCard(index) {
this.currentCardIndex = index;
},
/**
* 選擇桌面上我的卡
* @param index 我的桌面卡片index
* @param event 點擊事件
*/
chooseTableCard(index, event) {
this.currentTableCardK = this.gameData.myTableCard[index].k
event.preventDefault();
event.stopPropagation();
},
同樣在GameTable.vue
中registerOutCardEvent
中定義的mouseup事件,增加判斷卡牌落點的邏輯:
window.onmouseup = (e) => {
if (window.isCardDrag && this.currentCardIndex !== -1) {
window.isCardDrag = false;
let top = this.myCardAreaDom.offsetTop,
width = this.myCardAreaDom.offsetWidth,
left = this.myCardAreaDom.offsetLeft,
height = this.myCardAreaDom.offsetHeight;
let x = e.pageX,
y = e.pageY;
if (x > left && x < (left + width) && y > top && y < (top + height)) {
this.socket.emit("COMMAND", {
type: "OUT_CARD",
r: this.roomNumber,
index: this.currentCardIndex
});
}
} else {
// other code ...
}
}
接下來後端先判斷哪個玩家出的牌:
function outCard(args, socket) {
let roomNumber = args.r, index = args.index, card;
let belong = memoryData[roomNumber]["one"].socket.id === socket.id ? "one" : "two"; // 判斷當前是哪個玩家出牌
let other = memoryData[roomNumber]["one"].socket.id !== socket.id ? "one" : "two";
// 後面代碼接此處...
}
費用不夠直接提示,桌面位置滿了,也直接提示:
if (index !== -1 && memoryData[roomNumber][belong]["cards"][index].cost <= memoryData[roomNumber][belong]["fee"]) {
card = memoryData[roomNumber][belong]["cards"].splice(index, 1)[0];
if (card.cardType === CardType.CHARACTER && memoryData[roomNumber][belong]["tableCards"].length >= 10) {
// error 您的基礎卡牌只能有${memoryData[roomNumber][belong]['maxTableCardNumber']}張
return;
}
} else {
// error 您的費用不足
}
如果都沒有問題,則繼續出牌的正常邏輯:
memoryData[roomNumber][belong]["fee"] -= card.cost;
memoryData[roomNumber][belong]["tableCards"].push(card);
memoryData[roomNumber][belong].socket.emit("OUT_CARD", {
index,
card,
isMine: true
});
memoryData[roomNumber][other].socket.emit("OUT_CARD", {
index,
card,
isMine: false
})
這個時候剛好處理一下戰吼,也就是出牌的時候執行的事件,命名爲onStart,在戰吼之後同樣要檢查卡牌死亡的情況:
let mySpecialMethod = getSpecialMethod(belong, roomNumber);
if (card && card.onStart) {
card.onStart({
myGameData: memoryData[roomNumber][belong],
otherGameData: memoryData[roomNumber][other],
thisCard: card,
specialMethod: mySpecialMethod
});
}
checkCardDieEvent(roomNumber);
客戶端接收到OUT_CARD
事件,進行出牌操作,爲socket註冊事件:
this.socket.on("OUT_CARD", (param) => {
const {index, card, isMine} = param;
if (isMine) {
if (index !== -1) {
this.gameData.myCard.splice(index, 1);
}
this.gameData.myTableCard.push(card)
} else {
this.gameData.otherTableCard.push(card)
}
})
這個時候能出牌了:
可是還少了一點靈魂,夥伴出現在桌面的時候,應該是要有一點點動畫的,好在使用vue很容易實現,vue中有個transition-group
,爲子節點提供進入、退出的動畫。
將之前桌面的dom修改一下,改爲transition-group
:
<transition-group
class="other-card-area"
tag="div"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<Card
:key="c.k"
:index="index"
:data="c"
v-for="(c, index) in gameData.otherTableCard"
/>
</transition-group>
<transition-group
class="my-card-area"
tag="div"
:css="false"
@before-enter="beforeEnter"
@enter="enter"
@after-enter="afterEnter"
>
<Card
:key="c.k"
:index="index"
:data="c"
@onAttackStart="onAttackStart"
v-for="(c, index) in gameData.myTableCard"
/>
</transition-group>
實現對應的鉤子方法enter、beforeEnter、afterEnter:
beforeEnter(el) {
el.style['transition'] = "all 0s";
el.style.opacity = 0
},
enter(el, done) {
Velocity(el, {scale: 1.3}, {duration: 10})
.then(el => {
return Velocity(el, {opacity: 1}, {duration: 300})
})
.then(el => {
return Velocity(el, {scale: 1}, {duration: 200, complete() {done()}})
})
},
afterEnter(el) {
el.style['transition'] = "all 0.2s";
el.style.opacity = 1;
el.style.transform = '';
},
這樣一看就有內味了。
這次額外介紹的是登陸界面的效果:
這是仿照老電影的效果實現的,起初是在codepen上看到的,覺得很新穎,就自己實現了一個。
思路是使用canvas隨機生成很多噪點,用動畫生成隨機跳動的線和文字。
先創建Login頁面Login.vue
,寫好基本的dom和樣式:
<div class="container">
<div class="screen">
<div class="title-content">
<h1 class="main-title">
你的文字
</h1>
<h1 class="main-title main-title2">
你的文字
</h1>
</div>
<canvas id="noise" class="noise"></canvas>
<div class="vignette"></div>
<div class="line"></div>
</div>
<div class="login-container">
<!-- 表單 -->
</div>
</div>
.container {
height: 100%;
display: flex;
}
.login-container {
flex: 1;
max-width: 500px;
border: 0;
padding: 80px 100px;
display: flex;
flex-direction: column;
box-shadow:-13px 14px 131px #D8CBBB;
align-items: center;
justify-content: center;
}
.screen {
display: flex;
flex: 1;
color: white;
background: linear-gradient(to right, rgba(36,31,31,1) 0%, rgba(36,31,31,1) 32%, rgba(74,71,70,1) 100%);
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 35px;
position: relative;
}
.title-content{
position:relative;
width: 370px;
height: 500px;
}
.main-title {
width: 370px;
height: 500px;
padding: .3em 1em .25em;
font-weight: 400;
font-size: 40px;
color: white;
position:relative;
line-height:1.3;
position:absolute;
top:0;
left:0;
}
.noise {
position: absolute;
z-index: 100;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
opacity: .15;
}
.vignette{
position:absolute;
width:100%; height:100%;
box-shadow:inset 0px 0px 150px 20px black;
mix-blend-mode: multiply;
-webkit-animation: vignette-anim 3s infinite; /* Safari 4+ */
-moz-animation: vignette-anim 3s infinite; /* Fx 5+ */
-o-animation: vignette-anim 3s infinite; /* Opera 12+ */
animation: vignette-anim 3s infinite; /* IE 10+, Fx 29+ */
}
.dot{
width:3px;
height:2px;
background-color:white;
position:absolute;
opacity:0.3;
}
.line {
position:absolute;
height:100%; width:1px;
opacity:0.1;
background-color:#000;
}
@-webkit-keyframes vignette-anim {
0% , 100%{ opacity: 1; }
50% { opacity: 0.7; }
}
@-moz-keyframes vignette-anim {
0% , 100%{ opacity: 1; }
50% { opacity: 0.7; }
}
@-o-keyframes vignette-anim {
0% , 100%{ opacity: 1; }
50% { opacity: 0.7; }
}
@keyframes vignette-anim {
0% , 100%{ opacity: 1; }
50% { opacity: 0.7; }
}
先完成噪點的生成,在mounted方法中獲取到canvas的context:
const canvas = document.getElementById('noise');
const ctx = canvas.getContext('2d');
將canvas設置成和放置它的容器一樣大:
let container = document.querySelector(".screen");
const wWidth = container.clientWidth;
const wHeight = container.clientHeight;
canvas.width = wWidth;
canvas.height = wHeight;
隨機創建10幅噪點圖像:
for (let i = 0; i < 10; i++) {
let idata = ctx.createImageData(wWidth, wHeight);
let buffer32 = new Uint32Array(idata.data.buffer);
let len = buffer32.length;
for (let i = 0; i < len; i++) {
if (Math.random() < 0.5) {
buffer32[i] = 0xff000000;
}
}
noiseData.push(idata);
}
再在頁面上循環繪製:
const paintNoise = () => {
if (frame === 9) {
frame = 0;
} else {
frame++;
}
ctx.putImageData(noiseData[frame], 0, 0);
};
const loop = () => {
paintNoise(frame);
window.requestAnimationFrame(loop);
};
loop();
這樣就能夠看到滿屏的噪點了。
後面的效果要經常用到範圍隨機,所以先寫一個工具方法,生成範圍內的隨機數:
function R(max,min){return Math.random()*(max-min)+min};
接下來實現詭異的文字效果,其實很簡單,看到dom應該有部分人已經猜到了,寫兩個一模一樣的文字,讓其中一個不停的輕微抖動,就能實現這種詭異的效果了:
let title = document.querySelector('.main-title2');
function animateTitle() {
let animateChaning;
for(var i=50; i--;){
if (!animateChaning) {
animateChaning = Velocity(title, { opacity:R(0,1), top:R(-3,3), left:R(-3,3) }, { duration: R(30, 170) })
} else {
animateChaning = animateChaning.then(el => {
return Velocity(title, { opacity:R(0,1), top:R(-3,3), left:R(-3,3) }, { duration: R(30, 170) })
})
}
};
animateChaning.then(() => {
animateTitle();
})
}
animateTitle();
再爲效果加上做舊,做舊的方式就是加入一根亂跳的豎線,像是屏幕壞道了一樣:
let line = document.querySelector('.line');
function animateLine() {
Velocity(line, {
opacity : [R(0.1,1), R(0.1,1)],
left : [R(-window.innerWidth/2,window.innerWidth/2), R(-window.innerWidth/2,window.innerWidth/2)]
}, {
duration: R(200, 500)
}).then(() => {
animateLine();
})
}
animateLine();
總結
寫到這,我也不知道下篇文章要做什麼了,基本的思路似乎已經講的差不多了,覺得我的文章給你帶來了幫助的希望點個贊留個言支持一下。
或者有特別希望看到的內容可以留言私信我。