電影《動物世界》對戰系統（Javascript）

最近刷了一部電影《動物世界》，感概原來簡單的「剪刀石頭布」遊戲還可以這麼燒腦，強大的資料分析能力、對人性心理的靈敏嗅覺等。看完之後饒有興致，於是便利用socket技術，實現了乙個「動物世界」多人對戰系統。

故事講述的是男主被發小欺騙，欠下了一屁股債，為了償還債務被迫上了一艘賊船，同時上船的還有一批人，大夥兒的狀況都差不多。上船的好處是有機會還清債務並且還可能獲得一筆巨大的財富，這對於在現實世界中已經生活不能自理的人來說，無疑是一次改變人生的機會，而一旦失敗的話，就要被拉去做人體實驗（恐怖如斯）。

上船的人會進行一場賭博，就是我們小時候常玩的「石頭剪刀布」，每人初始時擁有12張卡牌，石頭、剪刀、布各4張，並且擁有3顆星，大家可以找任何乙個人作為對手，每人各出一張卡牌，獲勝者將從失敗方拿走一顆星。遊戲獲勝條件是手裡卡牌全部消耗完並且擁有的星星不少於3顆，反之，若卡牌消耗完且星星少於3顆、或還有卡牌但星星為0，都視為失敗。

我們將利用koa來搭建乙個socket伺服器，來管理客戶端的訊息接受和分發。

主要邏輯：

const io = socketio(server) // 建立socket連線
const users = {} // 快取當前鏈結的使用者
const challengedata = {} // 快取使用者發起的對戰資訊
io.on('connection', socket => 
// 通知所有人，當前所有使用者的資訊
io.emit('update_users', users)
})// 使用者發起挑戰
socket.on('challenge', data => )
// 發起者取消了挑戰
socket.on('cancel_challenge', () => )
// 對方接受挑戰的資訊
socket.on('respond_challenge', data =>  else if (result === -1) 
// 告訴挑戰者和被挑戰者，比賽的結果
io.to(cd.fromid).emit('result_challenge', result, users)
io.to(cd.toid).emit('result_challenge', -result, users)
} else 
delete challengedata[data.fromid]
})// 比賽勝利
socket.on('success_challenge', () => )
// 斷開連線
socket.on('disconnect', () => )
})

前端使用vue來進行頁面渲染。

import request from '@/common/request'
import tips from '@axe/tips'
import modal from '@axe/modal'
import loading from './components/loading.vue'
/* eslint-disable no-alert */
export default ,
data () ,
acceptchallenge: false
};},
computed: 
return 
},totalinfo () 
for (let id in this.users) 
return info}},
methods: ,
handleselectuser (id) )
return
}this.selecteduserid = id
},handlechallenge () )
return
}if (!this.selectedcard) )
return
}if (this.users[this.id][this.selectedcard] <= 0) )
return
}let user = this.users[this.selecteduserid]
if (!user) )
return
}if (user.star <= 0 || (user.stone + user.scissors + user.*****) <= 0) )
return
}if (!this.acceptchallenge) )
modal.show(, t => 
})} else )
// 重置記錄
this.acceptchallenge = false}}
},mounted () ).then(data => 
// 告訴伺服器，有人進來了
this.socket.emit('open', name)
// 已連線
this.id = this.socket.id
this.isconnected = true
})this.socket.on('update_users', users => )
// 是否接受挑戰
this.socket.on('accept_challenge', fromuser => , t =>  else )}})
})this.socket.on('cancel_challenge', () => )
})// 監聽對戰結果
this.socket.on('result_challenge', (result, users) => , () => , t => 
})} else if (user.star <= 0 || cardcount <= 0) , t => })}
})})
// 接收系統廣播，有人挑戰成功的資訊
this.socket.on('success_challenge', user => 】挑戰成功，戰績（$）顆星`)
})})
}}

遊戲預覽

電影《動物世界》對戰系統（Javascript）

7 1 動物世界 15分

5 7 2 動物世界 15分

西加加 7 1 動物世界

電影《動物世界》對戰系統（Javascript）

7 1 動物世界 15分

5 7 2 動物世界 15分

西加加 7 1 動物世界

相關推薦