jQuery小游戏

jQuery小游戏（一）

嘻嘻，今天我们来写个jquery小游戏吧

1. 首先，我们准备一下写小游戏需要准备的佩饰，如果：图片、音乐、搞怪的小表情

这里我准备了一些游戏中需要涉及到的图片

2. 游戏中使用到的方法

• eval() 函数：用于计算传入字符串形式的 JavaScript 代码并执行它。当调用时不带任何对象前缀时，默认是在全局作用域下运行；而通过 window.eval() 显式指定，则可以在当前窗口上下文中评估表达式

• window.requestAnimationFrame：这里强调一下为什么使用这个办法，其实setInterval也有定时的作用，但是不同之处在于setInterval需指定时间再执行，window.requestAnimationFrame()则推迟到浏览器下一次重绘时就执行回调。重绘通常是 16ms 执行一次，不过浏览器会自动调节这个速率，比如网页切换到后台 Tab 页时，requestAnimationFrame()会暂停执行。需要注意的是：若是某个函数会影响到网页的布局调整，一般就放在window.requestAnimationFrame()里面执行。 取消操作使用cancelAnimationFrame()方法，下面代码为具体实操：

//requestAnimationFrame效果(function zhouqi(time) {console.log(time,Date.now())render();zhou = requestAnimationFrame(zhouqi);//如果left等于50 停止动画if(left == 50){cancelAnimationFrame(zhou)}})

• window.cancelAnimationFrame()：用于取消先前通过的 window.requestAnimationFrame()方法请求的动画帧回调函数的方法，上面代码也有提及到，在使用 window.requestAnimationFrame()方法创建动画时，通常会把返回的ID存储起来，以便在需要时使用window.cancelAnimationFrame()方法取消动画
• String.format ： Java 中用于格式化字符串的一个方法， String.format 允许你通过占位符来创建一个格式化的字符串。使用 String.format 可以将各种类型的数据（如整数、小数、字符串等）以指定的格式组合成一个字符串

var link, jsGame; (function() {var e = window.eval,t = function(e, t, n) {var r = n || {};if (t) {var i = function() {};i.prototype = t.prototype,e.prototype = new i,e.prototype.constructor = e,e.prototype.superClass = t.prototype,//javascript的superclass继承i = null}for (var s in r) e.prototype[s] = r[s];return r = null, e};window.requestAnimationFrame = function() {return window.requestAnimationFrame || window.webkitRequestAnimationFrame ||   window.mozRequestAnimationFrame || window.oRequestAnimationFrame ||window.msRequestAnimationFrame || window.setTimeout} (),//这段代码是用来兼容不同浏览器的requestAnimationFrame 方法，requestAnimationFrame 用于在下一次浏览器重绘之前执行指定的函数，以实现流畅的动画效果。首先会尝试获取浏览器原生的requestAnimationFrame 方法，如果浏览器不支持，则依次尝试获取其他浏览器的前缀版本，若依旧不支持，则使用setTimeout模拟实现，这样可以确认在不同情况下都能正常运行requestAnimationFrame 方法window.cancelAnimationFrame = function() {//同上面解释类似return window.cancelAnimationFrame || window.webkitCancelAnimationFrame ||window.mozCancelAnimationFrame || window.oCancelAnimationFrame ||window.msCancelAnimationFrame || window.clearTimeout} (),String || (String = {}),String.format || (String.format = function() {if (arguments.length == 0) return null;//当参数个数为0即空数组         //arguments类数组对象var e = arguments[0] || "", t;for (var n = 1, r = arguments.length; n < r; n++) t = new RegExp("\\{" + (n - 1)+"\\}","gm"),e = e.replace(t, arguments[n]);return t = null, e}),

• Array.prototype ： 所有的数组实例都继承于 Array.prototype，和其他构造函数一样，可以通过Array和prototype属性上的方法来给所有数组实例增加方法

String.getByteLength || (String.getByteLength = function(e) {var t, n = 0, r = e || "", i = r.length;for (t = 0; t < i; t++) r.charCodeAt(t) >= 0 & r.charCodeAt(t) <= 255 ? n += 1 : n += 2;return t = r = i = null, n});if (!Array || !Array.prototype) Array.prototype = {};Array.prototype.indexOfAttr = function(e, t) {var n = (typeof e).toLowerCase(), r = -1;for (var i = 0, s = this.length; i < s; i++) if (n == "string" && this[i][e] == t || n =="number"&& this[i] == e) {r = i;break}

• canvas： HTML5的新增元素

<canvas id="zhouqi"></canvas> // 如果没有设置宽高，canvas会自动创建一个 300 * 150 的画布（单位默认为px）
canvas.width = 300    // 设置画布宽度
canvas.height = 300   // 设置画布高度
const canvas = document.getElementById('zhouqi')  // 获取画布节点
const ctx = canvas.getContext('2D') // 获取 2D 绘图上下文对象

return n = null, r};var n = {canvas: {id: "linkScreen",defaultId: "linkScreen",defaultFont: "12px Arial",defaultWidth: 240,defaultHeight: 320,defaultColor: "rgb(0, 0, 0)",bgColor: "#000",cavansDoms: [],ctxs: [],device: "",fps: 1,touch: !1,zoom: 1},system: {loadRes: null,pageLoad: null,menu: null,run: null,runFn: function() {},rafRun: null,stop: null,over: null,zone: null,active: null,lastDate: Date.now(),timeout: 30,isPause: !1,gameFlow: -1,loadedImageToGameFlow: -1,zoneArgs: null,activeArgs: null,spendTime: 0,loadResTimer: null,playTimer: null},event: {key: 0,keys: {up: !1,down: !1,left: !1,right: !1,a: !1,b: !1,c: !1,menu: !1,quit: !1},lastKey: {up: !1,down: !1,left: !1,right: !1,a: !1,b: !1,c: !1,menu: !1,quit: !1},pressedKey: {up: !1,down: !1,left: !1,right: !1,a: !1,b: !1,c: !1,menu: !1,quit: !1},keyPressCtrl: {up: !0,down: !0,left: !0,right: !0,a: !0,b: !0,c: !0,menu: !0,quit: !0},keyDownGo: !1,keyUpGo: !1,keyPressedGo: !1,keyDownCallBack: null,keyUpCallBack: null,orientationChange: null,touchStart: null,touchEnd: null,touchMove: null,touchCancel: null,clickCallBack: null,mouseDownCallBack: null,mouseUpCallBack: null,mouseMoveCallBack: null,focused: !1,pageFocusCallBack: null,pageUnFocusCallBack: null,swipeCallBack: null,pageOffX: 0,pageOffY: 0,pageStarOffX: 0,pageStarOffY: 0,swipeDate: null,swipeTimeout: 200,swipeRange: 50},image: {imgs: {},imgObjs: [],initImgs: {},asyncImgObjs: {},imgCount: 0,countLoaded: 0,version: "",inited: !1},audio: {audios: {}},ajax: {xhrObj: null,pool: [],poolLength: 5,date: null,isTimeout: !1,param: {type: "get",data: null,dataType: "json",url: "",xhr: null,timeout: 5e3,before: function(e) {},success: function(e, t) {},error: function(e, t) {},complete: function(e) {}}},}

• fillStyle： 用于图形内部的颜色
• fillRect： 用于绘制一个填充的矩形
• strokeStyle： 用于设置图形轮廓的颜色
• drawImage： 用于绘制图像

request: {gets: []},buttonLayout: {buttons: [],Button: t(function(e) {this.id = e.id,this.value = e.value,this.x = e.x,this.y = e.y,this.width = e.width,this.height = e.height,this.bgColor = e.bgColor,this.bgStroke = e.bgStroke,this.stroke = e.stroke,this.font = e.font,this.imageId = e.imageId,this.sx = e.sx,this.sy = e.sy,this.color = e.color,this.hx = e.hx,this.hy = e.hy,this.hColor = e.hColor,this.dex = e.dex,this.dey = e.dey,this.deColor = e.deColor,this.hided = e.hided,this.disabled = e.disabled,this.path = e.path,this.hovered = !1,this.repeated = !1,this.pressed = !1,this.released = !1,this.goned = !1,this.cacheId = "buttonLayoutCache_" + this.id,this.setDelay(e.delay).refresh()},null, {refresh: function() {m.canvas.pass(this.cacheId, this.width * 3, this.height),this.imageId == "" ? (this.bgColor != "" && m.canvas.fillStyle(this.bgColor).fillRect(0, 0, this.width, this.height).fillRect(this.width, 0, this.width, this.height).fillRect(this.width * 2, 0, this.width, this.height), this.bgStroke != "" && m.canvas.strokeStyle(this.bgStroke).strokeRect(1, 1, this.width - 2, this.height - 2).strokeRect(this.width + 1, 1, this.width - 2, this.height - 2).strokeRect(this.width * 2 + 1, 1, this.width - 2, this.height - 2)) : m.canvas.drawImage(this.imageId, this.sx, this.sy, this.width, this.height, 0, 0, this.width, this.height).drawImage(this.imageId, this.hx, this.hy, this.width, this.height, this.width, 0, this.width, this.height).drawImage(this.imageId, this.dex, this.dey, this.width * 2, this.height, this.width * 2, 0, this.width, this.height);if (this.value != "") {var e = m.canvas.font(this.font).measureText(this.value),t = this.width - e.width >> 1,n = (this.height - e.height >> 1) + parseInt(this.font) - 2;this.stroke != "" && m.canvas.fillStyle(this.stroke).fillText(this.value, t - 1, n).fillText(this.value, t, n - 1).fillText(this.value, t + 1, n).fillText(this.value, t, n + 1).fillText(this.value, t + this.width - 1, n).fillText(this.value, t + this.width, n - 1).fillText(this.value, t + this.width + 1, n).fillText(this.value, t + this.width, n + 1).fillText(this.value, t + this.width * 2 - 1, n).fillText(this.value, t + this.width * 2, n - 1).fillText(this.value, t + this.width * 2 + 1, n).fillText(this.value, t + this.width * 2, n + 1),m.canvas.fillStyle(this.color).fillText(this.value, t, n).fillStyle(this.hColor).fillText(this.value, t + this.width, n).fillStyle(this.deColor).fillText(this.value, t + this.width * 2, n),e = t = n = null}return m.canvas.pass(),this},show: function() {return this.hided = !1,this},hide: function() {return this.hided = !0,this},disable: function(e) {return this.disabled = e,this},setPath: function(e, t) {return this.setDelay(t).path = e || [],this},endPath: function() {return this.path.length == 0},gone: function(e, t) {return this.setPath(e, t).goned = !0,this},setDelay: function(e) {return this.delay = e || 0,this.delayDate = null,this.delay > 0 && (this.delayDate = Date.now()),this},action: function() {if (this.hided) return this;this.delayDate && Date.now() - this.delayDate >= this.delay && (this.delayDate = null);if (!this.delayDate && this.path.length > 0) {var e = this.path.shift();this.x += e[0],this.y += e[1],e = null}return this},render: function() {return this.hided ? this: (m.canvas.drawCache(this.cacheId, this.hovered ? this.width: this.disabled ? this.width * 2 : 0, 0, this.width, this.height, this.x, this.y, this.width, this.height), this)},disposed: function() {return this}})}},

r = {canvas: {context: {base: 0},graphics: {HCENTER: 1,VCENTER: 2,LEFT: 4,RIGHT: 8,TOP: 16,BOTTOM: 32,ANCHOR_LT: 20,ANCHOR_LV: 6,ANCHOR_LB: 36,ANCHOR_HT: 17,ANCHOR_HV: 3,ANCHOR_HB: 33,ANCHOR_RT: 24,ANCHOR_RV: 10,ANCHOR_RB: 40},trans: {TRANS_MIRROR: 2,TRANS_NONE: 0,TRANS_ROT90: 5,TRANS_ROT180: 3,TRANS_ROT270: 6,TRANS_MIRROR_ROT90: 7,TRANS_MIRROR_ROT180: 1,TRANS_MIRROR_ROT270: 4}},event: {key: {up: 38,down: 40,left: 37,right: 39,a: 90,b: 88,c: 67,menu: 49,quit: 50}},system: {gameFlowType: {menu: 0,run: 1,stop: 2,over: 3,zone: 4,active: 5,loadImage: 6,loadedImage: 7}}},

• getOffsetX：指 offsetX 属性，是一个只读属性，表示触发事件的位置相对于目标元素内边距边缘 (padding edge) 的 X 坐标位置。如果事件发生在子元素上，则计算的是相对于最近的有定位（position 不为 static）祖先元素的偏移量；该属性属于鼠标事件对象的一部分
• changedTouches：说到changedTouches，那需要提及的就是移动端滑屏touch事件，刚开始触摸事件touchstart、touchmove和touchend是苹果操作系统Safari浏览器新添加的事件；主要是IOS大多设备没有鼠标及键盘，所以在移动Safari浏览器开发交互性网页时，PC端的鼠标及键盘事件是远远不够的；接下来看看代码中应用到的touch事件吧

• touches：当前位于屏幕上的所有手指触摸点的一个列表
• targetTouches：当前元素对象上所有触摸点的列表
• changedTouches：涉及当前事件的触摸点的列表
  每个触摸点对应的Touch都有三对重要的属性：（clientX/clientY）、（pageX/pageY）、（screenX/screenY）
e.changedTouches.length表示获取手指的个数
  e.changedTouches[0].pageX表示获取坐标

i = {getCanvasDom: function() {var e;return function() {return e || (e = m.getDom(n.canvas.defaultId)),e}} (),getOffsetX: function(e) {return e.offsetX || (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientX - i.getCanvasDom().offsetLeft: e.clientX - i.getCanvasDom().offsetLeft) || 0},getOffsetY: function(e) {return e.offsetY || (e.changedTouches && e.changedTouches[0] ? e.changedTouches[0].clientY - i.getCanvasDom().offsetTop: e.clientY - i.getCanvasDom().offsetTop) || 0},

今天的内容有些多，我们先消化这些吧，后面的下一次继续😜😜😜