[TOC]
开始毫无头绪，找了几个专门做游戏的框架，layabox 装了打开报错、cocos studio 感觉太复杂，phaser感觉引用资源好复杂。
最后我感觉我这个小游戏没啥精灵动画，应该普通h5+js能实现。就拿了目前最熟悉可以双向绑定的vue来弄。
开发的时候感觉没效率，不知道游戏场景里放什么，后来干脆用墨刀设计了一个[原型](https://modao.cc/app/kyykUyNnY6dZUCWvfUAykOIfwhpkR2y)。
# UI设计
主要设计了欢迎页、游戏页、结束页 三个场景。
# Vue的使用
## Vue 的生命周期
jquery 以前有个ready 事件（所有元素加载完）。vue上是什么一直没搞懂。
后来经过我的研究，是*mounted*。
还有加载前的事件 *beforeCreate*。
## Vue的路由研究
开始想场景相当于spa应用的单页面。但是一看到那个vue-router 安装要npm 就烦。感觉别人的实现也就div的显隐。
后来想html5 不是有个 history api。用于监听url变化的。
经过实验，history api 监听地址改变，动态将当前页设为锚点对应的方法是可以的。
~~~
beforeCreate:function(){
var isHistoryApi = !!(window.history && history.pushState);
if(!isHistoryApi){
alert('该浏览器不支持History,请换一个现代化浏览器');
}
},
mounted :function(){
const that = this;
window.onpopstate = function(event){
// console.log(location);
// console.log(event);
var next_page = location.hash.substr(1);
that.page = next_page;
that.message = next_page;
}
try {
if ("WebSocket" in window) {
ws = new WebSocket("ws://"+that.host);
} else if ("MozWebSocket" in window) {
ws = new MozWebSocket("ws://"+that.host);
}
SocketCreated = true;
isUserloggedout = false;
ws.onopen = that.wsopen;
ws.onmessage = that.wsmsg;
ws.onclose = that.wsclose;
ws.onerror = that.wserror;
if(this.page == 'welcome'){
}
} catch (ex) {
console.log(ex);
alert('该浏览器不支持Websocket，请换一个现代化浏览器');
return;
}
}
~~~
试图里直接v-if
`<section v-if="page == 'gaming'" id="gaming">`
开始用的template 标签，结果vue 里自定义标签会报warning。后来就改成section了。
## Vue的websocket使用
websocket 我用过，问题它怎么于vue 结合起来。后来找了一圈vue 好像有套件。可是安装又比较麻烦。我就想想办法把。
最终研究出来的方式是，定义一个ws变量，mounted 时候链接一下。
var ws;
~~~
mounted :function(){
const that = this;
window.onpopstate = function(event){
// console.log(location);
// console.log(event);
var next_page = location.hash.substr(1);
that.page = next_page;
that.message = next_page;
}
try {
if ("WebSocket" in window) {
ws = new WebSocket("ws://"+that.host);
} else if ("MozWebSocket" in window) {
ws = new MozWebSocket("ws://"+that.host);
}
SocketCreated = true;
isUserloggedout = false;
ws.onopen = that.wsopen;
ws.onmessage = that.wsmsg;
ws.onclose = that.wsclose;
ws.onerror = that.wserror;
if(this.page == 'welcome'){
}
} catch (ex) {
console.log(ex);
alert('该浏览器不支持Websocket，请换一个现代化浏览器');
return;
}
}
~~~
然后这些ws用的方法通通以ws开头，比如wsopen。
# 整体前端架构
~~~
wslogin:function(name){
this.wssend({op:'reg_user', nickname:name});
},
wsbegin:function(room_id, uid){
this.wssend({
op:"begin", room_id: room_id, uid:uid
});
},
wsopen: function(){
if(this.page == 'gaming' && this.name != ''){
this.wslogin(this.name);
}
},
wssend: function(msg){
if(ws){
if(typeof msg !== 'string'){
msg = JSON.stringify(msg);
}
ws.send(msg);
}else{
this.wserror();
}
},
wsmsg : function(event){
try {
console.log(event);
var obj = JSON.parse(event.data);
console.log(obj);
if(obj.code == 0){
alert(obj.msg);
}
console.log(obj.msg);
console.log(obj.data);
switch(obj.msg){
case 'after_reg_user':
this.uid = obj.data.uid;
this.fd = obj.data.fd;
localStorage.setItem('uid', this.uid);
localStorage.setItem('nickname', obj.data.nickname);
if(!this.room_id){
if(localStorage.getItem('room_id') == undefined){
this.wssend({
op: 'create_room',
name: 'room'+ new Date().getTime() + Math.random(),
hours: 1,
uid: this.uid,
number: 2
});
}else{
this.room_id = localStorage.getItem('room_id');
}
}
if(this.fd && this.uid && this.room_id && this.get_new('compete_uid')){
this.start();
}
break;
case 'after_create_room':
this.room_id = obj.data.room_id;
localStorage.setItem('room_id', this.room_id);
if(!this.get_new('compete_uid') && this.uid && this.room_id){
this.wsbegin(this.room_id, this.uid);
}
break;
case 'after_begin':
this.compete_uid = obj.data.compete_uid;
localStorage.setItem('compete_uid', this.compete_uid);
this.user.name = obj.data.user_name;
this.compete_user.name = obj.data.compete_name;
this.start();
break;
case 'room_user_list':
if(this.room_id == obj.data.room_id){
for (var i = 0; i < obj.data.list.length; i++) {
var user = obj.data.list[i];
if(user.uid == this.uid){
this.user.stars = user.stars;
}
if(user.uid == this.compete_uid){
this.compete_user.stars = user.stars;
}
obj.data.list[i];
}
this.count_down_cards = obj.data.count_down_cards;
}
break;
case 'after_enter_room':
for (var i = 0; i < obj.data.list.length; i++) {
var user = obj.data.list[i];
if(user.uid == this.uid){
this.user.stars = user.stars;
}
if(user.uid == this.compete_uid){
this.compete_user.stars = user.stars;
}
obj.data.list[i];
}
this.user.name = obj.data.user_name;
this.user.石头 = obj.data.石头;
this.user.剪刀 = obj.data.剪刀;
this.user.布 = obj.data.布;
this.compete_user.name = obj.data.compete_name;
this.count_down_cards = obj.data.count_down_cards;
break;
case 'after_do_guess':
this.user.石头 = obj.data.left_cards.石头;
this.user.剪刀 = obj.data.left_cards.剪刀;
this.user.布 = obj.data.left_cards.布;
switch(obj.data.compete_type){
case '石头':
this.compete_type = 'shitou';
break;
case '剪刀':
this.compete_type = 'jiandao';
this.user.剪刀 = obj.data.left_cards.剪刀;
break;
case '布':
this.compete_type = 'bu';
this.user.布 = obj.data.left_cards.布;
break;
}
// this.result = obj.data.result;
var that = this;
setTimeout(function(){
var dialog = new Dialog({
onRemove:function(){
that.result = '';
that.compete_type = 'back';
that.user.checked = '';
}
}).alert('U ' +obj.data.result, {
type:'remind',
})
}, 200)
break;
case 'win':case 'draw':case'lose':
this.end_status = obj.msg;
this.room_id = 0;
this.compete_uid = 0;
this.egg_name = obj.data.egg_name;
localStorage.removeItem('room_id');
localStorage.removeItem('compete_uid');
location.href = '#end';
break;
case 'notify':
this.notify = obj.data.info;
break;
default:
;
}
} catch (error) {
console.log(error);
alert('错误的服务器消息');
} finally {
}
},
wsclose: function(){
this.fd = 0;
ws.close();
},
wserror: function(){
alert('网络链接失败');
if(this.page == 'gaming' || this.page == 'end'){
location.href = '/#welcome';
location.reload(true);
}
}
~~~
wsmsg处里消息。
wssend来发送消息。
定义了发消息的格式 json，带op，和后端对应，然后wsmsg里，所有消息对应的响应方法都有`after_ `前缀。
然后根据这些事件的响应，更新ui 比如卡牌倒计时、每个人的星星等。
# 初始化数据
~~~
data: {
notify: '欢迎进入比赛',
page: 'welcome',
end_status: 'Win',
egg_name: '',
host: '127.0.0.1:9502',
uid: 0,
fd: 0,
room_id: 0,
compete_uid: 0,
guess_type: '',
compete_type: 'back',
user: {
name: '',
stars: 3,
checked: '',
'石头': 4,
'剪刀': 4,
'布': 4,
},
compete_user: {
name: '',
stars:3,
},
count_down_cards: {'石头':8,'剪刀':8,'布':8},
},
~~~
一些预设配置，一些动态比如用户和对手信息，最新消息等。
# 缓存
在做的过程中，发现用户有刷新当前页面的习惯。所以只要之前的游戏没结束，就要回到刷新前的状态。后来就用localStorage，来持久化信息。当然也加了一些消息用于主动获取信息，如enter_room。
# 刷新后保持状态和最新数据
一开始，卡牌倒计时是每次出过牌后才返回来。但是如果恢复场景，就不知道，所以加了个enter_room消息。
# UI 变为场景
开始我打算样式一个个手写。后来发现墨刀的预览效果上，都是html+css实现的。
于是就复制，去掉无用id class属性。把所有定位调整相对定位。然后通过调整top、left的方式总算把静态部分实现了。
暂时不做自适应所有屏幕尺寸把。
# 当前剩余卡牌为0 的出牌无效
当时出牌没判断自己剩余的该卡牌是否还有剩余数量。
然后after_do_guess里加了*left_cards*
~~~
$left_cards = [
'石头' => RoomUserCards::left_card('石头', $data['room_id'], $data['uid']),
'剪刀' => RoomUserCards::left_card('剪刀', $data['room_id'], $data['uid']),
'布' => RoomUserCards::left_card('布', $data['room_id'], $data['uid'])
];
$this->success('after_do_guess', ['result' => $result,'compete_type'=>$compaire_card['type'], 'left_cards'=>$left_cards]);
~~~
这样每次出牌后我都更新user对象里的各种牌型的剩余数量。发现浏览器里中文js对象索引页支持。
然后对应视图里做判断：
~~~
<div class="widget image_view user_card" id="user_shitou" v-bind:class="{checked :user.checked == '石头', disabled: user.石头 == 0}" @click="choose('石头')"></div>
<div class="widget image_view user_card" id="user_jiandao" v-bind:class="{checked :user.checked == '剪刀', disabled: user.剪刀 == 0}" @click="choose('剪刀')"></div>
<div class="widget image_view user_card" id="user_bu" v-bind:class="{checked :user.checked == '布', disabled: user.布 == 0}" @click="choose('布')"></div>
~~~
# 一次判定后的处理
每次出牌后有结果后，就会将checked 重置。不让其高亮选择状态。
开始界面想搞一个自动进入游戏，如果缓存的参数都在的情况下。
后来发现用vue的 watch 就可以了。
~~~
watch: {
page: function (val) {
if(val == 'gaming'){
if(this.uid && this.compete_uid){
this.wssend({
op: 'enter_room',
room_id: this.room_id,
uid: this.uid,
compete_uid: this.compete_uid,
});
}
}else if(val == 'welcome'){
this.start();
}
},
},
~~~
当页面发生切换时。
# 其他方法
start、get_new、choose、 again。
start 就是点击开始按钮，会做很多判断。
get_new 就是老是被问是不是老婆知道。
choose 就是do_guess。
again 结束当前房间再来一次。
具体看完整源码即可。
# 视图
~~~
<div id="app">
<section v-if="page == 'welcome'" id="welcome">
<div id="title">
赌一把
<br>
</div>
<div class="widget button hcenter vmiddle clickable animated flash" id="start_btn" @click="start()">
<div class="button-wrapper">
<span class="text">开始</span>
</div>
</div>
<div class="widget text_view hleft vtop" id="desc">
<div class="text" style="padding: 10px;"><p>游戏规则：初始进入创建角色后，再创建房间，每人初始3颗星，进行猜拳游戏，手中四组“石头、剪刀、布”。双方互相决定出什么牌后，翻面判定本次出牌胜负。每次出牌有 win 、lose、draw。三个结果。出过的牌作废。win获得对方的一颗星，平局不消耗星。输了减少一颗星给对方。有人输光3颗星或者牌走完，游戏结束。</p>
</div>
</div>
<div class="widget label hcenter vmiddle" id="footer"><p>本游戏由jaylabs实验室老杨提供</p></div>
</section>
<section v-if="page == 'gaming'" id="gaming">
<div class="widget rounded_rect hcenter vmiddle" id="notify"><p v-show="notify !=''"> 通知：{{notify}}</p></div>
<div class="widget rounded_rect hleft vmiddle name" id="user_info_name" style="padding: 0px;"><p>{{user.name}}</p></div>
<div class="widget rounded_rect hleft vmiddle name" id="compete_info_name" style="padding: 0px;"><p>{{compete_user.name}}</p></div>
<div class="count_wraper">
<div class="widget image_view countdown" id="countdown_shitou"></div>
<div class="widget image_view countdown" id="countdown_jiandao"></div>
<div class="widget image_view countdown" id="countdown_bu"></div>
</div>
<div class="star_wraper">
<img src="static/img/star.png" v-for="n in user.stars">
</div>
<div class="star_wraper" id="compete_stars">
<img src="static/img/star.png" v-for="n in compete_user.stars">
</div>
<div class="countdown_num" id="countdown_num_shitou">{{count_down_cards.石头}}</div>
<div class="countdown_num" id="countdown_num_jiandao">{{count_down_cards.剪刀}}</div>
<div class="countdown_num" id="countdown_num_bu">{{count_down_cards.布}}</div>
<div class="widget image_view" v-bind:class="[compete_type]" id="compete_type"></div>
<div class="widget image_view user_card" id="user_shitou" v-bind:class="{checked :user.checked == '石头', disabled: user.石头 == 0}" @click="choose('石头')"></div>
<div class="widget image_view user_card" id="user_jiandao" v-bind:class="{checked :user.checked == '剪刀', disabled: user.剪刀 == 0}" @click="choose('剪刀')"></div>
<div class="widget image_view user_card" id="user_bu" v-bind:class="{checked :user.checked == '布', disabled: user.布 == 0}" @click="choose('布')"></div>
</section>
<section v-if="page == 'end'" id="end">
<div class="widget rounded_rect hcenter vmiddle" id="result">
<div class="text" style="padding: 0px;">
<p><font color="#ce1919">U {{end_status}}</font></p>
<p class="egg_text" v-show="egg_name">我找到了我的妞，{{egg_name}}！</p>
</div>
</div>
<div class="widget button hcenter vmiddle animated fadeOut" id="again_btn">
<div class="button-wrapper"><span class="text" @click="again()">再来一把</span></div>
</div>
</section>
</div>
~~~
整个视图也就3个section。id分别为welcome、gaming、end。
## v-for n in
显示星星的时候，想用v-for 但是一般都是定义一个数组，我只想循环1-3 这种，终于被我在手册里找到了。
~~~
<div class="star_wraper" id="compete_stars">
<img src="static/img/star.png" v-for="n in compete_user.stars">
</div>
~~~
## 结束页的背景
因为背景图是一个窄图，放在中间很不好看，干脆搞了和图片主色相近的背景色。
## 提高效率
因为这个都是相对定位，所以场景里的元素的定位相比原型里1440 的小了一些，每个都得调一下。后来尝试了chrome的workspace 方法 。直接浏览器里改，也没用什么live reload方案。
### 弹窗
用了 Lulu UI的dialog。找了半天才找到回调在onClose里。
