微信小程序--超简单贪吃蛇

上代码：

tan.js

// pages/tan/tan.js
var startX=0;
var startY=0;
var moveX = 0;
var moveY = 0;
//移动位置和开始位置的坐标差值
var  X=0;
var Y =0;
//蛇头的对象
var snakeHead={x:0,y:0,color:"red",w:20,h:20
}
//蛇身对象数据
var snakeArr=[];
//方向
var direction ="right";
var directio=null;
//食物数组
var foodArr=[];
//窗口宽高
var windowWidth=0;
var windowHeight=0;
//撞上为true
var bool=true;
//记录吃的食物数
var foodNum=0;
Page({//按下获取坐标touchstart:function(e){startX = e.touches[0].x;startY = e.touches[0].y;},touchmove:function(e){moveX = e.touches[0].x;moveY = e.touches[0].y;X=moveX - startX;Y=moveY - startY;if(Math.abs(X)>Math.abs(Y)&&X>0){directio="right"}else if(Math.abs(X)>Math.abs(Y)&&X<0){directio = "left"}else if(Math.abs(Y)>Math.abs(X)&& Y>0){directio = "bottom"}else if(Math.abs(Y)>Math.abs(X)&&Y<0){directio = "top"}direction = directio;},onReady:function(){//获取画布上下文var context = wx.createCanvasContext("snakCanvas",this);//帧数var num=0;function draw(obj){context.setFillStyle(obj.color);context.beginPath();context.rect(obj.x, obj.y, obj.w, obj.h);//关闭路径context.closePath();//填充context.fill();}//碰撞函数 obj1蛇 obj2 食物对象function collide(obj1,obj2){var l1 = obj1.x;var r1 = l1 + obj1.w;var t1 = obj1.y;var b1 = t1 + obj1.h;var l2 = obj2.x;var r2 = l2 + obj2.w;var t2 = obj2.y;var b2 = t2 + obj2.h;if(r1>l2 && l1<r2 && b1>t2 && t1<b2){return true;}else{return false;}}function animation(){if(num==1){console.log(bool)}if (num % 10 == 0) {//向蛇身体添加最新的位置snakeArr.push({x: snakeHead.x,y: snakeHead.y,w: 20,h: 20,color: "#00ff00"});if (snakeArr.length>foodNum){snakeArr.shift()}switch (direction) {case "right":snakeHead.x += snakeHead.w;if (Math.abs(snakeHead.x) >= windowWidth && snakeHead.x>0){snakeHead.x = 0;}break;case "left":snakeHead.x -= snakeHead.w;if (Math.abs(snakeHead.x+20) == 0 ) {snakeHead.x = windowWidth;}break;case "top":snakeHead.y -= snakeHead.h;if (snakeHead.y+20<=0){snakeHead.y = windowHeight;}console.log(windowHeight)//  console.log(snakeHead.y)break;case "bottom":snakeHead.y += snakeHead.h;if (snakeHead.y >= windowHeight){snakeHead.y =0;}break;}}num++;//绘制蛇头draw(snakeHead);//绘制蛇身for (var i = 0; i < snakeArr.length;i++){var snake = snakeArr[i]draw(snake);}//绘制食物for (var i = 0; i < foodArr.length; i++) {var food = foodArr[i];draw(food);if(collide(snakeHead,food)){foodNum++;//如果碰到食物,那么该食物就重新随机生成       bool=true;food.x = rand(0, windowWidth);food.y = rand(0, windowHeight);food.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255) + ")";var w = rand(10, 20);food.w = w;food.h = w;draw(food);}else{bool=false;}}requestAnimationFrame(animation)wx.drawCanvas({canvasId:"snakCanvas",actions:context.getActions()})}//随机数function rand(max,min){return parseInt(Math.random() * (max - min) + min)}var res = wx.getSystemInfoSync()windowWidth = res.windowWidth;windowHeight = res.windowHeight;//食物对象function Food(){this.x = rand(0, windowWidth);this.y = rand(0, windowHeight);var w =rand(10,20);this.w=w;this.h=w;this.color = "rgb(" + rand(0, 255) + "," + rand(0, 255) + "," + rand(0, 255)+")";}for (var i = 0; i < 20; i++) {var food = new Food();foodArr.push(food);}animation()}})

tan.wxml

<canvas canvas-id="snakCanvas" style="width:100%;height:100%;background-color:#ccc" bindtouchstart="touchstart" bindtouchmove="touchmove"></canvas>

tan.wxss

/* pages/tan/tan.wxss */
Page{height: 100%
}

效果图：真的超级简单简陋的

微信小程序--超简单贪吃蛇相关推荐

python小程序贪吃蛇_微信小程序实现的贪吃蛇游戏【附源码下载】
本文实例讲述了微信小程序实现的贪吃蛇游戏.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: 界面布局 pages/snake/snake/snake.wxml: snake 得分 ...
【微信小程序系列】微信小程序超简单教程，基本语法，获取用户基本数据信息，实现对云数据库的增删改查及小程序外部api的引用示例（附源码）
[微信小程序系列]微信小程序超简单教程小程序项目结构静态页面的构成 HTML:结构 css:样式 js:行为小程序页面全部存放在pages, 而且pages目录只能存放页面页面包括4个文件, ...
微信小程序最简单的轮播图
小程序轮播图今天给大家分享一个在微信开发者工具开发微信小程序的简单案例--轮播图(只用wxml和wxss) 话不多说,直接上代码!!! 效果图 WXML代码基本属性介绍 <!-- indic ...
微信小程序：简单舒服新UI装逼制作神器
这是一款装逼神器小程序源码内包含了N种模板制作,另外并有大分类另外小编还给添加了几个流量主广告,包含了每一个页面都覆盖了而且流量主还不是单一种: Banner 激励视频视频广告多格子广告横 ...
微信小程序canvas简单使用
微信小程序canvas简单使用 index.wxml文件 index.js文件效果图 index.wxml文件 <canvas type="2d" id="can ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
微信小程序制作简单的商品列表页，实现价格求和
微信小程序制作简单的商品列表页,实现价格求和准备工作 1.node.js 2.微信开发者工具目录结构客户端代码实现 index.wxml <view class="contain ...
微信小程序的简单介绍
微信小程序的简单介绍 1.与HTML的区别 HTML 微信小程序 <div></div> <view></view> <h1></h1 ...
微信小程序设置简单的监听器（转载）
微信小程序设置简单的监听器创建一个watch.js文件 /*** 设置监听器 watch.js*/ export function setWatcher(page) {let data = page ...

微信小程序--超简单贪吃蛇

微信小程序--超简单贪吃蛇相关推荐

最新文章

热门文章