{"id":519,"date":"2026-03-09T16:46:35","date_gmt":"2026-03-09T22:46:35","guid":{"rendered":"https:\/\/www.momentumoptimum.com\/marketplace\/?page_id=519"},"modified":"2026-03-09T16:47:55","modified_gmt":"2026-03-09T22:47:55","slug":"serpientes","status":"publish","type":"page","link":"https:\/\/www.momentumoptimum.com\/marketplace\/serpientes\/","title":{"rendered":"Serpientes"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Serpientes<\/h1>\n\n\n\n<style type=\"text\/css\">\n    .serpientes {\n      height: 90vh;\n      width: 75vw;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      margin: 0;\n      background-color: transparent;\noverflow: hidden;\n    }\n\n    #game-board {\n      background-color: black;\n\/*background-image: url('https:\/\/www.momentumoptimum.com\/vendedores\/img\/MOP-250x250-trans.svg');\nbackground-size: cover;\nbackground-position: 50% 50%;\nbackground-repeat: no-repeat; *\/\nwidth: 90vmin;\n      height: 90vmin;\n      display: grid;\n      grid-template-rows: repeat(21, 1fr);\n      grid-template-columns: repeat(21, 1fr);\n    }\n\n    .snake {\n      background-color: hsl(200, 100%, 50%);\n      border: .25vmin solid black;\n    }\n\n    .food {\n      background-color: hsl(50, 100%, 50%);\n      border: .25vmin solid black;\n    }\n    .btnsnake{\n        z-index:1000;\n  margin: 0;\n  position: sticky;\n  top: 50%;\n  left: 50%;\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n    }\n\n  <\/style>\n    <section id=\"serpientes\" class=\"serpientes\">\n        <div id=\"game-board\">\n            <button id=\"btnSnake\" class=\"btnsnake\" onclick=\"javascript:disableScroll();\">Empezar juego<\/button>\n<\/div>\n    <\/section>\n<div>\n        <br>\n        <p>*Da click en el bot\u00f3n para empezar y mueve las flechas<\/p>\n<\/div>\n    <script type=\"text\/javascript\">\nfunction disableScroll() {\nconsole.log(\"disablescroll\");\n    \/\/ Get the current page scroll position\n    scrollTop = window.pageYOffset || document.documentElement.scrollTop;\n    scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,\n        \/\/ if any scroll is attempted, set this to the previous value\n        window.onscroll = function() {\n            window.scrollTo(scrollLeft, scrollTop);\n        };\n            var btn = document.getElementById(\"btnSnake\");\n            btn.style.display = \"none\";\n    snakes();\n}\n\nfunction enableScroll() {\n    window.onscroll = function() {};\n}\n\nfunction snakes()\n{\nconst GRID_SIZE = 21\nconst SNAKE_SPEED = 5\nconst snakeBody = [{ x: 11, y: 11 }]\nlet newSegments = 0\n\nlet food = getRandomFoodPosition()\nconst EXPANSION_RATE = 5\n\nfunction updateFood() {\n    if (onSnake(food)) {\n        expandSnake(EXPANSION_RATE)\n        food = getRandomFoodPosition()\n    }\n}\n\nfunction drawFood(gameBoard) {\n    const foodElement = document.createElement('div')\n    foodElement.style.gridRowStart = food.y\n    foodElement.style.gridColumnStart = food.x\n    foodElement.classList.add('food')\n    gameBoard.appendChild(foodElement)\n}\n\nfunction getRandomFoodPosition() {\n    let newFoodPosition\n    while (newFoodPosition == null || onSnake(newFoodPosition)) {\n        newFoodPosition = randomGridPosition()\n    }\n    return newFoodPosition\n}\n\nlet lastRenderTime = 0\nlet gameOver = false\nconst gameBoard = document.getElementById('game-board')\n\nfunction main(currentTime) {\n    if (gameOver) {\n        if (confirm('Perdiste. Aprieta ok para reiniciar.')) {\n            window.location = '\/marketplace\/serpientes'\n        }\nelse{\nenableScroll();\nvar btn = document.createElement(\"BUTTON\"); \n            btn.style.display = \"block\";\nbtn.setAttribute(\"id\",\"btnSnake\");\nbtn.setAttribute(\"class\",\"btnsnake\");\nbtn.setAttribute(\"onclick\",\"javascript:disableScroll();\");\nbtn.innerHTML = \"Empezar juego\";\nvar board = document.getElementById(\"game-board\");\ngameBoard.innerHTML = '';\nboard.appendChild(btn);\n}\n        return\n    }\n\n    window.requestAnimationFrame(main);\n    const secondsSinceLastRender = (currentTime - lastRenderTime) \/ 1000\n    if (secondsSinceLastRender < 1 \/ SNAKE_SPEED) return\n\n\n    lastRenderTime = currentTime\n\n    update2()\n    draw2()\n}\n\nwindow.requestAnimationFrame(main)\n\nfunction update2() {\n    updateSnake()\n    updateFood()\n    checkDeath()\n}\n\nfunction draw2() {\n    gameBoard.innerHTML = ''\n    drawSnake(gameBoard)\n    drawFood(gameBoard)\n}\n\nfunction checkDeath() {\n    gameOver = outsideGrid(getSnakeHead()) || snakeIntersection()\n}\n\n\nfunction randomGridPosition() {\n    return {\n        x: Math.floor(Math.random() * GRID_SIZE) + 1,\n        y: Math.floor(Math.random() * GRID_SIZE) + 1\n    }\n}\n\nfunction outsideGrid(position) {\n    return (\n      position.x < 1 || position.x > GRID_SIZE ||\n      position.y < 1 || position.y > GRID_SIZE\n    )\n}\n\nlet inputDirection = { x: 0, y: 0 }\nlet lastInputDirection = { x: 0, y: 0 }\n\nwindow.addEventListener('keydown', e => {\n    console.log(\"in key down\");\n    switch (e.key) {\n        case 'ArrowUp':\n            if (lastInputDirection.y !== 0) break\n            inputDirection = { x: 0, y: -1 }\n            break\n        case 'ArrowDown':\n            if (lastInputDirection.y !== 0) break\n            inputDirection = { x: 0, y: 1 }\n            break\n        case 'ArrowLeft':\n            if (lastInputDirection.x !== 0) break\n            inputDirection = { x: -1, y: 0 }\n            break\n        case 'ArrowRight':\n            if (lastInputDirection.x !== 0) break\n            inputDirection = { x: 1, y: 0 }\n            break\n    }\n})\n\nfunction getInputDirection() {\n    lastInputDirection = inputDirection\n    return inputDirection\n}\n\n\n\nfunction updateSnake() {\n    addSegments()\n\n    const inputDirection = getInputDirection()\n    for (let i = snakeBody.length - 2; i >= 0; i--) {\n        snakeBody[i + 1] = { ...snakeBody[i] }\n        }\n\n        snakeBody[0].x += inputDirection.x\n        snakeBody[0].y += inputDirection.y\n    }\n\nfunction drawSnake(gameBoard) {\n    snakeBody.forEach(segment => {\n        const snakeElement = document.createElement('div')\n        snakeElement.style.gridRowStart = segment.y\n        snakeElement.style.gridColumnStart = segment.x\n        snakeElement.classList.add('snake')\n        gameBoard.appendChild(snakeElement)\n    })\n}\n\nfunction expandSnake(amount) {\n    newSegments += amount\n}\n\nfunction onSnake(position, { ignoreHead = false } = {}) {\n  return snakeBody.some((segment, index) => {\n      if (ignoreHead && index === 0) return false\n      return equalPositions(segment, position)\n  })\n}\n\nfunction getSnakeHead() {\n    return snakeBody[0]\n}\n\nfunction snakeIntersection() {\n    return onSnake(snakeBody[0], { ignoreHead: true })\n}\n\nfunction equalPositions(pos1, pos2) {\n    return pos1.x === pos2.x && pos1.y === pos2.y\n}\n\nfunction addSegments() {\n    for (let i = 0; i < newSegments; i++) {\n        snakeBody.push({ ...snakeBody[snakeBody.length - 1] })\n  }\n\nnewSegments = 0\n}\n}\n    <\/script>\n","protected":false},"excerpt":{"rendered":"<p>Serpientes Empezar juego *Da click en el bot\u00f3n para empezar y mueve las flechas<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_crdt_document":"","footnotes":""},"class_list":["post-519","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/pages\/519","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/comments?post=519"}],"version-history":[{"count":2,"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/pages\/519\/revisions"}],"predecessor-version":[{"id":521,"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/pages\/519\/revisions\/521"}],"wp:attachment":[{"href":"https:\/\/www.momentumoptimum.com\/marketplace\/wp-json\/wp\/v2\/media?parent=519"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}