jQuery小游戏（二）

jQuery小游戏（二）

今天是新年的第二天，本人在这里祝大家，新年快乐，万事胜意💕

紧接jQuery小游戏（一）的内容，我们开始继续往下咯😜

1. 游戏中使用到的方法

• keydown：当键盘按下时，立刻被触发；如果按住不放的话，会重复触发此事件，keydown()方法的参数是回调函数，当keydown事件触发时运行回调函数。一般keydown与keyup配合使用，下面会讲到keyup，说到keydown，我们会联想到另外一个事件keypress（当用户按下键盘上的字符键时触发，如果按住不让的话，会重复触发此事件），发生keypress事件意味着按下的键会影响到屏幕中文本的显示
• keyup：当键盘按下，再次抬起时，被触发；在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，与键盘上的一个特定的键对应。对数字、字母键，keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同

需要注意的是：这三个键盘事件依次顺序为：keydown->keypress->keyup

• orientationchange：便于开发者进行设备的判断，是处于垂直模式还是水平模式

• 0：表示垂直模式
• 90：表示左转水平模式(主屏幕键在右侧)
• -90：表示右转水平模式(主屏幕键在左侧)
  当用户旋转设备改变了模式，就会触发orientationchange事件。但 event对象上没有暴露任何有用的信息，这是因为相关信息都可以从 window.orientation属性中获取；所有iOS设备都支持orientationchange事件和window.orientation属性；因为orientationchange事件被认为是window事件，所以也可以通过给元素添加 onorientationchange 属性来指定事件处理程序

keydown: function(e) {var t = i.checkKey(e.keyCode);n.event.keyDownGo && n.event.keys[t] != undefined && (n.event.keys[t] = !0),n.event.keyUpGo && n.event.lastKey[t] != undefined && (n.event.lastKey[t] = !1),n.event.keyPressCtrl[t] && n.event.keyPressedGo && (n.event.pressedKey[t] != undefined && (n.event.pressedKey[t] = !0), n.event.keyPressCtrl[t] = !1),n.event.keyDownCallBack != null && n.event.keyDownCallBack(e),t = null},keyup: function(e) {var t = i.checkKey(e.keyCode);n.event.keyDownGo && n.event.keys[t] != undefined && (n.event.keys[t] = !1),n.event.keyUpGo && n.event.lastKey[t] != undefined && (n.event.lastKey[t] = !0),n.event.keyPressedGo && (n.event.pressedKey[t] != undefined && (n.event.pressedKey[t] = !1), n.event.keyPressCtrl[t] = !0),n.event.keyUpCallBack != null && n.event.keyUpCallBack(e),t = null},orientationchange: function(e) {n.event.orientationChange != null && n.event.orientationChange(e)},swipeStart: function(e, t) {n.event.swipeCallBack != null && (n.event.swipeDate = Date.now(), n.event.pageStarOffX = e, n.event.pageStarOffY = t)},swipeSuccess: function(e, t) {if (n.event.swipeDate) {if (Date.now() - n.event.swipeDate < n.event.swipeTimeout) if (Math.abs(e - n.event.pageStarOffX) >= n.event.swipeRange || Math.abs(t - n.event.pageStarOffY) >= n.event.swipeRange) return n.event.swipeCallBack(n.event.pageStarOffX, n.event.pageStarOffY, e, t),!0;n.event.swipeDate = null}return ! 1},

• touchstart：手指触摸屏幕时事件触发
• touchend：手指离开屏幕时触发
• touchmove：手指在屏幕上滑动式触发
• touchcancel：系统取消touch事件的时候触发（该事件仅适用于带有触摸屏的设备）

touchstart: function(e) {e.preventDefault(),n.event.pageOffX = i.getOffsetX(e),n.event.pageOffY = i.getOffsetY(e),n.event.touchStart != null && n.event.touchStart(e, n.event.pageOffX, n.event.pageOffY);if (i.buttonLayoutEventHandler(e.type, n.event.pageOffX, n.event.pageOffY)) return ! 1;i.swipeStart(n.event.pageOffX, n.event.pageOffY)},touchend: function(e) {e.preventDefault();if (i.swipeSuccess(n.event.pageOffX, n.event.pageOffY)) return ! 1;if (i.buttonLayoutEventHandler(e.type, n.event.pageOffX, n.event.pageOffY)) return ! 1;n.event.touchEnd != null && n.event.touchEnd(e, n.event.pageOffX, n.event.pageOffY)},touchmove: function(e) {e.preventDefault(),n.event.pageOffX = i.getOffsetX(e),n.event.pageOffY = i.getOffsetY(e),n.event.touchMove != null && n.event.touchMove(e, n.event.pageOffX, n.event.pageOffY)},touchcancel: function(e) {n.event.pageOffX = i.getOffsetX(e),n.event.pageOffY = i.getOffsetY(e),n.event.touchCancel != null && n.event.touchCancel(e, n.event.pageOffX, n.event.pageOffY)},

• mouseDown：鼠标按下事件，当鼠标的左键按下时触发

mouseDown与click点击事件不同，点击会包括两个动作，按下鼠标和松开鼠标，如果一个元素同时绑定了这两个事件，那么mousedown就会先触发，mouseup是鼠标按下后，松开鼠标按键这个动作会触发的事件，一定是先有按下动作的存在，才会有松开动作的出现。两者多配合mousemove使用于网页一些元素的拖拽事件

• mouseUp：事件与其他浏览器原生事件一样，用于在鼠标按钮被释放时触发相应的操作
• mouseMove：鼠标移动事件，在页面移动一像素就会触发的事件

click: function(e) {n.event.clickCallBack != null && n.event.clickCallBack(e, i.getOffsetX(e), i.getOffsetY(e))},mouseDown: function(e) {var t = i.getOffsetX(e),r = i.getOffsetY(e);if (i.buttonLayoutEventHandler(e.type, t, r)) return ! 1;n.event.mouseDownCallBack != null && n.event.mouseDownCallBack(e, t, r),i.swipeStart(t, r),t = r = null},mouseUp: function(e) {var t = i.getOffsetX(e),r = i.getOffsetY(e);if (i.buttonLayoutEventHandler(e.type, t, r)) return ! 1;if (i.swipeSuccess(t, r)) return ! 1;n.event.mouseUpCallBack != null && n.event.mouseUpCallBack(e, t, r),t = r = null},mouseMove: function(e) {n.event.mouseMoveCallBack != null && n.event.mouseMoveCallBack(e, i.getOffsetX(e), i.getOffsetY(e))},pageFocus: function(e) {if (n.event.focused) return n.event.focused = !1,!1;n.event.pageFocusCallBack != null && n.event.pageFocusCallBack(e)},pageUnFocus: function(e) {n.event.pageUnFocusCallBack != null && n.event.pageUnFocusCallBack(e)},checkKey: function(e) {var t = "0";for (var n in r.event.key) if (r.event.key[n] == e) {t = n;break}return t},

• navigator：用于获取浏览器信息，通常通过UserAgent来识别浏览器类型
  注意：在IE浏览器中，由于UserAgent无法准确判断，因此可以使用ActiveXObject来识别

解释：

• navigator.appCodeName：IE/Firefox/Chrome 等浏览器中，值为Mozilla
• navigator.appName：IE/Firefox/Chrome 等浏览器中，均为Netscape

• toLowerCase()：用于返回调用该方法的字符串转换为小写后的新字符串；常用于比较字符串时忽略大小写的场景
  既然我们这里讲解了toLowerCase()方法，那衍生一下，看看toUpperCase()方法吧，其实跟toLowerCase()方法相反
• toUpperCase()：用于返回调用该方法的字符串转换为大写后的新字符串；常用于格式化字符串显示，如标题、标识符等
  注意：对于非字母字符，toLowerCase()和toUpperCase()都不会影响

getDeviceConfig: function() {var e = navigator.userAgent.toLowerCase();return e.indexOf("duopaosafari") != -1 ? {device: "duopaoSafari",fps: 1,touch: !0,zoom: 1}: e.indexOf("iphone") != -1 || e.indexOf("ipod") != -1 ? {device: "iphone",fps: 1,touch: !0,zoom: 1}: e.indexOf("ipad") != -1 ? {device: "ipad",fps: 1,touch: !0,zoom: 1}: e.indexOf("duopaoandroid") != -1 ? {device: "duopaoAndroid",fps: 1,touch: !0,zoom: 1}: e.indexOf("duopaowindowsphone") != -1 ? {device: "duopaoWindowsPhone",fps: 1,touch: !0,zoom: 1}: e.indexOf("opera mobi") != -1 ? {device: "operamobile",fps: 1,touch: !0,zoom: 1}: e.indexOf("flyflow") != -1 ? {device: "flyflow",fps: 1,touch: !0,zoom: 1}: e.indexOf("android") != -1 ? {device: "android",fps: 1,touch: !0,zoom: 1}: e.indexOf("iemobile") != -1 ? {device: "iemobile",fps: 1,touch: !1,zoom: 1}: e.indexOf("j2me") != -1 ? {device: "j2me",fps: 1,touch: !1,zoom: 1}: e.indexOf("symbian v5") != -1 ? {device: "symbian5",fps: 1,touch: !0,zoom: 1}: e.indexOf("symbian v3") != -1 ? {device: "symbian3",fps: 1,touch: !1,zoom: 1}: e.indexOf("chrome") != -1 ? {device: "chrome",fps: 1,touch: !1,zoom: 1}: e.indexOf("firefox") != -1 ? {device: "firefox",fps: 1,touch: !1,zoom: 1}: e.indexOf("msie") != -1 ? {device: "ie",fps: .5,touch: !1,zoom: 1}: e.indexOf("windows") != -1 ? {device: "ie",fps: .5,touch: !1,zoom: 1}: e.indexOf("safari") != -1 ? {device: "safari",fps: 1,touch: !1,zoom: 1}: e.indexOf("opera") != -1 ? {device: "opera",fps: 1,touch: !1,zoom: 1}: {device: "",fps: 1,touch: !1,zoom: 1}},

• fillStyle：设置或返回用于填充绘画的颜色、渐变或模式

	<body><canvas id="zhouqiCanvas" width="200" height="100" style="border:1px solid #d3d3d3;"></canvas><script type="text/javascript">var zhou = document.getElementById('zhouqiCanvas');//获取canvas标签var qi = zhou.getContext('2d');//获得context对象//createLinearGradient：创建线性的渐变对象//渐变开始点的 x 坐标,渐变开始点的 y 坐标,渐变结束点的 x 坐标，渐变结束点的 y 坐标var gra = qi.createLinearGradient(0,0,0,170);gra.addColorStop(0,"black");gra.addColorStop(1,"white");qi.fillStyle = gra;qi.fillRect(40,20,120,120);</script></body>

fillStyle效果

• fillRect：用于绘制一个填充的矩形

fillRect(x, y, width, height)

• x：矩形起始点的 x 轴坐标
• y：矩形起始点的 y 轴坐标
• width：矩形的宽度，负值的话宽度是绝对值，但是往左移动宽度绝对值像素
• height：矩形的高度，负值的话高度是绝对值，但是往上移动高度绝对值的像素

• fillText：用于在画布上绘制填色的文本；文本的默认颜色是黑色
• measureText：用于测量文本的宽度
• getAnchor：这里将get和Anchor分离，在HTTP请求中，get方法用于从服务器检索资源，而Anchor是URL中的一个部分，它通常指向某个网页的特定位置，也被称为片段标识符。它不会影响服务器端的请求，也不会被发送到服务器，而是仅用于在浏览器端的页面导航
• graphics：用于进行图像绘制操作的抽象类，可以绘制直线、矩形、椭圆等图形

衍生讲一下：
graphics2D：继承自graphics类，提供了更多的绘制方法和功能，可以进行更高级的图像绘制操作

setImage: function(e, t, r, i, s) {if (!e || !t) return ! 1;n.image.imgs[e] || (n.image.imgs[e] = new Image, n.image.imgs[e].onload = function() {n.image.countLoaded++,this.loaded = !0,this.cache && m.canvas.pass(this.id, this.width, this.height).drawImage(this.id, 0, 0).pass().base().delImage(this.id, !0)},n.image.imgs[e].src = t + (n.image.version != "" ? "?v=" + n.image.version: ""), n.image.imgs[e].id = e, n.image.imgs[e].url = t, n.image.imgs[e].benchId = r, n.image.imgs[e].bench = i, n.image.imgs[e].cache = s, n.image.imgs[e].refreshed = !1)},setAudio: function(e, t, r, i, s, o) {if (!e || !t) return ! 1;if (!n.audio.audios[e]) {var u = new Audio(t + (n.image.version != "" ? "?v=" + n.image.version: ""));u.id = e,u.autoplay = i,u.preload = s,u.autobuffer = o,u.loop = r,n.audio.audios[u.id] = u,u = null}},loadingCallBack: function(e, t, r) {var i = m.canvas.screen.getWidth(),s = m.canvas.screen.getHeight(),o = i,u = 5,a = parseInt(i - o >> 1),f = s - u,e = e > t ? t: e,l = parseInt(e / t * 100) + "%";m.canvas.fillStyle(n.canvas.bgColor).fillRect(0, 0, i, s).fillStyle("#00FFFF").fillRect(a, f, parseInt(e / t * o), u).fillStyle("#FFF").fillText("loading " + r, 5, s - 10).fillText(l, i - m.canvas.measureText(l).width - 5, s - 10),i = s = o = u = a = f = l = null},loadingEndCallBack: null,getAnchor: function(e, t, n, i, s) {var o = e,u = t;switch (s) {case r.canvas.graphics.ANCHOR_HV:o -= parseInt(n / 2),u -= parseInt(i / 2);break;case r.canvas.graphics.ANCHOR_LV:u -= parseInt(i / 2);break;case r.canvas.graphics.ANCHOR_RV:o -= n,u -= parseInt(i / 2);break;case r.canvas.graphics.ANCHOR_HT:o -= parseInt(n / 2);break;case 0:case r.canvas.graphics.ANCHOR_LT:default:break;case r.canvas.graphics.ANCHOR_RT:o -= n;break;case r.canvas.graphics.ANCHOR_HB:o -= parseInt(n / 2),u -= i;break;case r.canvas.graphics.ANCHOR_LB:u -= i;break;case r.canvas.graphics.ANCHOR_RB:o -= n,u -= i}return {x: o,y: u}},

• buttons：Buttons是DataTables的扩展，将控制按钮添加到表中

initUrlParams: function(e) {if (e.indexOf("?") >= 0) {var t = e.split("?"),r = [];t[1].indexOf("&") >= 0 ? r = t[1].split("&") : r.push(t[1]);var i = [];for (var s = 0; s < r.length; s++) r[s].indexOf("=") >= 0 && (i = r[s].split("="), n.request.gets[i[0]] = i[1]);i = null,r = null,t = null}},audioEnded: function() {m.audio.replay(this.id)},pageLoaded: function() {n.image.inited = !0,n.system.pageLoad(m)},buttonLayoutAction: function() {var e = n.buttonLayout.buttons,t;for (var r = e.length - 1; r >= 0; r--) if (t = e[r]) t.action().render(),t.goned && t.endPath() && e.splice(r, 1);e = t = null},buttonLayoutEventHandler: function(e, t, r) {var i = n.buttonLayout.buttons,s, o = !1;for (var u = i.length - 1; u >= 0; u--) if (s = i[u]) if (m.comm.collision(s.x, s.y, s.width, s.height, t - 5, r - 5, 10, 10)) {switch (e) {case "mousedown":case "touchstart":s.hovered = !0,s.repeated = !0,s.pressed = !0,s.released = !1;break;case "mouseup":case "touchend":s.hovered && (s.released = !0, s.hovered = !1),s.repeated = !1,s.pressed = !1;break;default:}o = !0} else if (e == "mouseup" || e == "touchend") s.hovered = !1,s.repeated = !1;return i = s = null,o}},s,o,u,a,f,l,c,h,p,d,v = {arr: [],len: 0,v: 0};

先这样吧，朋友们，早点休息啦，明天还要早起呢🎆