找回密码
 立即注册

扫一扫,访问微社区

查看: 3967|回复: 1

微信小程序demo:贪食蛇;Canvas绘制

[复制链接]
发表于 2017-3-3 12:39:10 | 显示全部楼层 |阅读模式





[mw_shl_code=html,true]var nodeWH = 10
var direction = 'right'
var timer = null
var nodes=[]
var food = null
var context = wx.createContext()
var lastPoint = null
var isGameOver = false
var that
var score = 0

function Node(x,y){
  this.x = x;
  this.y = y;
}

function createSnake(){
  nodes.splice(0, nodes.length)
  for (var i = 4; i >= 0; i--) {
    var node = new Node(nodeWH * (i + 0.5), nodeWH * 0.5)
    nodes.push(node);
  }
}

function createFood(){
  var x = parseInt(Math.random() * 24) * nodeWH + nodeWH * 0.5
  var y = parseInt(Math.random() * 34) * nodeWH + nodeWH * 0.5

  //如果食物的坐标在蛇身上,则重新创建
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes
    if (node.x == x && node.y == y) {
      createFood()
      return
    }
  }
  food = new Node(x,y)
}

//绘制蛇与食物
function draw(){
  for (var i = 0; i < nodes.length; i++) {
    var node = nodes
    if (i == 0) {
      context.setFillStyle('#ff0000')
    } else {
      context.setFillStyle('#000000')
    }
    context.beginPath()
    context.rect(node.x, node.y, nodeWH, nodeWH)
    context.closePath()
    context.fill()
  }

  context.setFillStyle('#0000ff')
  context.beginPath()
  context.rect(food.x, food.y, nodeWH, nodeWH)
  context.closePath()
  context.fill()
   
  wx.drawCanvas({
    canvasId: 'snakeCanvas',
    actions: context.getActions()
  })
}

//游戏结束
function gameOver(){
  isGameOver = true
  clearInterval(timer)
  wx.showModal({
    title:'Game Over',
    content:'总得分:'+ score +',不服再来?',
    confirmText:'不服',
    success:function(e){
      if (e.confirm == true) {
        startGame()
      } else {
        console.log('cancel')
        that.setData({
          btnTitle:'开始'
        })
      }
    }
  })
}

//是否吃到食物
function isEatedFood(){
  var head = nodes[0]
  if (head.x == food.x && head.y == food.y) {
    score++
    nodes.push(lastPoint)
    createFood()
  }
}

//是否撞到墙壁或者撞到自己的身体
function isDestroy(){
  var head = nodes[0]
  for (var i = 1; i < nodes.length; i++) {
    var node = nodes
    if (head.x == node.x && head.y == node.y) {
      gameOver()
    }
  }
  if (head.x < 5 || head.x > 245) {
    gameOver()
  }
  if (head.y < 5 || head.y > 345) {
    gameOver()
  }
}

function moveEnd(){
  isEatedFood()
  isDestroy()
  draw()
}

function move(){
    lastPoint = nodes[nodes.length - 1]
    var node = nodes[0]
    var newNode = {x: node.x, y: node.y}
    switch (direction) {
      case 'up':
        newNode.y -= nodeWH;
      break;
      case 'left':
        newNode.x -= nodeWH;
      break;
      case 'right':
        newNode.x += nodeWH;
      break;
      case 'down':
        newNode.y += nodeWH;
      break;
  }
  nodes.pop()
    nodes.unshift(newNode)
    moveEnd()
}

function startGame() {
  if (isGameOver) {
    direction = 'right'
    createSnake()
    createFood()
    score = 0
    isGameOver = false
  }
  timer = setInterval(move,300)
}
     
Page({
  data:{
    btnTitle:'开始'
  },
  onLoad:function(){
    that = this
    createSnake()
    createFood()
    draw()
  },
  changeDirection:function(e){
    if ('开始' == this.data.btnTitle) return
    var title = e.target.id
    if (title == 'down' || title == 'up') {
        if (direction == 'up' || direction == 'down') return
    } else if (direction == 'left' || direction == 'right') return
    direction = title;
  },
  startGame:function() {
    var title = this.data.btnTitle
    if (title == '暂停') {
      clearInterval(timer)
      this.setData({
        btnTitle : '开始'
      })
    } else {
      startGame()
      this.setData({
        btnTitle : '暂停'
      })
    }
  }
})[/mw_shl_code]


游客,如果您要查看本帖隐藏内容请回复

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有账号?立即注册

×

0

主题

408

回帖

600

金钱

新人求带

积分
0
发表于 2020-4-24 14:24:27 | 显示全部楼层
我有流量,你有产品,我们就可以合作,有意的个人开发者朋友可以联系微,信,号j i m 2 0 1 8 0 6 8 8,详聊
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|手机版|小黑屋|微信小程序开发|教程|文档|资源汇总_即速论坛 ( 粤ICP备14097199号-1  

GMT+8, 2024-3-28 17:56 , Processed in 0.105494 second(s), 25 queries .

Powered by Discuz! X3.5

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表