jQuery小游戏（一）
嘻嘻，今天我们来写个jquery小游戏吧
- 首先，我们准备一下写小游戏需要准备的佩饰，如果：图片、音乐、搞怪的小表情
这里我准备了一些游戏中需要涉及到的图片
- 游戏中使用到的方法
-
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
},
