vue-pinpngle

KO | EN

gitlite — search

#python #react #ai #golang #android #deep-learning #java #nodejs #windows #awesome #awesome-list #ios #openai #open-source

(★ 10)

vue拼图小游戏

vue-pinpngle 최신버젼 다운로드

// repository documentation

★ 0 (0 ratings)

# 拼图小游戏项目说明:(vue版本)

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### 拼拼乐(拼图小游戏)开发

在上班的地铁上面,某天早上看到了订阅公众号一篇文章,介绍的是一个移动端的拼图小游戏.试玩了一下,感觉还挺有意思的.于是周末抽空研究了一下.问了下作者,他用的是原生JS写的一版.我自己本身在用VUE,于是看了下游戏的大体效果,决定尝试用VUE改写一版玩一下.

于是说干就干,尝试着参考之前的项目,看了下有哪些效果.就用VUE开始改写了起来.其实这个游戏是一个很常见的拼图小游戏,就是选择一张图片,然后打乱,最后挪动图片拼成一张完整的图片,用`canvas`生成挑战结果页面,显示挑战成功~

![游戏界面](https://images.901web.com/2020-11-18-611605665816_.pic_hd.jpg)

![开始游戏](https://images.901web.com/2020-11-18-621605665817_.pic_hd.jpg)

![等级选择](https://images.901web.com/2020-11-18-631605665822_.pic_hd.jpg)

![挑战结果](https://images.901web.com/2020-11-18-641605666371_.pic_hd.jpg)

试玩一下基本就知道具体的流程啦~

先贴上试玩游戏二维码,扫码即可开始调整哦.

[挑战地址](http://pinpinle.901web.com/)

![二维码地址](https://images.901web.com/2020-11-18-661605666858_.pic.jpg)

本项目纯属娱乐,作为自己的一个业余项目在开发.另外在试玩的过程中.分割图片(3*3)的模块时候,比较简单,这种情况又弄了另外一个版本.

**相邻的元素才可以移动**

做了一个判断,重新部署了一个版本.(`相邻元素才可以移动版本`)

[挑战地址](http://pinpinle-step1.901web.com/)

![二维码地址](https://images.901web.com/2020-11-18-671605667550_.pic.jpg)

代码是很无趣的.要用无趣的代码做点有趣好玩的东西出来.哈哈~

当然,在开发过程中有很多JS基础知识,也遇到很多问题,例如图片切割,打乱排序,生产canvas结果页面,切换等级页面样式,倒计时等等.

项目做的比较粗糙,也存在很多问题.遇到问题慢慢的尝试解决,并慢慢的积累经验,做这种小游戏还是很考验基本功的.希望也能巩固自己的JS基础知识,提升能力.