├── .gitignore
├── README.md
├── babel.config.js
├── package-lock.json
├── package.json
├── public
    ├── favicon.ico
    └── index.html
└── src
    ├── App.vue
    ├── assets
        └── images
        │   ├── 2020-10-22-pic1.jpeg
        │   ├── 2020-10-22-pic2.jpeg
        │   ├── 2020-10-22-pic3.jpeg
        │   ├── 2020-10-22-pic4.jpeg
        │   ├── 2020-10-22-pic47.jpeg
        │   ├── 2020-10-22-pic5.jpeg
        │   ├── 2020-10-22-pic7.jpeg
        │   ├── 2020-10-22-pic8.jpeg
        │   ├── caixushen.jpg
        │   ├── code.jpg
        │   ├── logo.png
        │   ├── re.jpeg
        │   ├── share.png
        │   ├── timg.jpeg
        │   ├── timg2.jpeg
        │   ├── timg3.jpeg
        │   ├── timg4.jpeg
        │   ├── timg6.jpeg
        │   └── yang.jpeg
    ├── components
        ├── Cutdown.vue
        └── HelloWorld.vue
    └── main.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # 拼图小游戏项目说明:(vue版本)
 2 | 
 3 | ## Project setup
 4 | ```
 5 | npm install
 6 | ```
 7 | 
 8 | ### Compiles and hot-reloads for development
 9 | ```
10 | npm run serve
11 | ```
12 | 
13 | ### Compiles and minifies for production
14 | ```
15 | npm run build
16 | ```
17 | 
18 | ### 拼拼乐(拼图小游戏)开发
19 | 
20 | 在上班的地铁上面,某天早上看到了订阅公众号一篇文章,介绍的是一个移动端的拼图小游戏.试玩了一下,感觉还挺有意思的.于是周末抽空研究了一下.问了下作者,他用的是原生JS写的一版.我自己本身在用VUE,于是看了下游戏的大体效果,决定尝试用VUE改写一版玩一下.
21 | 
22 | 于是说干就干,尝试着参考之前的项目,看了下有哪些效果.就用VUE开始改写了起来.其实这个游戏是一个很常见的拼图小游戏,就是选择一张图片,然后打乱,最后挪动图片拼成一张完整的图片,用`canvas`生成挑战结果页面,显示挑战成功~
23 | 
24 | ![游戏界面](https://images.901web.com/2020-11-18-611605665816_.pic_hd.jpg)
25 | 
26 | ![开始游戏](https://images.901web.com/2020-11-18-621605665817_.pic_hd.jpg)
27 | 
28 | ![等级选择](https://images.901web.com/2020-11-18-631605665822_.pic_hd.jpg)
29 | 
30 | ![挑战结果](https://images.901web.com/2020-11-18-641605666371_.pic_hd.jpg)
31 | 
32 | 试玩一下基本就知道具体的流程啦~
33 | 
34 | 先贴上试玩游戏二维码,扫码即可开始调整哦.
35 | 
36 | [挑战地址](http://pinpinle.901web.com/)
37 | 
38 | ![二维码地址](https://images.901web.com/2020-11-18-661605666858_.pic.jpg)
39 | 
40 | 
41 | 
42 | 本项目纯属娱乐,作为自己的一个业余项目在开发.另外在试玩的过程中.分割图片(3*3)的模块时候,比较简单,这种情况又弄了另外一个版本.
43 | 
44 | **相邻的元素才可以移动**
45 | 
46 | 做了一个判断,重新部署了一个版本.(`相邻元素才可以移动版本`)
47 | 
48 | 
49 | [挑战地址](http://pinpinle-step1.901web.com/)
50 | 
51 | ![二维码地址](https://images.901web.com/2020-11-18-671605667550_.pic.jpg)
52 | 
53 | 
54 | 代码是很无趣的.要用无趣的代码做点有趣好玩的东西出来.哈哈~
55 | 
56 | 当然,在开发过程中有很多JS基础知识,也遇到很多问题,例如图片切割,打乱排序,生产canvas结果页面,切换等级页面样式,倒计时等等.
57 | 
58 | 项目做的比较粗糙,也存在很多问题.遇到问题慢慢的尝试解决,并慢慢的积累经验,做这种小游戏还是很考验基本功的.希望也能巩固自己的JS基础知识,提升能力.
59 | 
60 | 
61 | 
62 | 
63 | 
64 | 
65 | 
66 | 
67 | 
68 | 
69 | 
70 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pinpinle",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "core-js": "^3.6.5",
12 |     "vue": "^2.6.11"
13 |   },
14 |   "devDependencies": {
15 |     "@vue/cli-plugin-babel": "~4.5.0",
16 |     "@vue/cli-plugin-eslint": "~4.5.0",
17 |     "@vue/cli-service": "~4.5.0",
18 |     "babel-eslint": "^10.1.0",
19 |     "eslint": "^6.7.2",
20 |     "eslint-plugin-vue": "^6.2.2",
21 |     "vue-template-compiler": "^2.6.11"
22 |   },
23 |   "eslintConfig": {
24 |     "root": true,
25 |     "env": {
26 |       "node": true
27 |     },
28 |     "extends": [
29 |       "plugin:vue/essential",
30 |       "eslint:recommended"
31 |     ],
32 |     "parserOptions": {
33 |       "parser": "babel-eslint"
34 |     },
35 |     "rules": {}
36 |   },
37 |   "browserslist": [
38 |     "> 1%",
39 |     "last 2 versions",
40 |     "not dead"
41 |   ]
42 | }
43 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
 8 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 9 |     <title><%= htmlWebpackPlugin.options.title %></title>
10 |     <script>
11 |         (window.onresize = window.__setFontSize__  = function(){
12 |           document.documentElement.style.fontSize = Math.min(750, Math.max(document.documentElement.clientWidth, 320) ) / 375 * 14 + 'px'}
13 |           )()
14 |         </script>
15 |         <script>
16 |         //     window.onload = function() {
17 |         //     let screenHeight = 0
18 |         //     if (window.innerHeight){
19 |         //         screenHeight = window.innerHeight;
20 |         //     } else if ((document.body) && (document.body.clientHeight)){
21 |         //         screenHeight = document.body.clientHeight;
22 |         //     }
23 |         //     document.body.style.height = screenHeight + 'px'
24 |         //   }
25 |         </script>
26 |   </head>
27 |   <body>
28 |     <noscript>
29 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
30 |     </noscript>
31 |     <div id="app"></div>
32 |     <!-- built files will be auto injected -->
33 |   </body>
34 | </html>
35 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <HelloWorld msg="请选择一张图片"/>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | import HelloWorld from './components/HelloWorld.vue'
 9 | 
10 | export default {
11 |   name: 'App',
12 |   components: {
13 |     HelloWorld
14 |   }
15 | }
16 | </script>
17 | 
18 | <style>
19 | body,html{padding:0;margin:0}
20 | html{font-size:16px;font-family:Arial,Helvetica,sans-serif}
21 | *{box-sizing:border-box}a,button,input,textarea{-webkit-tap-highlight-color:transparent}
22 | #app {
23 | 
24 |   text-align: center;
25 |   color: #2c3e50;
26 |   height:100vh;
27 |   overflow: hidden;
28 | }
29 | </style>
30 | 


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic1.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic2.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic3.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic4.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic47.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic47.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic5.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic5.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic7.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic7.jpeg


--------------------------------------------------------------------------------
/src/assets/images/2020-10-22-pic8.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/2020-10-22-pic8.jpeg


--------------------------------------------------------------------------------
/src/assets/images/caixushen.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/caixushen.jpg


--------------------------------------------------------------------------------
/src/assets/images/code.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/code.jpg


--------------------------------------------------------------------------------
/src/assets/images/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/logo.png


--------------------------------------------------------------------------------
/src/assets/images/re.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/re.jpeg


--------------------------------------------------------------------------------
/src/assets/images/share.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/share.png


--------------------------------------------------------------------------------
/src/assets/images/timg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/timg.jpeg


--------------------------------------------------------------------------------
/src/assets/images/timg2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/timg2.jpeg


--------------------------------------------------------------------------------
/src/assets/images/timg3.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/timg3.jpeg


--------------------------------------------------------------------------------
/src/assets/images/timg4.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/timg4.jpeg


--------------------------------------------------------------------------------
/src/assets/images/timg6.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/timg6.jpeg


--------------------------------------------------------------------------------
/src/assets/images/yang.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/pybyongbo/vue-pinpngle/082904ca0f0df00d88a2efe374b15045a46a30bc/src/assets/images/yang.jpeg


--------------------------------------------------------------------------------
/src/components/Cutdown.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |       <div class="deloy">倒计时：<span id="time">{{count}}</span></div>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   data() {
10 |     return {
11 |       count: 180,
12 |       dealTime:0,
13 |       timer: null
14 |     };
15 |   },
16 | 
17 |   props:{
18 |       success:{
19 |         type: Boolean,
20 |         default :false
21 |       },
22 |   },
23 | 
24 |   created(){
25 |       this.cutDown();
26 |   },
27 | //   mounted(){
28 | // this.cutDown();
29 | //   },
30 | 
31 |   methods: {
32 |     cutDown() {
33 |     //   const TIME_COUNT = 180;
34 |       if (!this.timer) {
35 |         // this.count = TIME_COUNT;
36 |         this.timer = setInterval(() => {
37 |           if (this.count > 0 ) {
38 |             this.count--;
39 |             if(this.success) {
40 |                 this.stopCutdown();
41 |             }
42 |           } else {
43 |             clearInterval(this.timer);
44 |             this.timer = null;
45 |           }
46 |         }, 1000);
47 |       }
48 |     },
49 |     initTime(){ // 返回的时候初始化倒计时
50 |         // this.clearTimer();
51 |          clearInterval(this.timer);
52 |         this.timer = null;
53 |         this.count = 180;
54 |         this.cutDown();
55 |     },
56 |     stopCutdown(){ //拼图成功要清理掉倒计时,然后向父组件传递用时
57 |        
58 |         this.dealTime = 180-this.count;
59 |         this.$emit('overtime',this.dealTime);
60 |         clearInterval(this.timer);
61 |         this.timer = null;
62 |     },
63 |     clearTimer(){ //拼图成功后清除定时器
64 |         clearInterval(this.timer);
65 |         this.timer = null;
66 |     }
67 |   }
68 | };
69 | </script>
70 | 
71 | <style  scoped>
72 | .play-page .deloy {
73 |   padding: 10px 20px;
74 |   color: #fff;
75 | }
76 | </style>


--------------------------------------------------------------------------------
/src/components/HelloWorld.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <!-- :style="{transform: `translateX(${clickStartBtn?-100:0}vw)`}" -->
  3 |   <div class="wrap" ref="wrap">
  4 |     <div class="start-page">
  5 |       <h1>{{ msg }}</h1>
  6 |       <div class="album-list">
  7 |         <div class="img-wrap" v-for="(item,index) in imgArr" :class="activeClass == index ? 'active':''" :key="index" @click="getItem(index)">
  8 |           <img :src="item.url" alt="">
  9 |         </div>
 10 |         <div class="img-wrap" v-if="!uploadimg">
 11 |           <div class="file-wrap" ref="filewrap">
 12 |             <input type="file" id="file" @change="onFileChange">
 13 |           </div>
 14 |         </div>
 15 | 
 16 |         <div class="btn" id="start" @click="startGame(activeClass)">开始游戏</div>
 17 |       </div>
 18 |     </div>
 19 | 
 20 |     <div class="play-page">
 21 |       <div class="deloy">倒计时：<span id="time">{{dealtime}}</span></div>
 22 |       <!-- <Cutdown ref="child" :success="issuccess" @overtime="overtime"></Cutdown> -->
 23 |       <div class="play-area" id="playArea">
 24 |         <!-- :style="{backgroundImage:'url('+selectedImg+')',transform: `translate(${matrixArr[item].x}vw, ${matrixArr[item].y}vh)`}" -->
 25 |         <div v-for="item in boxArr" :index="item" :key="item" :class="['piece','piece-'+(item),item==boxArractivelass?'active':'' ]" :style="{backgroundImage:'url('+selectedImg+')'}" @click="changePositon($event,item)" :ref="'piece' +item"></div>
 26 |       </div>
 27 |       <div class="btn" id="change" @click="reOrder()">重新排序</div>
 28 |       <div class="btn" id="back" @click="goBack()">返回</div>
 29 |     </div>
 30 | 
 31 |     <div class="result-page">
 32 | 
 33 |       <div class="success-text">恭喜闯关成功~!</div>
 34 |       <div class="total-time">用时: <span id="use_time">{{180-dealtime}}</span>s</div>
 35 |       <div class="btn" @click="generateImg">生成战绩海报</div>
 36 |       <div class="btn" @click="onceAgain()">再来一次</div>
 37 | 
 38 |     </div>
 39 | 
 40 |     <div class="preview-page last-page">
 41 |       <img :src="canvasUrl" alt="图片">
 42 |       <div class="btn play-again" @click="reStart()">重新再来</div>
 43 |       <div class="btn share-other" @click="isVisible=true">我要分享</div>
 44 |     </div>
 45 |     <div class="share-bg" v-if="isVisible" @click="isVisible=false" />
 46 | 
 47 |   </div>
 48 | </template>
 49 | 
 50 | <script>
 51 | export default {
 52 |   name: "HelloWorld",
 53 |   props: {
 54 |     msg: String
 55 |   },
 56 |   data() {
 57 |     return {
 58 |       startDx: 0, // 初始位移，用于返回上一页
 59 |       activeClass: -1,
 60 |       boxArractivelass: -1,
 61 |       prevIndex: null,
 62 |       curIndex: 0,
 63 |       curposArr: [],
 64 |       clickStartBtn: false,
 65 |       uploadimg: "",
 66 |       selectedImg: "",
 67 |       boxArr: new Array(9).fill(1).map((item, index) => {
 68 |         return index;
 69 |       }),
 70 |       pieces: document.querySelectorAll(".piece"),
 71 |       pool: this.generateMatrix(3, 28, 20),
 72 |       matrixArr: this.upsetArr(this.generateMatrix(3, 28, 20)),
 73 |       //  matrixArr:this.shuffle(this.pieces, this.pool),
 74 |       imgArr: [
 75 |         // { url: require("../assets/images/timg2.jpeg") },
 76 |         // { url: require("../assets/images/timg3.jpeg") },
 77 |         // { url: require("../assets/images/timg.jpeg") },
 78 |         // { url: require("../assets/images/caixushen.jpg") },
 79 |         // { url: require("../assets/images/yang.jpeg") },
 80 |         // { url: require("../assets/images/re.jpeg") },
 81 |         // { url: require("../assets/images/timg4.jpeg") },
 82 |         // { url: require("../assets/images/timg6.jpeg") }
 83 |         { url: require("../assets/images/2020-10-22-pic2.jpeg") },
 84 |         { url: require("../assets/images/2020-10-22-pic47.jpeg")},
 85 |         { url: require("../assets/images/2020-10-22-pic3.jpeg") },
 86 |         { url: require("../assets/images/2020-10-22-pic5.jpeg") },
 87 |         { url: require("../assets/images/2020-10-22-pic4.jpeg") },
 88 |         { url: require("../assets/images/2020-10-22-pic1.jpeg") },
 89 |         { url: require("../assets/images/2020-10-22-pic7.jpeg") },
 90 |         { url: require("../assets/images/2020-10-22-pic8.jpeg") }
 91 |       ],
 92 | 
 93 |       wall: 0,
 94 |       prevEl: null, // 上一个元素,
 95 |       dealtime: 180,
 96 |       timer: null,
 97 |       issuccess: false,
 98 |       canvasUrl: "",
 99 |       isVisible: false
100 |     };
101 |   },
102 |   methods: {
103 |     getItem(index) {
104 |       this.activeClass = index;
105 |     },
106 |     onFileChange(e) {
107 |       var files = e.target.files || e.dataTransfer.files;
108 |       if (!files.length) return;
109 |       this.createImage(files[0]);
110 |     },
111 |     createImage(file) {
112 |       //   var image = new Image();
113 |       var reader = new FileReader();
114 |       var vm = this;
115 | 
116 |       reader.onload = e => {
117 |         vm.uploadimg = e.target.result;
118 |         // console.log(123,e.target.result)
119 |         this.imgArr.push({
120 |           url: e.target.result
121 |         });
122 |       };
123 |       reader.readAsDataURL(file);
124 |     },
125 |     startGame(picIndex) {
126 |       if (this.activeClass == -1) {
127 |         alert("请选择图片");
128 |         return;
129 |       }
130 |       //   this.dealtime = 180;
131 |       this.timer = setInterval(this.timeStart, 1000);
132 |       this.startDx = this.startDx - 100;
133 |       this.transformX(this.$refs.wrap, this.startDx + "vw");
134 |       this.selectedImg = this.imgArr[picIndex].url;
135 | 
136 |       this.shuffle(document.querySelectorAll(".piece"), this.pool);
137 |       //   console.log(222);
138 |     },
139 |     reOrder() {
140 |       //this.matrixArr = this.upsetArr(this.generateMatrix(3, 28, 20));
141 |       this.shuffle(document.querySelectorAll(".piece"), this.pool);
142 |     },
143 |     // 点击高亮并且切换对应位置 (想办法交换对应索引位置的x,y值即可)
144 |     changePositon(e, item) {
145 |       //点击小图片切换位置方法
146 |       let reg = /active/g;
147 |       // console.log(e, item);
148 |       this.boxArractivelass = item;
149 |       let pieces = document.querySelectorAll(".piece");
150 |       if (!this.wall) {
151 |         this.wall = 1;
152 |         this.prevEl = e.target;
153 |         for (var i = 0, len = pieces.length; i < len; i++) {
154 |           // 使用replace为了避免元素后期加入其他类名
155 |           pieces[i].className = pieces[i].className.replace(" active", "");
156 |         }
157 |         !reg.test(this.className) && (this.className += " active");
158 |         // this.className= this.className.replace(' active', '');
159 |       } else {
160 |         this.wall = 0;
161 |         var prevIndex = +this.prevEl.getAttribute("index"),
162 |           curIndex = +e.target.getAttribute("index");
163 | 
164 |         // 置换数组
165 |         this.swap(this.pool, prevIndex, curIndex);
166 |         // console.log("prevIndex", "curIndex", prevIndex, curIndex);
167 |         this.prevEl.style.transform =
168 |           "translate(" +
169 |           this.pool[prevIndex].x +
170 |           "vw," +
171 |           this.pool[prevIndex].y +
172 |           "vh" +
173 |           ")";
174 |         e.target.style.transform =
175 |           "translate(" +
176 |           this.pool[curIndex].x +
177 |           "vw," +
178 |           this.pool[curIndex].y +
179 |           "vh" +
180 |           ")";
181 |         // 清除样式
182 |         // this.prevEl.className= this.prevEl.className.replace(' active', '');
183 |         this.boxArractivelass = -1;
184 | 
185 |         // 校验是否成功
186 |         if (this.isTestSuccess(this.pool)) {
187 |           // 清除计时器
188 |           // alert('success');
189 |           // this.clickStartBtn = true;
190 |           clearInterval(this.timer);
191 |           this.startDx -= 100;
192 |           this.issuccess = true;
193 | 
194 |           // $('#playArea')[0].classList.add('active');
195 |           // $('#use_time').html(180-dealtime);
196 |           //   setTimeout(function() {
197 |           this.transformX(this.$refs.wrap, this.startDx + "vw");
198 |           //   }, 1200);
199 |         }
200 |       }
201 |     },
202 | 
203 |     timeStart() {
204 |       this.dealtime--;
205 |       if (this.dealtime < 1) {
206 |         clearInterval(this.timer);
207 |         alert("挑战失败，请返回重新开始");
208 |       }
209 |     },
210 |     // overtime(num) {
211 |     //   this.step = num;
212 |     // },
213 |     // 滑动元素
214 |     transformX(el, dx) {
215 |       el.style.transform = "translateX(" + dx + ")";
216 |     },
217 |     resetTime() {
218 |       this.dealtime = 180;
219 |       clearInterval(this.timer);
220 |     },
221 |     goBack() {
222 |       // 清理定时器,返回
223 |       //   this.clickStartBtn = false;
224 |       this.startDx += 100;
225 |       this.transformX(this.$refs.wrap, this.startDx + "vw");
226 |       this.resetTime();
227 |     },
228 |     onceAgain() {
229 |       this.shuffle(document.querySelectorAll(".piece"), this.pool);
230 |       this.startDx = -100;
231 |       this.transformX(this.$refs.wrap, this.startDx + "vw");
232 |       this.resetTime();
233 |       this.dealtime = 180;
234 |       this.timer = setInterval(this.timeStart, 1000);
235 |       //    this.$refs.child.initTime();
236 |     },
237 |     reStart() {
238 |       this.startDx = this.startDx + 300;
239 |       this.transformX(this.$refs.wrap, this.startDx + "vw");
240 |       this.resetTime();
241 |       // this.dealtime = 180;
242 |       // this.timer = setInterval(this.timeStart, 1000);
243 |     },
244 |     // 生成战绩海报
245 |     generateImg() {
246 |       var canvas = document.createElement("canvas");
247 | 
248 |       if (canvas.getContext) {
249 |         var winW = window.innerWidth,
250 |           winH = window.innerHeight,
251 |           ctx = canvas.getContext("2d");
252 |         canvas.width = winW;
253 |         canvas.height = winH;
254 | 
255 |         // 绘制背景
256 |         // ctx.fillStyle = '#06c';
257 |         var linear = ctx.createLinearGradient(0, 0, 0, winH);
258 |         linear.addColorStop(0, "#a1c4fd");
259 |         linear.addColorStop(1, "#c2e9fb");
260 |         ctx.fillStyle = linear;
261 |         ctx.fillRect(0, 0, winW, winH);
262 |         ctx.fill();
263 | 
264 |         // 绘制顶部图像
265 |         var imgH = 0;
266 |         var that = this;
267 |         var img = new Image();
268 |         img.src = that.selectedImg;
269 |         img.setAttribute("crossOrigin",'Anonymous')
270 |         img.onload = function() {
271 |           // 绘制的图片宽为.7winW, 根据等比换算绘制的图片高度为 .7winW*imgH/imgW
272 |           imgH = (0.5 * winW * this.height) / this.width;
273 |           // ctx.drawImage(img, 0.2 * winW, 0.1 * winH, 0.6 * winW, imgH);
274 |           ctx.drawImage(img, 0.2 * winW, 20, 0.6 * winW, imgH);
275 |           // drawText();
276 |           // ctx.save();
277 |           ctx.fillStyle = "#fff";
278 |           ctx.font = 20 + "px Helvetica";
279 |           ctx.textBaseline = "hanging";
280 |           ctx.textAlign = "center";
281 |           ctx.moveTo(10, 10);
282 |           ctx.fillText(
283 |             "我只用了" + (180 - that.dealtime) + "s," + "快来挑战！",
284 |             winW / 2,
285 |             0.1 * winH + imgH
286 |             // 80+imgH
287 |             // 100
288 |           );
289 |           // ctx.restore();
290 |           // drawTip();
291 | 
292 |           // ctx.save();
293 |           ctx.fillStyle = "#000";
294 |           ctx.font = 14 + "px Helvetica";
295 |           ctx.textBaseline = "hanging";
296 |           ctx.textAlign = "center";
297 |           ctx.moveTo(-30, 10);
298 |           ctx.fillText("关注下方二维码开始游戏", winW / 2, 0.18 * winH + imgH);
299 |           // ctx.restore();
300 |           // drawCode();
301 | 
302 |           var imgCode = new Image();
303 |           imgCode.src = require("../assets/images/code.jpg");
304 |           imgCode.onload = function() {
305 |             ctx.drawImage(
306 |               imgCode,
307 |               0.35 * winW,
308 |               0.25 * winH + imgH,
309 |               0.3 * winW,
310 |               0.3 * winW
311 |             );
312 | 
313 |             // 生成预览图
314 |             var img = new Image();
315 |             img.src = that.convertCanvasToImage(canvas, 1).src;
316 |             img.setAttribute("crossOrigin",'Anonymous');
317 |             img.className = "previewImg";
318 |             img.onload = function() {
319 |               that.canvasUrl = this.src;
320 |               that.startDx = that.startDx - 100;
321 |               that.transformX(that.$refs.wrap, that.startDx + "vw");
322 |             };
323 |           };
324 |         };
325 |       } else {
326 |         alert("浏览器不支持canvas！");
327 |       }
328 |     },
329 | 
330 |     // 生成n维矩阵
331 |     generateMatrix(n, dx, dy) {
332 |       var arr = [],
333 |         index = 0;
334 |       for (var i = 0; i < n; i++) {
335 |         for (var j = 0; j < n; j++) {
336 |           arr.push({ x: j * dx, y: i * dy, index: index });
337 |           index++;
338 |         }
339 |       }
340 |       return arr;
341 |     },
342 | 
343 |     shuffle(els, arr) {
344 |       this.upsetArr(arr);
345 |       for (var i = 0, len = els.length; i < len; i++) {
346 |         var el = els[i];
347 |         el.setAttribute("index", i); // 将打乱后的数组索引缓存到元素中
348 |         el.style.transform =
349 |           "translate(" + arr[i].x + "vw," + arr[i].y + "vh" + ")";
350 |       }
351 |     },
352 |     // https://www.xiabingbao.com/post/javascript/js-random-array.html
353 |     upsetArr(arr) {
354 |       //   console.log("arr", JSON.stringify(arr));
355 |       // 方法1:
356 |       return arr.sort(function() {
357 |         return Math.random() > 0.5 ? -1 : 1;
358 |       });
359 | 
360 |     },
361 |     // 置换数组(对应索引的x,y值进行交换)
362 |     swap(arr, indexA, indexB) {
363 |       // let targetArr = [];
364 |       // arr.map(item => {
365 |       //   if (item.index == indexA || item.index == indexB) {
366 |       //     targetArr.push(item);
367 |       //   }
368 |       // });
369 |       // [targetArr[0].x, targetArr[1].x] = [targetArr[1].x, targetArr[0].x];
370 |       // [targetArr[0].y, targetArr[1].y] = [targetArr[1].y, targetArr[0].y];
371 | 
372 |       // return targetArr;
373 |       // var cache = arr[indexA];
374 |       // arr[indexA] = arr[indexB];
375 |       // arr[indexB] = cache;
376 | 
377 |       // ES6的解耦交换方式： [arr[index], arr[n]] = [arr[n], arr[index]];
378 |       [arr[indexA],arr[indexB]] = [arr[indexB],arr[indexA]];
379 |     },
380 | 
381 |     // 校验是否成功方法
382 |     isTestSuccess(arr) {
383 |       return arr.every(function(item, i) {
384 |         return item.index === i;
385 |       });
386 |     },
387 |     // 将canvas转化为图片
388 |     convertCanvasToImage(canvas, quality) {
389 |       var image = new Image();
390 |       image.src = canvas.toDataURL("image/png", quality);
391 |       return image;
392 |     }
393 |   }
394 | };
395 | </script>
396 | 
397 | <!-- Add "scoped" attribute to limit CSS to this component only -->
398 | <style scoped>
399 | .wrap {
400 |   display: flex;
401 |   width: 400vw;
402 |   transition: transform 1s cubic-bezier(0.52, 0.37, 0.16, 1.32);
403 | }
404 | 
405 | div {
406 |   box-sizing: border-box;
407 | }
408 | 
409 | .btn {
410 |   display: inline-block;
411 |   padding: 10px 60px;
412 |   width: 300px;
413 |   background-color: #06c;
414 |   color: #fff;
415 |   cursor: pointer;
416 |   margin: 40px auto 10px;
417 | }
418 | #back {
419 |   margin-top: 10px;
420 | }
421 | .play-page,
422 | .result-page,
423 | .start-page,
424 | .start-page .title {
425 |   text-align: center;
426 | }
427 | .play-page,
428 | .preview-page,
429 | .result-page,
430 | .start-page {
431 |   position: relative;
432 |   width: 100vw;
433 |   height: 100vh;
434 | }
435 | 
436 | .start-page .title {
437 |   line-height: 4em;
438 |   font-size: 24px;
439 | }
440 | 
441 | .start-page .album-list {
442 |   width: 100%;
443 |   display: flex;
444 |   flex-wrap: wrap;
445 | }
446 | 
447 | .start-page .album-list .img-wrap {
448 |   margin-bottom: 0;
449 |   width: 33.33%;
450 |   height: 22vh;
451 |   overflow: hidden;
452 | }
453 | 
454 | .start-page .album-list .img-wrap.active {
455 |   border: 4px solid #f00;
456 | }
457 | 
458 | .start-page .album-list .img-wrap img {
459 |   width: 100%;
460 | }
461 | 
462 | .start-page .album-list .img-wrap .file-wrap {
463 |   position: relative;
464 |   height: 100%;
465 |   background-position: center center;
466 |   background-size: 100%;
467 |   background-repeat: no-repeat;
468 | }
469 | 
470 | .start-page .album-list .img-wrap .file-wrap::before {
471 |   content: "+";
472 |   position: absolute;
473 |   top: 50%;
474 |   left: 50%;
475 |   transform: translate(-50%, -50%);
476 |   font-size: 60px;
477 |   color: #ccc;
478 |   cursor: pointer;
479 | }
480 | 
481 | .start-page .album-list .img-wrap .file-wrap input {
482 |   position: absolute;
483 |   left: 0;
484 |   top: 0;
485 |   width: 100%;
486 |   height: 100%;
487 |   opacity: 0;
488 | }
489 | 
490 | .start-page-ft {
491 |   position: absolute;
492 |   width: 100%;
493 |   bottom: 20px;
494 |   font-size: 12px;
495 |   text-align: center;
496 | }
497 | 
498 | .start-page-ft a {
499 |   color: #06c;
500 | }
501 | 
502 | .play-page {
503 |   background-color: #4e2503;
504 | }
505 | .play-page .deloy {
506 |   padding: 10px 20px;
507 |   color: #fff;
508 | }
509 | .play-page .play-area {
510 |   position: relative;
511 |   width: 84vw;
512 |   height: 60vh;
513 |   display: flex;
514 |   flex-wrap: wrap;
515 |   margin: 20px auto;
516 |   outline: #ccc solid 4px;
517 | }
518 | 
519 | .play-page .play-area.active {
520 |   outline-color: #1f8b40;
521 | }
522 | 
523 | .play-page .play-area .piece {
524 |   position: absolute;
525 |   left: 0;
526 |   top: 0;
527 |   width: 28vw;
528 |   height: 20vh;
529 |   border: 1px solid transparent;
530 |   /* background-image: url(../assets/images/caixushen.jpg); */
531 |   background-repeat: no-repeat;
532 |   background-size: 84vw 60vh;
533 |   transition: transform 0.6s ease-in-out;
534 | }
535 | 
536 | .play-page .play-area .piece.active {
537 |   border: 3px solid red;
538 | }
539 | 
540 | .play-page .play-area .piece-0 {
541 |   background-position: 0 0;
542 | }
543 | 
544 | .play-page .play-area .piece-1 {
545 |   background-position: -28vw 0;
546 | }
547 | 
548 | .play-page .play-area .piece-2 {
549 |   background-position: -56vw 0;
550 | }
551 | 
552 | .play-page .play-area .piece-3 {
553 |   background-position: 0 -20vh;
554 | }
555 | 
556 | .play-page .play-area .piece-4 {
557 |   background-position: -28vw -20vh;
558 | }
559 | 
560 | .play-page .play-area .piece-5 {
561 |   background-position: -56vw -20vh;
562 | }
563 | 
564 | .play-page .play-area .piece-6 {
565 |   background-position: 0 -40vh;
566 | }
567 | 
568 | .play-page .play-area .piece-7 {
569 |   background-position: -28vw -40vh;
570 | }
571 | 
572 | .play-page .play-area .piece-8 {
573 |   background-position: -56vw -40vh;
574 | }
575 | 
576 | .result-page {
577 |   padding-left: 20px;
578 |   padding-right: 20px;
579 |   background-color: #2b2929;
580 | }
581 | 
582 | .result-page .success-text {
583 |   padding-top: 160px;
584 |   padding-bottom: 20px;
585 |   font-size: 36px;
586 |   color: #e4d721;
587 |   font-weight: 700;
588 | }
589 | 
590 | .result-page .total-time {
591 |   display: block;
592 |   margin-bottom: 30px;
593 |   color: #fff;
594 |   font-size: 24px;
595 | }
596 | .last-page {
597 |   position: relative;
598 | }
599 | 
600 | .last-page img {
601 |   position: absolute;
602 |   left: 0;
603 |   top: 0;
604 | }
605 | 
606 | .play-again {
607 |   position: absolute;
608 |   bottom: 10px;
609 |   left: 5px;
610 |   z-index: 10;
611 |   width: 48%;
612 | }
613 | 
614 | .share-other {
615 |   position: absolute;
616 |   bottom: 10px;
617 |   right: 5px;
618 |   z-index: 10;
619 |   width: 48%;
620 | }
621 | 
622 | .share-bg {
623 |   position: fixed;
624 |   top: 0;
625 |   width: 0;
626 |   width: 100%;
627 |   height: 100%;
628 |   background: url("../assets/images/share.png") no-repeat rgba(0, 0, 0, 0.8);
629 |   background-position: top right;
630 |   z-index: 11;
631 |   /* background-size:75%; */
632 | }
633 | </style>
634 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | Vue.config.productionTip = false
5 | 
6 | new Vue({
7 |   render: h => h(App),
8 | }).$mount('#app')
9 | 


--------------------------------------------------------------------------------