jQuery小游戏（一）

jQuery小游戏（一）

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

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

这里我准备了一些游戏中需要涉及到的图片
在这里插入图片描述

  1. 游戏中使用到的方法

  • 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},

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/pingmian/68600.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

H3CNE-28-VRRP

H3CNE-28-VRRP

虚拟网关冗余协议&#xff0c;Virtual Router Redundancy Protocotol 三层网关冗余技术对用户网关做冗余 VRRP配置示例 接口IP配置&#xff0c;略。 R1&#xff1a; int g0/0vrrp vrid 1 virtual 192.168.1.254vrrp vrid 1 priority 105 # 1-254,越大越优先R2&#xff1a; …
阅读更多...
私有包上传maven私有仓库nexus-2.9.2

私有包上传maven私有仓库nexus-2.9.2

一、上传 二、获取相应文件 三、最后修改自己的pom文件
阅读更多...
Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services dockerCompose自动化部署详尽操作

Alfresco Content Services docker社区部署文档 Alfresco Content Services简介 官方说明书 https://support.hyland.com/r/Alfresco/Alfresco-Content-Services-Community-Edition/23.4/Alfresco-Content-Services-Community-Edition/Using/Content/Folder-rules/Defining-…
阅读更多...
麒麟操作系统服务架构保姆级教程（十四）iptables防火墙四表五链和防火墙应用案例

麒麟操作系统服务架构保姆级教程（十四）iptables防火墙四表五链和防火墙应用案例

如果你想拥有你从未拥有过的东西&#xff0c;那么你必须去做你从未做过的事情 防火墙在运维工作中有着不可或缺的重要性。首先&#xff0c;它是保障网络安全的关键防线&#xff0c;通过设置访问控制规则&#xff0c;可精准过滤非法网络流量&#xff0c;有效阻挡外部黑客攻击、恶…
阅读更多...
Midjourney基础-常用修饰词+权重的用法大全

Midjourney基础-常用修饰词+权重的用法大全

用好修饰词很关键 Midjourney要用除了掌握好提示词的写法&#xff0c;按照上一篇《做Midjourney最好图文教程-提示词公式以及高级参数讲解》画面主体 场景氛围 主体行为 构图方式 艺术风格 图像质量。 要画出有质感的内容我们必须要掌握好“修饰词”&#xff0c;这些修饰…
阅读更多...
钉钉群机器人设置——python版本

钉钉群机器人设置——python版本

钉钉群机器人设置——python版本 应用场景钉钉界面操作程序开发效果展示 应用场景 由于工作需要&#xff0c;很多项目执行程序后出现报错信息无法第一时间收到&#xff0c;因此实时预警对于监控程序还是有必要。&#xff08;仅个人观点&#xff09; 参考文档及博客&#xff1a…
阅读更多...
babylon.js-3：了解STL网格模型

babylon.js-3：了解STL网格模型

网格模型上色 本篇文章主要介绍如何在 BabylonJS 中实现STL网格模型上色。 文章目录 网格模型上色运用场景概要延申正文加载器库的支持认识 OBJ 和 STL 文件GUI 色板选择器网格模型异步加载加载动画网格模型上色官方即将弃用 ImportMesh 而推荐使用 ImportMeshAsync 说明OBJ …
阅读更多...
大数据治理实战：架构、方法与最佳实践

大数据治理实战：架构、方法与最佳实践

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 1. 引言 大数据治理是确保数据质量、合规性和安全性的重要手段&#xff0c;尤其在数据驱动决策和人工智能应用日益普及的背景下&…
阅读更多...
【时时三省】(C语言基础）文件的随机读写

【时时三省】(C语言基础）文件的随机读写

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 fseek 根据文件指针的位置和偏移量来定位文件指针 示例&#xff1a; 这个输出的就是ade seek&#xff3f;cur的意思是从当前偏移量 2就是从a往后偏移两个就是d 偏移量 SEEK&#xff3f;CUR…
阅读更多...
yolov5错误更改与相关参数详解（train.py）

yolov5错误更改与相关参数详解（train.py）

1.错误更改 main中相关参数 if __name__ __main__:parser argparse.ArgumentParser()parser.add_argument(--weights, typestr, default, helpinitial weights path)parser.add_argument(--cfg, typestr, defaultmodels/yolov5s.yaml, helpmodel.yaml path)parser.add_arg…
阅读更多...
第4章 基于中点电流的NPC逆变器中点电压平衡策略

第4章 基于中点电流的NPC逆变器中点电压平衡策略

1. 工作原理 1.1 NPC型三电平逆变器工作原理 NPC型三相三电平逆变器有A、B、C三个桥臂&#xff0c;其组成结构是相同的&#xff0c;本章以A相为例&#xff0c;对其工作原理进行分析。开关器件SA1和SA3、SA2和SA4为互补器件&#xff0c;通过控制开关器件的导通和关断状态&#…
阅读更多...
【C++】内联函数inline、关键字auto与新式for

【C++】内联函数inline、关键字auto与新式for

内联函数 内联函数背景 我们在使用C语言中我们都学过函数&#xff0c;我们知道函数在调用的过程中需要开辟栈帧。如果我们需要频繁的调用一个函数&#xff0c;假设我们调用10次Add()函数&#xff0c;那我们就需要建立10次栈帧。我们都知道在栈帧中要做很多事情&#xff0c;例如…
阅读更多...
【深度学习】图像分类数据集

【深度学习】图像分类数据集

图像分类数据集 MNIST数据集是图像分类中广泛使用的数据集之一&#xff0c;但作为基准数据集过于简单。 我们将使用类似但更复杂的Fashion-MNIST数据集。 %matplotlib inline import torch import torchvision from torch.utils import data from torchvision import transfo…
阅读更多...
【MySQL — 数据库增删改查操作】深入解析MySQL的 Retrieve 检索操作

【MySQL — 数据库增删改查操作】深入解析MySQL的 Retrieve 检索操作

Retrieve 检索 示例 1. 构造数据 创建表结构 create table exam1(id bigint, name varchar(20) comment同学姓名, Chinesedecimal(3,1) comment 语文成绩, Math decimal(3,1) comment 数学成绩, English decimal(3,1) comment 英语成绩 ); 插入测试数据 insert into ex…
阅读更多...
Ansible自动化运维实战--通过role远程部署nginx并配置（8/8）

Ansible自动化运维实战--通过role远程部署nginx并配置（8/8）

文章目录 1、准备工作2、创建角色结构3、编写任务4、准备配置文件&#xff08;金甲模板&#xff09;5、编写变量6、编写处理程序7、编写剧本8、执行剧本Playbook9、验证-游览器访问每台主机的nginx页面 在 Ansible 中&#xff0c;使用角色&#xff08;Role&#xff09;来远程部…
阅读更多...
RNN实现阿尔茨海默症的诊断识别

RNN实现阿尔茨海默症的诊断识别

本文为为&#x1f517;365天深度学习训练营内部文章 原作者&#xff1a;K同学啊 一 导入数据 import torch.nn as nn import torch.nn.functional as F import torchvision,torch from sklearn.preprocessing import StandardScaler from torch.utils.data import TensorDatase…
阅读更多...
编程题-最长的回文子串（中等）

编程题-最长的回文子串（中等）

题目&#xff1a; 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&#xff1a;"aba" 同样是符合题意的答案。示例 2&#xff1a; 输入&#xff1a;s &…
阅读更多...
CNN-GRU卷积门控循环单元时间序列预测（Matlab完整源码和数据）

CNN-GRU卷积门控循环单元时间序列预测（Matlab完整源码和数据）

CNN-GRU卷积门控循环单元时间序列预测&#xff08;Matlab完整源码和数据&#xff09; 目录 CNN-GRU卷积门控循环单元时间序列预测&#xff08;Matlab完整源码和数据&#xff09;预测效果基本介绍CNN-GRU卷积门控循环单元时间序列预测一、引言1.1、研究背景与意义1.2、研究现状1…
阅读更多...
HTML-新浪新闻-实现标题-样式1

HTML-新浪新闻-实现标题-样式1

用css进行样式控制 css引入方式&#xff1a; --行内样式&#xff1a;写在标签的style属性中&#xff08;不推荐&#xff09; --内嵌样式&#xff1a;写在style标签中&#xff08;可以写在页面任何位置&#xff0c;但通常约定写在head标签中&#xff09; --外联样式&#xf…
阅读更多...
2024年终总结

2024年终总结

回顾 今年过年没回老家&#xff0c;趁着有时间&#xff0c;总结一下24年吧。 我把23年看做是打基础的一年&#xff0c;而24年主要是忙于项目的一年&#xff0c;基本上大部分时间都是忙着交付软件&#xff0c;写的一些文章也大部分都是项目中遇到的问题和解决方案&#xff0c;虽…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023