{"id":2024,"date":"2025-05-09T18:00:21","date_gmt":"2025-05-09T10:00:21","guid":{"rendered":"https:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/"},"modified":"2025-05-09T18:00:21","modified_gmt":"2025-05-09T10:00:21","slug":"html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f","status":"publish","type":"post","link":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/","title":{"rendered":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f"},"content":{"rendered":"
\n \n \n
\n
\n

\n JavaScript\n <\/p>\n

\n \u8bed\u8a00\uff1a\n <\/p>\n

\n JaveScriptBabelCoffeeScript\n <\/p>\n

\n \u786e\u5b9a\n <\/p>\n

\n (function() {
\n \n <\/p>\n

\n var AsteroidsView, game,\n <\/p>\n

\n bind = function(fn, me) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n return fn.apply(me, arguments);\n <\/p>\n

\n };\n <\/p>\n

\n };\n <\/p>\n

\n window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;\n <\/p>\n

\n AsteroidsView = (function() {
\n \n <\/p>\n

\n function AsteroidsView() {
\n \n <\/p>\n

\n this.render = bind(this.render, this);\n <\/p>\n

\n this.init = bind(this.init, this);\n <\/p>\n

\n }\n <\/p>\n

\n AsteroidsView.prototype.missles = [];\n <\/p>\n

\n AsteroidsView.prototype.asteroids = [];\n <\/p>\n

\n AsteroidsView.prototype.score = 0;\n <\/p>\n

\n AsteroidsView.prototype.highscore = 0;\n <\/p>\n

\n AsteroidsView.prototype.canMissle = true;\n <\/p>\n

\n AsteroidsView.prototype.keys = {
\n \n <\/p>\n

\n left: false,\n <\/p>\n

\n right: false,\n <\/p>\n

\n up: false,\n <\/p>\n

\n down: false,\n <\/p>\n

\n space: false\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.init = function() {
\n \n <\/p>\n

\n this.makeElements();\n <\/p>\n

\n this.addListeners();\n <\/p>\n

\n this.render();\n <\/p>\n

\n return this.points(0);\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.makeElements = function() {
\n \n <\/p>\n

\n this.stage = document.getElementsByClassName(“game”)[0];\n <\/p>\n

\n this.scoreEl = document.createElement(“h1”);\n <\/p>\n

\n this.highscoreEl = document.createElement(“h1”);\n <\/p>\n

\n this.scoreEl.setAttribute(“class”, “left score”);\n <\/p>\n

\n this.highscoreEl.setAttribute(“class”, “right score”);\n <\/p>\n

\n this.stage.appendChild(this.scoreEl);\n <\/p>\n

\n this.stage.appendChild(this.highscoreEl);\n <\/p>\n

\n this.player = document.createElement(“div”);\n <\/p>\n

\n this.player.setAttribute(“class”, “player”);\n <\/p>\n

\n this.stage.appendChild(this.player);\n <\/p>\n

\n return this.player.m = {
\n \n <\/p>\n

\n pref: {
\n \n <\/p>\n

\n a: 0.075,\n <\/p>\n

\n s: 0.7,\n <\/p>\n

\n m: 0.1\n <\/p>\n

\n },\n <\/p>\n

\n pos: {
\n \n <\/p>\n

\n scale: 10,\n <\/p>\n

\n x: 0,\n <\/p>\n

\n y: 0,\n <\/p>\n

\n a: 0\n <\/p>\n

\n },\n <\/p>\n

\n vel: {
\n \n <\/p>\n

\n x: 0,\n <\/p>\n

\n y: 0,\n <\/p>\n

\n a: 0\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.addListeners = function() {
\n \n <\/p>\n

\n window.addEventListener(“keydown”, (function(_this) {
\n \n <\/p>\n

\n return function(e) {
\n \n <\/p>\n

\n switch (e.keyCode) {
\n \n <\/p>\n

\n case 38:\n <\/p>\n

\n return _this.keys.up = true;\n <\/p>\n

\n case 40:\n <\/p>\n

\n return _this.keys.down = true;\n <\/p>\n

\n case 37:\n <\/p>\n

\n return _this.keys.left = true;\n <\/p>\n

\n case 39:\n <\/p>\n

\n return _this.keys.right = true;\n <\/p>\n

\n case 32:\n <\/p>\n

\n return _this.keys.space = true;\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n })(this));\n <\/p>\n

\n return window.addEventListener(“keyup”, (function(_this) {
\n \n <\/p>\n

\n return function(e) {
\n \n <\/p>\n

\n switch (e.keyCode) {
\n \n <\/p>\n

\n case 38:\n <\/p>\n

\n return _this.keys.up = false;\n <\/p>\n

\n case 40:\n <\/p>\n

\n return _this.keys.down = false;\n <\/p>\n

\n case 37:\n <\/p>\n

\n return _this.keys.left = false;\n <\/p>\n

\n case 39:\n <\/p>\n

\n return _this.keys.right = false;\n <\/p>\n

\n case 32:\n <\/p>\n

\n return _this.keys.space = false;\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n })(this));\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.keyEvents = function() {
\n \n <\/p>\n

\n var angleX, angleY;\n <\/p>\n

\n if (this.keys.up === true) {
\n \n <\/p>\n

\n angleX = Math.cos((this.player.m.pos.a – 90) * (Math.PI \/ 180));\n <\/p>\n

\n angleY = Math.sin((this.player.m.pos.a – 90) * (Math.PI \/ 180));\n <\/p>\n

\n this.player.m.vel.x += angleX * this.player.m.pref.a;\n <\/p>\n

\n this.player.m.vel.y += angleY * this.player.m.pref.a;\n <\/p>\n

\n this.explosion(this.player.m.pos.x + angleX * -14, this.player.m.pos.y + angleY * -14, 5, 6 + Math.round(12 * Math.random()));\n <\/p>\n

\n }\n <\/p>\n

\n if (this.keys.down === true) {
\n \n <\/p>\n

\n angleX = Math.cos((this.player.m.pos.a – 90) * (Math.PI \/ 180));\n <\/p>\n

\n angleY = Math.sin((this.player.m.pos.a – 90) * (Math.PI \/ 180));\n <\/p>\n

\n this.player.m.vel.x -= angleX * this.player.m.pref.a;\n <\/p>\n

\n this.player.m.vel.y -= angleY * this.player.m.pref.a;\n <\/p>\n

\n this.explosion(this.player.m.pos.x + angleX * 1, this.player.m.pos.y + angleY * 1, 5, 6 + Math.round(12 * Math.random()));\n <\/p>\n

\n }\n <\/p>\n

\n if (this.keys.left === true) {
\n \n <\/p>\n

\n this.player.m.vel.a -= this.player.m.pref.s;\n <\/p>\n

\n }\n <\/p>\n

\n if (this.keys.right === true) {
\n \n <\/p>\n

\n this.player.m.vel.a += this.player.m.pref.s;\n <\/p>\n

\n }\n <\/p>\n

\n if (this.keys.space === true) {
\n \n <\/p>\n

\n return this.missle(this.player.m.pos);\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.missle = function(v) {
\n \n <\/p>\n

\n var missle;\n <\/p>\n

\n if (this.canMissle === true) {
\n \n <\/p>\n

\n this.canMissle = false;\n <\/p>\n

\n setTimeout((function(_this) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n return _this.canMissle = true;\n <\/p>\n

\n };\n <\/p>\n

\n })(this), this.player.m.pref.m * 1000);\n <\/p>\n

\n missle = document.createElement(“div”);\n <\/p>\n

\n missle.setAttribute(“class”, “missle”);\n <\/p>\n

\n missle.pos = {
\n \n <\/p>\n

\n x: parseInt(v.x),\n <\/p>\n

\n y: parseInt(v.y),\n <\/p>\n

\n a: parseInt(v.a),\n <\/p>\n

\n scale: 4,\n <\/p>\n

\n speed: 12\n <\/p>\n

\n };\n <\/p>\n

\n missle.death = setTimeout((function(_this) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n missle.parentNode.removeChild(missle);\n <\/p>\n

\n return _this.missles.splice(0, 1);\n <\/p>\n

\n };\n <\/p>\n

\n })(this), 3000);\n <\/p>\n

\n this.stage.appendChild(missle);\n <\/p>\n

\n this.missles.push(missle);\n <\/p>\n

\n if (this.missles.length > 12) {
\n \n <\/p>\n

\n clearTimeout(this.missles[0].death);\n <\/p>\n

\n this.missles[0].parentNode.removeChild(this.missles[0]);\n <\/p>\n

\n return this.missles.splice(0, 1);\n <\/p>\n

\n }\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.explosion = function(x, y, s, i) {
\n \n <\/p>\n

\n var beeeen, n;\n <\/p>\n

\n n = 0;\n <\/p>\n

\n while (n < i) {
\n \n <\/p>\n

\n setTimeout((function(_this) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n return _this.explosion(x, y, s);\n <\/p>\n

\n };\n <\/p>\n

\n })(this), 30 + n * 30);\n <\/p>\n

\n n++;\n <\/p>\n

\n }\n <\/p>\n

\n x += Math.round((Math.random() – 0.5) * s);\n <\/p>\n

\n y += Math.round((Math.random() – 0.5) * s);\n <\/p>\n

\n beeeen = document.createElement(“div”);\n <\/p>\n

\n beeeen.setAttribute(“class”, “explosion”);\n <\/p>\n

\n beeeen.style.marginTop = y + “px”;\n <\/p>\n

\n beeeen.style.marginLeft = x + “px”;\n <\/p>\n

\n beeeen.style.width = beeeen.style.height = s + “px”;\n <\/p>\n

\n this.stage.appendChild(beeeen);\n <\/p>\n

\n return setTimeout((function(_this) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n return beeeen.parentNode.removeChild(beeeen);\n <\/p>\n

\n };\n <\/p>\n

\n })(this), 500);\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.asteroid = function(x, y, type) {
\n \n <\/p>\n

\n var asteroid, size, types;\n <\/p>\n

\n asteroid = document.createElement(“div”);\n <\/p>\n

\n types = [“a”, “b”, “c”];\n <\/p>\n

\n size = [80, 40, 25];\n <\/p>\n

\n if (type === void 0) {
\n \n <\/p>\n

\n type = Math.floor(Math.random() * types.length);\n <\/p>\n

\n }\n <\/p>\n

\n asteroid.setAttribute(“class”, “asteroid type-” + types[type]);\n <\/p>\n

\n if (x === void 0 || y === void 0) {
\n \n <\/p>\n

\n if (Math.random() > 0.5) {
\n \n <\/p>\n

\n if (Math.random() > 0.5) {
\n \n <\/p>\n

\n x = -window.innerWidth \/ 2 – 40;\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n x = window.innerWidth \/ 2 + 40;\n <\/p>\n

\n }\n <\/p>\n

\n y = Math.random() * window.innerHeight;\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n if (Math.random() > 0.5) {
\n \n <\/p>\n

\n y = -window.innerHeight \/ 2 – 40;\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n y = window.innerHeight \/ 2 + 40;\n <\/p>\n

\n }\n <\/p>\n

\n x = Math.random() * window.innerWidth;\n <\/p>\n

\n }\n <\/p>\n

\n }\n <\/p>\n

\n asteroid.pos = {
\n \n <\/p>\n

\n x: x,\n <\/p>\n

\n y: y,\n <\/p>\n

\n aInit: Math.random() * 360,\n <\/p>\n

\n a: Math.random() * 360,\n <\/p>\n

\n s: (Math.random() – 0.5) * 2,\n <\/p>\n

\n speed: Math.min(0.5 + Math.random() * 2 + ((Math.random() * this.score) \/ 2000), 5),\n <\/p>\n

\n health: (3 – type) * 2,\n <\/p>\n

\n scale: size[type]\n <\/p>\n

\n };\n <\/p>\n

\n this.stage.appendChild(asteroid);\n <\/p>\n

\n return this.asteroids.push(asteroid);\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.update = function() {
\n \n <\/p>\n

\n var i, n, results;\n <\/p>\n

\n this.player.m.pos.x += this.player.m.vel.x;\n <\/p>\n

\n this.player.m.pos.y += this.player.m.vel.y;\n <\/p>\n

\n this.player.m.pos.a += this.player.m.vel.a;\n <\/p>\n

\n if (Math.abs(this.player.m.vel.a) < 0.1) {
\n \n <\/p>\n

\n this.player.m.vel.a = 0;\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n this.player.m.vel.a = this.player.m.vel.a \/ 1.1;\n <\/p>\n

\n }\n <\/p>\n

\n this.player.m.pos = this.loop(this.player.m.pos);\n <\/p>\n

\n i = 0;\n <\/p>\n

\n while (i < this.missles.length) {
\n \n <\/p>\n

\n if (this.missles[i] !== void 0) {
\n \n <\/p>\n

\n this.missles[i].pos.x += Math.cos((this.missles[i].pos.a – 90) * (Math.PI \/ 180)) * this.missles[i].pos.speed;\n <\/p>\n

\n this.missles[i].pos.y += Math.sin((this.missles[i].pos.a – 90) * (Math.PI \/ 180)) * this.missles[i].pos.speed;\n <\/p>\n

\n if (Math.random() > 0.5) {
\n \n <\/p>\n

\n this.explosion(this.missles[i].pos.x, this.missles[i].pos.y, 3 + Math.random() * 2);\n <\/p>\n

\n }\n <\/p>\n

\n }\n <\/p>\n

\n i++;\n <\/p>\n

\n }\n <\/p>\n

\n i = 0;\n <\/p>\n

\n results = [];\n <\/p>\n

\n while (i < this.asteroids.length) {
\n \n <\/p>\n

\n if (this.asteroids[i] !== void 0) {
\n \n <\/p>\n

\n this.asteroids[i].pos.x += Math.cos((this.asteroids[i].pos.aInit – 90) * (Math.PI \/ 180)) * this.asteroids[i].pos.speed;\n <\/p>\n

\n this.asteroids[i].pos.y += Math.sin((this.asteroids[i].pos.aInit – 90) * (Math.PI \/ 180)) * this.asteroids[i].pos.speed;\n <\/p>\n

\n this.asteroids[i].pos.a += this.asteroids[i].pos.s;\n <\/p>\n

\n this.asteroids[i].pos = this.loop(this.asteroids[i].pos);\n <\/p>\n

\n }\n <\/p>\n

\n n = 0;\n <\/p>\n

\n while (n < this.missles.length) {
\n \n <\/p>\n

\n if (this.collision(this.missles[n].pos, this.asteroids[i].pos)) {
\n \n <\/p>\n

\n this.asteroids[i].pos.health–;\n <\/p>\n

\n this.explosion(this.missles[n].pos.x, this.missles[n].pos.y, 15);\n <\/p>\n

\n this.missles[n].pos.y = 1000000;\n <\/p>\n

\n this.points(10);\n <\/p>\n

\n }\n <\/p>\n

\n n++;\n <\/p>\n

\n }\n <\/p>\n

\n if (this.collision(this.player.m.pos, this.asteroids[i].pos)) {
\n \n <\/p>\n

\n this.killPlayer();\n <\/p>\n

\n }\n <\/p>\n

\n if (this.asteroids[i].pos.health < 0) {
\n \n <\/p>\n

\n this.explosion(this.asteroids[i].pos.x, this.asteroids[i].pos.y, 25, 8);\n <\/p>\n

\n switch (this.asteroids[i].pos.scale) {
\n \n <\/p>\n

\n case 80:\n <\/p>\n

\n this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 1);\n <\/p>\n

\n this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 1);\n <\/p>\n

\n this.points(500);\n <\/p>\n

\n break;\n <\/p>\n

\n case 40:\n <\/p>\n

\n this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);\n <\/p>\n

\n this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);\n <\/p>\n

\n this.asteroid(parseInt(this.asteroids[i].pos.x), parseInt(this.asteroids[i].pos.y), 2);\n <\/p>\n

\n this.points(250);\n <\/p>\n

\n break;\n <\/p>\n

\n default:\n <\/p>\n

\n this.points(100);\n <\/p>\n

\n }\n <\/p>\n

\n this.asteroids[i].parentNode.removeChild(this.asteroids[i]);\n <\/p>\n

\n this.asteroids.splice(i, 1);\n <\/p>\n

\n }\n <\/p>\n

\n results.push(i++);\n <\/p>\n

\n }\n <\/p>\n

\n return results;\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.killPlayer = function() {
\n \n <\/p>\n

\n if (this.invincible === false || this.invincible === void 0) {
\n \n <\/p>\n

\n this.explosion(this.player.m.pos.x, this.player.m.pos.y, 50, 4);\n <\/p>\n

\n this.player.m.pos.x = 0;\n <\/p>\n

\n this.player.m.pos.y = 0;\n <\/p>\n

\n this.player.m.vel.x = 0;\n <\/p>\n

\n this.player.m.vel.y = 0;\n <\/p>\n

\n this.invincible = true;\n <\/p>\n

\n this.points(0, true);\n <\/p>\n

\n return setTimeout((function(_this) {
\n \n <\/p>\n

\n return function() {
\n \n <\/p>\n

\n return _this.invincible = false;\n <\/p>\n

\n };\n <\/p>\n

\n })(this), 3000);\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.render = function() {
\n \n <\/p>\n

\n var i, n;\n <\/p>\n

\n this.update();\n <\/p>\n

\n this.keyEvents();\n <\/p>\n

\n this.player.setAttribute(“style”, this.pos(this.player.m.pos));\n <\/p>\n

\n i = 0;\n <\/p>\n

\n while (i < this.missles.length) {
\n \n <\/p>\n

\n this.missles[i].setAttribute(“style”, this.pos(this.missles[i].pos));\n <\/p>\n

\n i++;\n <\/p>\n

\n }\n <\/p>\n

\n i = 0;\n <\/p>\n

\n while (i < this.asteroids.length) {
\n \n <\/p>\n

\n this.asteroids[i].setAttribute(“style”, this.pos(this.asteroids[i].pos));\n <\/p>\n

\n i++;\n <\/p>\n

\n }\n <\/p>\n

\n if (this.asteroids.length < 5) {
\n \n <\/p>\n

\n n = 1 + Math.floor(Math.random() * 4);\n <\/p>\n

\n while (n > 0) {
\n \n <\/p>\n

\n this.asteroid();\n <\/p>\n

\n n–;\n <\/p>\n

\n }\n <\/p>\n

\n }\n <\/p>\n

\n return requestAnimationFrame(this.render);\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.points = function(add, reset) {
\n \n <\/p>\n

\n if (reset === void 0) {
\n \n <\/p>\n

\n this.score += add;\n <\/p>\n

\n this.highscore = Math.max(this.score, this.highscore);\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n this.score = 0;\n <\/p>\n

\n }\n <\/p>\n

\n this.scoreEl.innerHTML = this.score;\n <\/p>\n

\n return this.highscoreEl.innerHTML = this.highscore;\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.collision = function(one, two) {
\n \n <\/p>\n

\n var xc, yc;\n <\/p>\n

\n xc = false;\n <\/p>\n

\n yc = false;\n <\/p>\n

\n if (Math.abs(one.x – two.x) < (0.75 * (one.scale + two.scale))) {
\n \n <\/p>\n

\n xc = true;\n <\/p>\n

\n }\n <\/p>\n

\n if (Math.abs(one.y – two.y) < (0.75 * (one.scale + two.scale))) {
\n \n <\/p>\n

\n yc = true;\n <\/p>\n

\n }\n <\/p>\n

\n if ((xc === yc && yc === true)) {
\n \n <\/p>\n

\n return true;\n <\/p>\n

\n } else {
\n \n <\/p>\n

\n return false;\n <\/p>\n

\n }\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.loop = function(v) {
\n \n <\/p>\n

\n var buffer;\n <\/p>\n

\n buffer = 30;\n <\/p>\n

\n if (v.x > window.innerWidth \/ 2 + buffer) {
\n \n <\/p>\n

\n v.x = -window.innerWidth \/ 2 – (buffer \/ 2);\n <\/p>\n

\n }\n <\/p>\n

\n if (v.x < -window.innerWidth \/ 2 – buffer) {
\n \n <\/p>\n

\n v.x = window.innerWidth \/ 2 + (buffer \/ 2);\n <\/p>\n

\n }\n <\/p>\n

\n if (v.y > window.innerHeight \/ 2 + buffer) {
\n \n <\/p>\n

\n v.y = -window.innerHeight \/ 2 – (buffer \/ 2);\n <\/p>\n

\n }\n <\/p>\n

\n if (v.y < -window.innerHeight \/ 2 – buffer) {
\n \n <\/p>\n

\n v.y = window.innerHeight \/ 2 + (buffer \/ 2);\n <\/p>\n

\n }\n <\/p>\n

\n return v;\n <\/p>\n

\n };\n <\/p>\n

\n AsteroidsView.prototype.pos = function(v) {
\n \n <\/p>\n

\n var s;\n <\/p>\n

\n s = “opacity: 1;”;\n <\/p>\n

\n s += “-webkit-transform: translate(” + (Math.round(v.x)) + “px,” + (Math.round(v.y)) + “px) rotate(” + (Math.round(v.a)) + “deg) ; “;\n <\/p>\n

\n s += “-moz-transform: translate(” + (Math.round(v.x)) + “px,” + (Math.round(v.y)) + “px) rotate(” + (Math.round(v.a)) + “deg) ; “;\n <\/p>\n

\n s += “-ms-transform: translate(” + (Math.round(v.x)) + “px,” + (Math.round(v.y)) + “px) rotate(” + (Math.round(v.a)) + “deg) ; “;\n <\/p>\n

\n s += “-o-transform: translate(” + (Math.round(v.x)) + “px,” + (Math.round(v.y)) + “px) rotate(” + (Math.round(v.a)) + “deg) ; “;\n <\/p>\n

\n s += “transform: translate(” + (Math.round(v.x)) + “px,” + (Math.round(v.y)) + “px) rotate(” + (Math.round(v.a)) + “deg) ;”;\n <\/p>\n

\n return s;\n <\/p>\n

\n };\n <\/p>\n

\n return AsteroidsView;\n <\/p>\n

\n })();\n <\/p>\n

\n game = new AsteroidsView;\n <\/p>\n

\n game.init();\n <\/p>\n

\n }).call(this);\n <\/p>\n<\/p><\/div>\n<\/p><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

JavaScript \u8bed\u8a00\uff1a JaveScriptBabelCoffeeScript \u786e\u5b9a (function […]<\/p>\n","protected":false},"author":1,"featured_media":215,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-2024","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-23"],"yoast_head":"\nhtml5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620fhtml5-js-\u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\" \/>\n<meta property=\"og:description\" content=\"JavaScript \u8bed\u8a00\uff1a JaveScriptBabelCoffeeScript \u786e\u5b9a (function […]\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620fhtml5-js-\u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\/\" \/>\n<meta property=\"og:site_name\" content=\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\" \/>\n<meta property=\"article:published_time\" content=\"2025-05-09T10:00:21+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"260\" \/>\n\t<meta property=\"og:image:height\" content=\"180\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"admin@wunen\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin@wunen\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#article\",\"isPartOf\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/\"},\"author\":{\"name\":\"admin@wunen\",\"@id\":\"http:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8\"},\"headline\":\"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\",\"datePublished\":\"2025-05-09T10:00:21+00:00\",\"mainEntityOfPage\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/\"},\"wordCount\":1542,\"commentCount\":0,\"publisher\":{\"@id\":\"http:\/\/www.wunen.com\/#organization\"},\"image\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"articleSection\":[\"\u5c04\u51fb\u6e38\u620f\"],\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/\",\"url\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/\",\"name\":\"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"isPartOf\":{\"@id\":\"http:\/\/www.wunen.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"datePublished\":\"2025-05-09T10:00:21+00:00\",\"breadcrumb\":{\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage\",\"url\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"contentUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg\",\"width\":260,\"height\":180},{\"@type\":\"BreadcrumbList\",\"@id\":\"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"http:\/\/www.wunen.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\"}]},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.wunen.com\/#website\",\"url\":\"http:\/\/www.wunen.com\/\",\"name\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"description\":\"\u8f6f\u4ef6\u8d44\u8baf\u6765\u7269\u5ae9\",\"publisher\":{\"@id\":\"http:\/\/www.wunen.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.wunen.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Organization\",\"@id\":\"http:\/\/www.wunen.com\/#organization\",\"name\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\",\"url\":\"http:\/\/www.wunen.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/www.wunen.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png\",\"contentUrl\":\"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png\",\"width\":1024,\"height\":1024,\"caption\":\"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51\"},\"image\":{\"@id\":\"http:\/\/www.wunen.com\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8\",\"name\":\"admin@wunen\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"http:\/\/www.wunen.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g\",\"caption\":\"admin@wunen\"},\"sameAs\":[\"http:\/\/www.wunen.com\"],\"url\":\"http:\/\/www.wunen.com\/index.php\/author\/adminwunen\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620fhtml5-js-\u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\/","og_locale":"zh_CN","og_type":"article","og_title":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","og_description":"JavaScript \u8bed\u8a00\uff1a JaveScriptBabelCoffeeScript \u786e\u5b9a (function […]","og_url":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620fhtml5-js-\u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f\/","og_site_name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","article_published_time":"2025-05-09T10:00:21+00:00","og_image":[{"width":260,"height":180,"url":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","type":"image\/jpeg"}],"author":"admin@wunen","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin@wunen","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"8 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#article","isPartOf":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/"},"author":{"name":"admin@wunen","@id":"http:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8"},"headline":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f","datePublished":"2025-05-09T10:00:21+00:00","mainEntityOfPage":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/"},"wordCount":1542,"commentCount":0,"publisher":{"@id":"http:\/\/www.wunen.com\/#organization"},"image":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage"},"thumbnailUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","articleSection":["\u5c04\u51fb\u6e38\u620f"],"inLanguage":"zh-Hans","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#respond"]}]},{"@type":"WebPage","@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/","url":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/","name":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f - \u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","isPartOf":{"@id":"http:\/\/www.wunen.com\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage"},"image":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage"},"thumbnailUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","datePublished":"2025-05-09T10:00:21+00:00","breadcrumb":{"@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/"]}]},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#primaryimage","url":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","contentUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/\u8d44\u8baf.jpg","width":260,"height":180},{"@type":"BreadcrumbList","@id":"http:\/\/www.wunen.com\/index.php\/2025\/05\/09\/html5%e6%80%8e%e4%b9%88%e5%81%9a%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8fhtml5-js-%e5%b0%8f%e8%a1%8c%e6%98%9f%e5%b0%84%e5%87%bb%e6%b8%b8%e6%88%8f\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"http:\/\/www.wunen.com\/"},{"@type":"ListItem","position":2,"name":"html5\u600e\u4e48\u505a\u5c04\u51fb\u6e38\u620f,HTML5\/JS \u5c0f\u884c\u661f\u5c04\u51fb\u6e38\u620f"}]},{"@type":"WebSite","@id":"http:\/\/www.wunen.com\/#website","url":"http:\/\/www.wunen.com\/","name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","description":"\u8f6f\u4ef6\u8d44\u8baf\u6765\u7269\u5ae9","publisher":{"@id":"http:\/\/www.wunen.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.wunen.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"zh-Hans"},{"@type":"Organization","@id":"http:\/\/www.wunen.com\/#organization","name":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51","url":"http:\/\/www.wunen.com\/","logo":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/www.wunen.com\/#\/schema\/logo\/image\/","url":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png","contentUrl":"http:\/\/www.wunen.com\/wp-content\/uploads\/2025\/03\/cropped-\u7269\u5ae9-1.png","width":1024,"height":1024,"caption":"\u7269\u5ae9\u8f6f\u4ef6\u8d44\u8baf\u7f51"},"image":{"@id":"http:\/\/www.wunen.com\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/www.wunen.com\/#\/schema\/person\/d5f7a6cf545656a9c90d507e64452db8","name":"admin@wunen","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"http:\/\/www.wunen.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/d90ec1e3faf77c4d4e66e40c29b85ff6401161e0502f401dae2f0e25b38ce25e?s=96&d=mm&r=g","caption":"admin@wunen"},"sameAs":["http:\/\/www.wunen.com"],"url":"http:\/\/www.wunen.com\/index.php\/author\/adminwunen\/"}]}},"_links":{"self":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts\/2024","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/comments?post=2024"}],"version-history":[{"count":0,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/posts\/2024\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/media\/215"}],"wp:attachment":[{"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/media?parent=2024"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/categories?post=2024"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.wunen.com\/index.php\/wp-json\/wp\/v2\/tags?post=2024"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}