📌个人主页：个人主页
​🧀 推荐专栏：小程序开发成神之路 --【这是一个为想要入门和进阶小程序开发专门开启的精品专栏！从个人到商业的全套开发教程，实打实的干货分享，确定不来看看？ 😻😻】

一、引言

2022卡塔尔世界杯，正是由于这可能是梅西、C罗、内马尔等一系列球星的最后一届世界杯之旅。大家都将其称为诸神黄昏

一手梦幻开局，以及到各路黑马争相亮相。从阿根廷爆冷，再到巴西跟阿根廷的点球大战，过程是艰辛的，结局也是悲惨的，内马尔、C罗止步于八强。一开始还幻想着梅西C罗到决赛相遇，青春就无悔了！

现实总是残酷的，既然没有改写历史的本领，至少我有创造新故事的画笔。为完成这已经破灭的幻想，那就拿起手中的键盘，现实没有踢成，那就在我的代码世界踢吧！

以此小游戏纪念2022疯狂的12月，纪念诸神黄昏的卡塔尔世界杯！

二、效果及规则

这是一个完美配置移动端的小游戏，旨在还原世界杯赛场上精彩激烈的攻防大战：

• 用户通过鼠标点击控制我方球员的位置
• 找准时机将我方的足球射进到对方的球门
• 要注意，当我方的足球触碰到对方球员，足球会被拦截且失效。
• 当我方球员碰到对方球员表示红牌罚下，并导致游戏直接结束并失败。

三、制作思路及方案

3.1 素材准备

首先要体现这是一个足球类型的游戏，三个关键点，缺一都不可！

(1)疯狂滚动的足球

对于小程序端这样的应用来说，它是一个只能让我们以平面的角度去体验UI效果的平台，所以，要是实现一个在平面上能疯狂滚动的足球，只是有简单的足球图片是完全不够的，如果只是用简单饿足球图片来实现简单的位移，就可就是太目不忍视了！

所以我觉得:高低都得让足球动起来，而且是很疯狂的那种动起来！更重要的是还要给我带点三维的效果！要实现那种从空中俯视真个球场的真实感！

• 于是我先百度一手足球图片，然后找了一张最为高清的！

• 然后就是让他动起来了，忽然想起来AE可以实现这个魔法，然后毫不犹豫，直接打开魔法，导入照片，K上关键帧…不，还是用表达式吧，快准狠！

- 最后，我们就可以得到如下效果：

(2) 广阔且完整的绿茵场

老规矩，发现网上竖版绿茵场的素材真的是少的可怜，就更别提这种色调柔和，切合实际的效果素材了。

• 兜兜转转，终于找到一个横板的绿茵场，但是不能为我所用啊！我们的手机是竖着看的不是横着的呀！
• 所以，我又要借助PS魔法，直接导入，互换宽高即可！
  

(3) 帅气且清晰的球员卡

球员信息，这个也是最好弄的了，直接百度，看到这个球星排行榜，这上面的照片都是一打一的帅气。

2022世界杯受欢迎球员排名（百度指数）

毫不犹豫地打开网址，然后直接F12,挨个球员检查水表！

最终，你就会收获到一个大礼包的帅哥。

3.2 技术交互逻辑设计

(1) 球的发射

绿茵场本质就是一个坐标轴，我们的球要发射，以及球员要移动，都是依靠改变元素的(x,y)坐标值来实现的，重要的是我们要实现元素的持续移动，这个时候我们需要借助setInterval这个定时器来定时改变球的坐标，并根据球与球员之间的坐标关系来判断球的展示和路劲移动。

	this.bulletMoveTime = setInterval(function() {that.bulletMove();}, 10)

(2) 对方球员的拦截

球员的拦截功能主要分为两个部分：一方面是控制球员的坐标不能超出绿茵场，与此同时，要判断球员的坐标和球的坐标是否有交集。

peerMove() {var height = uni.getSystemInfoSync().windowHeight;var width = uni.getSystemInfoSync().windowWidth;this.peerList.forEach(function(item, index) {if(item.direction == 'right'){if(width - item.x >=0 && width - item.x <=10){item.x -= Math.floor(Math.random() * uni.getSystemInfoSync().windowWidth)item.direction = 'left'// item.y -= Math.floor(Math.random() * uni.getSystemInfoSync().windowHeight)}else{item.x += 1item.y += 1; //位移距离}}else{if(item.x <=0 && item.x <=width){item.x += Math.floor(Math.random() * uni.getSystemInfoSync().windowWidth)item.direction = 'right'// item.y -= Math.floor(Math.random() * uni.getSystemInfoSync().windowHeight)}else{item.x -= 1item.y += 1; //位移距离}}if ( height - item.y <= 20) {item.y -= Math.floor(Math.random() * uni.getSystemInfoSync().windowHeight)}})},

四、部署教程

(1) 需准备的软件

项目是基于vue 2.0语法+uni-app框架所实现，不是微信原生语法，同样是简单易上手，只会vue或者只会微信原生开发都可以轻易上手！

使用vue语法并并且结合uni-app框架的好处在于：通过这一套代码，我们可以实现多端运行，除了 微信小程序，各类小程序同样支持！

运行项目我们需要准备：
HBuilderX开发工具

微信开发者工具

(2) 项目准备

• 打开Hbuilder X软件，然后随手新建一个uniapp项目
  
• 在page目录下新建一个vue文件

• 在新建完成文件之后，再将本文第五章的源码部分复制到vue文件中
  （1）将html页面元素放入到