微信小程序之贪吃蛇小游戏开发第一天

大家好，今天给大家带来为期三天的微信小程序之贪吃蛇小游戏开发过程解析。

今天主要分享的是三点：

　　1：创建一个微信小程序项目

　　2：学会使用canvas画布

　　3：能够实现在模拟器上进行上下左右移动判别

下面进入今天的正题：

　　第一步：创建项目

　　　　去到微信公众号下载微信开发者工具后，打开下载好的开发编辑器，选择新建项目

          在这个界面里，输入项目存放目录，AppID(这个需要去到微信公众号登陆自己的账号查找),项目名称

创建好项目后：

删除不必要的文件，就留下如图所示的文件就可以了

然后呢，去到app.json文件修改相关配置信息：

 

app.js文件清空就可以了 index.js 和index.wxss,index.wxml

是我们主要开发文件（清空原始内容）

 

　　第二步：编写canvas画布

　　　　打开index.wxml文件插入标签组件canvas就可以引入一个画布了（具体代码如下）

<canvas canvas-id='snakeCanvas' style='width:100%;height:100%;' bindtouchstart='canvasStart'

bindtouchmove='canvasMove' bindtouchend='canvasEnd'></canvas>

 

解析：

canvas-id：是必须的参数，用来绑定与识别一个canvas

style：内部样式

bindtouchstart：触摸事件开始函数绑定（bindtouchmove，bindtouchend同理）

然后index.wxss文件写一个整体样式高度100%

 

　　第三步：实现在模拟器上进行上下左右移动判别功能

 

 这一步是重点了，实现贪吃蛇上下左右移动的逻辑判别。

在Index.js文件中写入如下代码：

//index.js
//手指按下时的坐标
var startX = 0;
var startY = 0;

//手指在canvas上移动的坐标
var moveX = 0;
var moveY = 0;

//移动位置跟开始位置差值
var X =0;
var Y = 0;

//手指方向
var direction = null;

//蛇移动方向
var snakeDirection = "right";


Page({
  canvasStart:function(e){
    startX = e.touches[0].x;
    startY = e.touches[0].y;
  },
  canvasMove:function(e){
    moveX = e.touches[0].x;
    moveY = e.touches[0].y;

    X = moveX - startX;
    Y = moveY - startY;
　　
　　//用if判断移动坐标是上下左右哪个方向

    if(Math.abs(X) > Math.abs(Y) && X > 0){
     console.log("right");
    }else if(Math.abs(X) > Math.abs(Y) && X < 0){
      console.log("left");
    }else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      console.log("bottom");  //这里很奇怪，是我数学坐标系没学好吗？
　　　　//明明Y轴正坐标是向上才对啊
    }else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      console.log("top");
    }
  },
  canvasEnd:function(){
    snakeDirection = direction;
  }
})

打开控制台，控制鼠标在模拟器上点击移动，可以看到控制台输出如下：

分别进行上下左右点击移动

 

好了  今天的分享到此为止了 咱们明天见！