https:\/\/github.com\/jagode67\/juegosJS\/blob\/main\/Serpiente.html<\/a><\/p>\n\n\n\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>Snake<\/title>\n<\/head>\n\n<body>\n <canvas id=\"canv\" width=\"400\" height=\"400\"><\/canvas>\n <script>\n posX=posY=10; \/\/posici\u00f3n de la serpiente en celdas\n tamCel=20; \/\/tama\u00f1o de cada recuadro\n canCel=20; \/\/cantidad de celdas en el fondo tamCel*canCel=400\n xPre=yPre=15; \/\/posici\u00f3n del premio\n velX=velY=0; \/\/velocidad serpiente\n serp=[]; \/\/posici\u00f3n de todos los elementos de la serpiente\n longS=5; \/\/longitud de la serpiente\n fps=15;\n tAnterior=0;\n window.onload = function(){\n fondo=window.canv;\n ctx=fondo.getContext(\"2d\")\n document.addEventListener(\"keydown\",teclas)\n \/\/setInterval(jugar,1000\/15); \/\/15 veces por segundo\n requestAnimationFrame(ctrJuego);\n }\n function teclas(tecla){\n switch(tecla.keyCode){\n case 37: \/\/izquerda\n velX=-1;velY=0; break;\n case 38: \/\/arriba\n velX=0;velY=-1; break;\n case 39: \/\/derecha\n velX=1;velY=0; break;\n case 40: \/\/abajo\n velX=0;velY=1; break;\n }\n }\n function ctrJuego(timestamp){\n var delta=timestamp - tAnterior;\n if (delta>=1000\/fps){\n jugar();\n tAnterior=timestamp;\n }\n requestAnimationFrame(ctrJuego);\n }\n function jugar(){\n ctx.fillStyle=\"black\"; \/\/pinta el fondo\n ctx.fillRect(0,0,fondo.width, fondo.height);\n posX+=velX; posY+=velY; \/\/mueve la serpiente\n if (posX<0) posX=canCel-1; \/\/si se va por la izq\n if (posX>canCel-1) posX=0; \/\/si se va por la der\n if (posY<0) posY=canCel-1; \/\/se va por arriba\n if (posY>canCel-1) posY=0; \/\/se va por arriba\n ctx.fillStyle=\"lime\"; \/\/pinta la serpiente\n for (seg of serp){ \/\/saca cada segmento\n ctx.fillRect(seg.x*tamCel,seg.y*tamCel,tamCel-2,tamCel-2); \/\/pinta el segmento \n if (seg.x==posX && seg.y==posY) \/\/Detectar si la serpiente se toca a si misma\n longS=5;\n }\n serp.push({x:posX, y:posY}) \/\/a\u00f1ade el nuevo segmento\n while (serp.length>longS) \/\/quita el \u00faltimo segmento\n serp.shift();\n ctx.fillStyle=\"red\";\n ctx.fillRect(xPre*tamCel,yPre*tamCel,tamCel-2,tamCel-2);\n if (xPre==posX && yPre==posY){ \/\/Si la serpiente est\u00e1 en el premio\n longS++; \/\/aumenta la longitud de la serpiente\n xPre=Math.floor(Math.random()*canCel); \/\/genera la posici\u00f3n del nuevo premio\n yPre=Math.floor(Math.random()*canCel);\n }\n }\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"En menos de 70 l\u00edneas de c\u00f3digo tienes aqu\u00ed el juego de la serpiente realizado en JavaScript, con la ayuda de un <canvas>. No est\u00e1 … <\/p>\n","protected":false},"author":1,"featured_media":1074,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[204,207,361,362],"class_list":["post-1073","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-javascript","tag-javascript","tag-juego","tag-serpiente","tag-snake"],"_links":{"self":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1073","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/comments?post=1073"}],"version-history":[{"count":5,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1073\/revisions"}],"predecessor-version":[{"id":1096,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/posts\/1073\/revisions\/1096"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media\/1074"}],"wp:attachment":[{"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/media?parent=1073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/categories?post=1073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/javigomez.org\/index.php\/wp-json\/wp\/v2\/tags?post=1073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}