jQuery小游戏（二）

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

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

游戏中使用到的方法

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
		};