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

jQuery小游戏（二）

news 2025/7/28 15:40:14

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.lryc.cn/news/529053.html

相关文章：

  • 农产品价格报告爬虫使用说明
  • xceed PropertyGrid 如何做成Visual Studio 的属性窗口样子
  • Fork/Join框架_任务分解与并行执行
  • 智能家居监控系统数据收集积压优化
  • 详解python的单例模式
  • momask-codes 部署踩坑笔记
  • H3CNE-31-BFD
  • 蓝桥备赛指南（5）
  • 讯飞智作 AI 配音技术浅析（一）
  • MySQL（高级特性篇） 14 章——MySQL事务日志
  • openRv1126 AI算法部署实战之——TensorFlow TFLite Pytorch ONNX等模型转换实战
  • 【Redis】常见面试题
  • 每日 Java 面试题分享【第 17 天】
  • 「全网最细 + 实战源码案例」设计模式——桥接模式
  • JavaScript 进阶（上）
  • 【编译原理实验二】——自动机实验：NFA转DFA并最小化
  • 深入探讨：服务器如何响应前端请求及后端如何查看前端提交的数据
  • 如何利用Docker和.NET Core实现环境一致性、简化依赖管理、快速部署与扩展，同时提高资源利用率、确保安全性和生态系统支持
  • @Inject @Qualifier @Named
  • 创建 priority_queue - 进阶（内置类型）c++
  • 2. Java-MarkDown文件解析-工具类
  • 动态规划DP 最长上升子序列模型 登山（题目分析+C++完整代码）
  • css-设置元素的溢出行为为可见overflow: visible；
  • 家居EDI：Hom Furniture EDI需求分析
  • 1、开始简单使用rag
  • Linux Samba 低版本漏洞（远程控制）复现与剖析
  • 安卓(android)实现注册界面【Android移动开发基础案例教程（第2版）黑马程序员】
  • 【 AI agents】letta：2024年代理堆栈演进（中英文翻译）
  • Java中 instanceof 的用法（详解）
  • 联想拯救者R720笔记本外接显示屏方法，显示屏是2K屏27英寸