国外网站 国内访问速度,中国郑州建设信息网站,如何做网站流量,淘宝客的api怎么做网站jQuery小游戏#xff08;二#xff09;
今天是新年的第二天#xff0c;本人在这里祝大家#xff0c;新年快乐#xff0c;万事胜意#x1f495; 紧接jQuery小游戏#xff08;一#xff09;的内容#xff0c;我们开始继续往下咯#x1f61c;
游戏中使用到的方法
key…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.appCodeNameIE/Firefox/Chrome 等浏览器中值为Mozillanavigator.appNameIE/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设置或返回用于填充绘画的颜色、渐变或模式 bodycanvas idzhouqiCanvas width200 height100 styleborder:1px solid #d3d3d3;/canvasscript typetext/javascriptvar 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/bodyfillStyle效果
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}},buttonsButtons是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};先这样吧朋友们早点休息啦明天还要早起呢
