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