菜单 搜索
首页 前端知识 jQuery小游戏（一）

jQuery小游戏（一）

2025-02-24 13:02:40 前端知识 前端哥 787 509 我要收藏

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
			},
复制

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/21213.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

广告位招租：QQ85750956
发布的文章

C/C | 每日一练 (2)

2025-02-24 13:02:49

Linux性能监控工具汇总

2025-02-24 13:02:48

在线骑行|基于SpringBoot的在线骑行网站设计与实现(源码 数据库 文档)

2025-02-24 13:02:48

DeepSeek 提示词：定义、作用、分类与设计原则

2025-02-24 13:02:48

【Linux系统】—— 冯诺依曼体系结构与操作系统初理解

2025-02-24 13:02:48

Python常见面试题的详解16

2025-02-24 13:02:48

Docker实战-使用docker compose搭建博客

2025-02-24 13:02:47

QQ登录测试用例报告

2025-02-24 13:02:47

乐享数科：供应链金融—三个不同阶段的融资模式

2025-02-24 13:02:47

【Deepseek】Linux 本地部署 Deepseek

2025-02-24 13:02:47

广告位招租：QQ85750956
大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

jQuery.flowchart 项目常见问题解决方案

2025-02-24 13:02:021000
3

CSS常用属性（文本属性）

2024-11-04 09:11:111000
4

TypeScript 中的 Number 类型，Number 类型的特性、常见操作和注意事项

2024-09-30 23:09:061000
5

CSS写代码使页面划分为左右两个区域

2024-09-09 00:09:071000
6

vue使用datav echarts

2024-09-06 00:09:381000
7

使用TweenMax.js和CSS3创建冰球运动员动画效果教程

2024-09-04 23:09:411000
8

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
9

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
10

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！