前言

我写操作喜欢写全，主要是自己懂得不多，相关方面的知识不能融会贯通，知识壁垒很多，网上七拼八凑看的教程，现在整理成一份完整的攻略以备后用。

打包的代码比较简单，没有复杂功能，没有和后端交互，是我写的方格游戏移动版。主要目的是想体验一下 vue 转 app 的操作过程。

感兴趣的可以看下游戏的PC版，移动版也有，但我朋友说她手机上玩不了，哈哈，我的手机能玩啊。

方格游戏

实践参考《基于Vue的项目打包为移动端app》

https://baijiahao.baidu.com/s?id=1655878004078867586&wfr=spider&for=pc

项目准备

使用vue-cli开始一个Vue新项目

使用vue-cli脚手架，开始一个新项目。详情在我的另一篇博客里有，这里不再赘述。

项目目录

之前做项目练习的时候，没想过打包，静态资源都是随便放。现在需要打包了，静态资源需要放在static下面，包括图片，js 等。

indexPage.vue

<template>
<div id="root">
<div class="head" v-show="!showControl">
<div v-show="!showTime" class="game_start_box">
<div class="game_time_box">倒计时设置(10 ~ 60s)：<input type="number" v-model="userSetGameTime" min="10" max="60" /></div>
<div class="game_start_btn" @click="game_start">开始游戏</div>
</div>

<div v-show="showTime">倒计时<span>{ {gameTime}}</span>秒 </div>
</div>

<div class="container">
<div class="chess" v-show="!showControl">
<div class="chess-grid">
<div ref="snowman" class="snowman" :style="moveStyle" title="按键盘方向键移动我哦" @touchend="dealTouchEvent($event)"></div>
</div>
<div class="chess-grid" v-for="(item,index) in chess" :key="index" :style="{background:item.background}">{ {item.usedScore == 0 ? item.usedScore : item.score}}</div>
<div class="chess-grid">
<div class="home"></div>
</div>
</div>

<div class="score" v-show="showControl">
<div class="title">战绩</div>
<p v-for="(score,index) in gameScores" :key="index">第{ {index+1}}战得分<span>{ {score}}</span>分</p>
</div>
</div>

},
//处理手机触屏事件
dealTouchEvent: function(e) {
e || event;
this.touchingScreen = true;

//使用的时候很简单，只需要像下面这样调用即可 up, right, down, left为四个回调函数，分别处理上下左右的滑动事件
this.EventUtil.listenTouchDirection(e.target, true, this.upCallback, this.rightCallback, this.downCallback,
this.leftCallback);
},

//touch的回调事件
upCallback: function() {
//当游戏倒计时显示时，即游戏还未结束，才能触发键盘事件，开始移动。
if (this.showTime && this.touchingScreen) {
this.touchingScreen = false; //触屏只触发一次
//向上移动
this.moveDown -= this.unit;
this.moveDown < 0 ? this.moveDown = 0 : this.moveDown;
this.moveStyle.transform = "translate(" + this.moveRitht + "px," + this.moveDown + "px)";
//根据偏移的位置，统计得分。
this.countScore(this.moveRitht, this.moveDown);
}
},
rightCallback: function() {
if (this.showTime && this.touchingScreen) {
this.touchingScreen = false; //触屏只触发一次
//向右移动
this.moveRitht += this.unit;
//判断界限值不能超出棋盘活动
this.moveRitht > 6 * this.unit ? this.moveRitht = 6 * this.unit : this.moveRitht;
this.moveStyle.transform = "translate(" + this.moveRitht + "px," + this.moveDown + "px)";
//根据偏移的位置，统计得分。
this.countScore(this.moveRitht, this.moveDown);
}
},
downCallback: function() {
if (this.showTime && this.touchingScreen) {
this.touchingScreen = false; //触屏只触发一次
//向下移动
this.moveDown += this.unit;
this.moveDown > 6 * this.unit ? this.moveDown = 6 * this.unit : this.moveDown;
this.moveStyle.transform = "translate(" + this.moveRitht + "px," + this.moveDown + "px)";
//根据偏移的位置，统计得分。
this.countScore(this.moveRitht, this.moveDown);
}
},
leftCallback: function() {
if (this.showTime && this.touchingScreen) {
this.touchingScreen = false; //触屏只触发一次
//向左移动
this.moveRitht -= this.unit;
//判断界限值不能超出棋盘活动
this.moveRitht < 0 ? this.moveRitht = 0 : this.moveRitht;
this.moveStyle.transform = "translate(" + this.moveRitht + "px," + this.moveDown + "px)";
//根据偏移的位置，统计得分。
this.countScore(this.moveRitht, this.moveDown);
}
},

//计算得分
countScore: function(r, d) {
//遍历偏移量字典，根据当前所在的位置，获取对应的分值。
//偏移量字典（len=48）比棋格(len=47)多了一个终点的位置信息。
if (!(Math.abs(r - this.unit * 6) < 7 && Math.abs(d - this.unit * 6) < 7)) {
//不在家，赋值false 防止回家后再离开的情形
this.is_get_home = false;
for (var i = 0; i < 48; i++) {
//因为浏览器将数值取整后返回，所以，与实际值差值小于1.累积偏移差值小于1*7. Math.abs 取绝对值.
if (Math.abs(r - this.dictionary[i].r) < 7 && Math.abs(d - this.dictionary[i].d) < 7) {
//游戏开始时，小女孩正常移动后再回到起点会报这个错误
//undo: this.chess[i].usedScore 有时会报错 Cannot read property 'usedScore' of undefined
if (this.chess[i].usedScore == 100) {
this.currentScore += this.dictionary[i].score;
//分数一次性有效走过的分数变为0.
//为了复盘，不直接改变分数，新分数存储到 usedScore
this.chess[i].usedScore = 0;
}
}
}
} else {
//雪人到家
this.is_get_home = true;
}

//计时器，每次时间-1，时间单位秒。
timer: function() {
this.gameTime -= 1
},

//用户点击游戏开始创建定时器显示倒计时
game_start: function() {
if (this.gameTime != this.userSetGameTime) {
//系统设置的游戏时长和用户设置的游戏时长冲突，则使用用户设置的时长
this.gameTime = this.userSetGameTime;
}
this.showTime = true;
this.timer1 = setInterval(this.timer, 1000);
},

game_review: function() {
this.parameter_reset();
this.resetUsedScore();
},

//恢复棋盘使用过的分数初始化
resetUsedScore: function() {
var len = 47;
while (len--) {
this.chess[len].usedScore = 100;
}
},

//本局重玩，只需要重置参数。
parameter_reset: function() {
this.showControl = false;
this.is_get_home = false;
this.showTime = false; //先不显示倒计时，显示开始游戏按钮。
this.moveRitht = 0;
this.moveDown = 0;
this.moveStyle.transform = "translate(0,0)";
this.currentScore = 0;
},

//页面初始化游戏重新开始
game_update: function() {
this.parameter_reset();
this.gameScores = [];
this.chess = [];
this.createChess();
}
},
watch: { //监测游戏时间
gameTime() {
if (this.gameTime == 0) {
clearInterval(this.timer1);
this.showControl = true;
this.showTime = false; //倒计时结束，关闭倒计时结果显示
if (this.is_get_home) {
//游戏结束：倒计时结束,雪人进入小屋。当前得分计入。
this.gameScores.push(this.currentScore);
} else {
//游戏失败：倒计时结束，但雪人未进入小屋。本局得分为0。
this.currentScore = 0;
this.gameScores.push(0);
}
}
}
},
mounted() {
//计量单位等于小方格的宽或高
//获取的高度值约等于实际值，存在差值。获取的值取了实际值的近似整数。
this.unit = this.$refs.snowman.offsetHeight;
this.game_update();

this.EventUtil = {
addHandler: function(element, type, handler) {
if (element.addEventListener)
element.addEventListener(type, handler, false);
else if (element.attachEvent)
element.attachEvent("on" + type, handler);
else
element["on" + type] = handler;
},
removeHandler: function(element, type, handler) {
if (element.removeEventListener)
element.removeEventListener(type, handler, false);
else if (element.detachEvent)
element.detachEvent("on" + type, handler);
else
element["on" + type] = handler;
},
/**
* 监听触屏的方向
* @param target 要绑定监听的目标元素
* @param isPreventDefault 是否屏蔽掉触屏滑动的默认行为（例如页面的上下滚动，缩放等）
* @param upCallback 向上滑动的监听回调（若不关心，可以不传，或传false）
* @param rightCallback 向右滑动的监听回调（若不关心，可以不传，或传false）
* @param downCallback 向下滑动的监听回调（若不关心，可以不传，或传false）
* @param leftCallback 向左滑动的监听回调（若不关心，可以不传，或传false）
*/
listenTouchDirection: function(target, isPreventDefault, upCallback, rightCallback, downCallback,
leftCallback) {
this.addHandler(target, "touchstart", handleTouchEvent);
this.addHandler(target, "touchend", handleTouchEvent);
this.addHandler(target, "touchmove", handleTouchEvent);
var startX;
var startY;

function handleTouchEvent(event) {
switch (event.type) {
case "touchstart":
startX = event.touches[0].pageX;
startY = event.touches[0].pageY;
break;
case "touchend":
var spanX = event.changedTouches[0].pageX - startX;
var spanY = event.changedTouches[0].pageY - startY;

if (Math.abs(spanX) > Math.abs(spanY)) { //认定为水平方向滑动
if (spanX > 30) { //向右
if (rightCallback)
rightCallback();
} else if (spanX < -30) { //向左
if (leftCallback)
leftCallback();
}
} else { //认定为垂直方向滑动
if (spanY > 30) { //向下
if (downCallback)
downCallback();
} else if (spanY < -30) { //向上
if (upCallback)
upCallback();
}
}

break;
case "touchmove":
//阻止默认行为
if (isPreventDefault)
event.preventDefault();
break;
}
}
}
};
}
}
</script>

<style scoped>
body {
width: 100%;
height: 100%;
margin: 0;
background: #fff;
overflow: hidden;
box-sizing: border-box;
color: #1a2a65;
}

div.container {
width: 100%;
margin-top: 80px;
text-align: center;
}

div.container div.chess {
width: 352px;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid #ccc;
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
}

div.chess-grid {
/* 棋子使用百分比宽度和高度，浏览器返回近似整数值和字典中设置的偏移量不完全相等，会产生UI上的偏移，影响美观。 */
width: 50px;
height: 0;
box-sizing: border-box;
padding-bottom: 50px;
/* 让div的高等于宽 */
line-height: 50px;
text-align: center;
color: #fff;
/*应用 CSS 属性 touch-action: none; 这样任何触屏事件都不会产生默认行为，但是 touch 事件照样触发，从而解决无法被动侦听事件preventDefault*/
touch-action: none;
}

/*雪人*/
div.snowman {
width: 100%;
padding-bottom: 100%;
/* 让div的高等于宽 */
box-sizing: border-box;
background: url("../../static/img/head.jpg") no-repeat;
background-size: 100% 100%;
cursor: pointer;
}

/*雪人的家*/
div.home {
width: 100%;
padding-bottom: 100%;
/* 让div的高等于宽 */
box-sizing: border-box;
background: url("../../static/img/home.jpg") no-repeat;
background-size: 100% 100%;
}

div.container div.score {
width: 98%;
margin: 0 auto;
box-sizing: border-box;
border: 1px solid red;
background: #f7f7f7;
text-align: center;
}

div.container div.score .title {
font-size: 18px;
background: red;
color: #fff;
padding: 10px;
}

/*游戏计时器*/
div.head {
width: 100%;
height: 64px;
box-sizing: border-box;
text-align: center;
position: fixed;
top: 0;
background: #f7f7f7;
padding: 12px;
}

div.head span,
div.score span {
font-size: 24px;
font-weight: bold;
color: red;
padding: 0 4px
}

div.game_start_box {
display: flex;
justify-content: center;
}

div.game_time_box {
margin-right: 20px;
line-height: 38px;
}

div.game_time_box input {
height: 30px;
width: 40px;
box-sizing: border-box;
}

div.game_start_btn {
width: 100px;
height: 40px;
line-height: 40px;
box-sizing: border-box;
border: 1px solid #ccc;
color: #fff;
cursor: pointer;
background: green;
}

/*控制器*/
div.control {
width: 100%;
height: 60px;
line-height: 60px;
text-align: center;
display: flex;
justify-content: center;
position: fixed;
bottom: 0;
background: #f7f7f7;
}

div.btn {
width: 200px;
height: 40px;
line-height: 40px;
box-sizing: border-box;
border: 1px solid #ccc;
margin: 10px;
color: #fff;
cursor: pointer;
}

div.auto {
background: green;
}

div.refresh {
background: red;
}
</style>