当前位置： 首页 > article >正文

jQuery小游戏（二）

article 2025/1/31 14:05:09

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

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


http://www.kler.cn/a/526005.html

相关文章：

  • 你好！这是我自己的CSDN博客！
  • 【Linux】线程互斥与同步
  • Win11下帝国时代2无法启动解决方法
  • WINDOWS安装eiseg遇到的问题和解决方法
  • 【Redis】 String 类型的介绍和常用命令
  • 【llm对话系统】大模型 RAG 之回答生成：融合检索信息，生成精准答案
  • Windows环境安装nvm，并使用nvm管理nodejs版本教程
  • Leetcode：219
  • Debezium Schema History Recovery 机制详解
  • 钓鱼的肝：春节特别篇
  • 【Elasticsearch】 Intervals Query
  • 为AI聊天工具添加一个知识系统 之74 详细设计之15 正则表达式 之2
  • 【卫星通信】链路预算方法
  • CE11.【C++ Cont】练习题组12(结构体专题)
  • MATLAB中textBoundary函数用法
  • 在godot中接入大模型api，实现npc的自动对话
  • 如何使用Python调用大语言模型的API接口？
  • 【单细胞第二节：单细胞示例数据分析-GSE218208】
  • 改进候鸟优化算法之五：基于多目标优化的候鸟优化算法（MBO-MO）
  • C++ 继承和多态
  • Docker小游戏 | 使用Docker部署FC-web游戏模拟器
  • 顺启逆停程序
  • cursor软件的chat和composer分别是什么
  • 9 Spark性能优化_RDD算子调优
  • 再谈多组学（multi-omics）
  • Cloudreve：Star22.3k,免费开源的网盘，支持多种存储方式，它允许用户快速搭建个人或团队的私有云存储服务。