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

今天讲的主要分为以下3点：

1：画蛇头

2：动起来

3：画食物

 

一：绘制蛇头

需要写一个全局蛇头对象

//蛇头对象
var snakeHead = {
  x: 0,
  y: 0,
  color: '#ff0000',  //这里只能接受16进制 没法写red这样
  w: 20,
  h: 20
}

创建了一个sankeHead蛇头对象，并且参数为x，y(x,y轴初始坐标值，默认从(0,0)屏幕左上角绘制)

color属性是用来描绘蛇头的颜色表现

w.h两个属性是指蛇头的长宽大小。

然后编写一个draw（）方法用来绘制蛇头等对象

在onReady内部方法里写入：

    var context = wx.createContext();//构建上下文对象
    //帧数
    var frameNum = 0;

    function draw(obj){
      context.setFillStyle(obj.color);//获取设置好的颜色样式
      context.beginPath();//开始绘制
      context.rect(obj.x, obj.y, obj.w, obj.h);//绘制坐标与长宽
      context.closePath();//结束绘制
      context.fill();//绘制填充
    }

调用的时候直接调用

//绘制蛇头

draw(snakeHead);

 

 

二：让我们的蛇头动起来

我们创建一个animate()方法用来启动动画

function animate(){
      frameNum++;
      if (frameNum % 20 == 0){
        directionSet();
      }
      
      //绘制蛇头
      draw(snakeHead);
    
      wx.drawCanvas({
        canvasId:"snakeCanvas",
        actions:context.getActions()
      });
      requestAnimationFrame(animate);
    }//这个是重点，绑定了我们在index.wxml的canvas组件

调用的时候直接 animate();

然后方向控制我直接写了一个方法使之分离出来：

function directionSet(){
      switch (snakeDirection) {
        case "left":
          snakeHead.x -= snakeHead.w;
          break;
        case "right":
          snakeHead.x += snakeHead.w;
          break;
        case "down":
          snakeHead.y += snakeHead.h;
          break;
        case "top":
          snakeHead.y -= snakeHead.h;
          break;
      }
    }

 

三：绘制食物

首先有一个食物对象，我用数组定义

//食物对象(数组)

var foods = [];

然后构造食物对象

//构造食物对象
    function Food() {
      var w = rand(10,20);
      this.w = w;
      this.h = w;
      this.x = rand(this.w, windowWidth - this.w);
      this.y = rand(this.h, windowHeight - this.h);
      
      this.color = "rgb("+rand(0,255)+","+rand(0,255)+","+rand(0,255)+")";
      //内部方法 （重置食物位置颜色）
      this.reset = function (){
        this.x = rand(0,windowWidth);
        this.y = rand(0,windowHeight);
        this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";
      }
    }

这里面的rand()是重写的随机函数，具体实如下：

 function rand(min,max){
      return parseInt(Math.random()*(max-min))+min;
    }

接着就可以将食物对象一个个绘制到数组里保存了

 //绘制食物
      for(var i=0;i<foods.length;i++){
        var foodObj = foods[i];
        draw(foodObj); 
　　　　　
      }
//我初始设置了20个食物为限制数量，然后用一个
//循环保存在定义好的食物数组里

放入数组：

for (var i = 0; i < 20; i++) {
var foodObj = new Food();
foods.push(foodObj);
}

好了，今天的贪吃蛇小游戏开发分享到此为止了，咱们明天见！