{"id":45780,"date":"2022-12-14T13:35:58","date_gmt":"2022-12-14T13:35:58","guid":{"rendered":"https:\/\/pitchmark.com\/orm\/"},"modified":"2023-11-28T14:32:24","modified_gmt":"2023-11-28T14:32:24","slug":"orm","status":"publish","type":"page","link":"https:\/\/pitchmark.com\/sv\/orm\/","title":{"rendered":"Orm"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"45780\" class=\"elementor elementor-45780 elementor-33883\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\" data-elementor-post-type=\"page\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-3bec0014 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"3bec0014\" data-element_type=\"section\" data-e-type=\"section\" id=\"top\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d2b4a19\" data-id=\"d2b4a19\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-2197bec8 elementor-widget elementor-widget-heading\" data-id=\"2197bec8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Orm<\/h1>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-53bfe61d elementor-widget-divider--view-line elementor-widget elementor-widget-divider\" data-id=\"53bfe61d\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"divider.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"elementor-divider\">\n\t\t\t<span class=\"elementor-divider-separator\">\n\t\t\t\t\t\t<\/span>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-6d79b9a1 elementor-widget elementor-widget-heading\" data-id=\"6d79b9a1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Du skulle inte ha hittat det h\u00e4r<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-76071bf4 elementor-widget elementor-widget-text-editor\" data-id=\"76071bf4\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<div style=\"margin: 0px; padding: 0px; color: #666666; font-family: Roboto, Arial, Helvetica, sans-serif; font-size: 14px;\" data-hook=\"rcv-block1\">Anv\u00e4nd tangenterna W,A,S,D p\u00e5 ditt tangentbord f\u00f6r att styra ormen nedanf\u00f6r och samla \u00e4pplena utan att g\u00e5 tillbaka p\u00e5 dig sj\u00e4lv.<\/div>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-83f1dc9 elementor-section-boxed elementor-section-height-default elementor-section-height-default\" data-id=\"83f1dc9\" data-element_type=\"section\" data-e-type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-default\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-214af17\" data-id=\"214af17\" data-element_type=\"column\" data-e-type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-5abb0d8 elementor-widget elementor-widget-html\" data-id=\"5abb0d8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t  \n\n  \n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-skala=1.0\">\n    <meta http-equiv=\"X-UA-Compatible\" content=\"ie=kant\">\n    <title>Ormspel med HTML och Javascript - Studytonight<\/title>\n    <style>\n        .game-box {\n            text-align:center;   \n        }\n        .game-info {\n            text-align:center; \n            font-family:arial;\n            line-height:24px;\n        }\n    <\/style>\n  \n  \n    <div class=\"game-box\"><canvas id=\"canvas\" width=\"400\" height=\"400\"><\/canvas><\/div>\n    <div class=\"game-info\">\n        \n        <p id=\"game-status\"><\/p>\n        <p id=\"game-score\"><\/p>\n    <\/div>\n\n    <script>\n      var canvas, ctx, gameControl, gameActive;\n      \/\/ render X times per second\n      var x = 8;\n      \n      const CANVAS_BORDER_COLOUR = '#3c3c3b';\n      const CANVAS_BACKGROUND_COLOUR = \"#21532b\";\n      const SNAKE_COLOUR = 'white';\n      const SNAKE_BORDER_COLOUR = '#358f43';\n\n\n      window.onload = function() {\n        canvas = document.getElementById(\"canvas\");\n        ctx = canvas.getContext(\"2d\");\n\n        document.addEventListener(\"keydown\", keyDownEvent);\n\n        gameControl = startGame(x);\n      };\n      \n      \/* function to start the game *\/\n      function startGame(x) {\n          \/\/ setting gameActive flag to true\n          gameActive = true;\n          document.getElementById(\"game-status\").innerHTML = \"<small>Game Started<\/small>\";\n          document.getElementById(\"game-score\").innerHTML = \"\";\n          return setInterval(draw, 1000 \/ x);\n      }\n      \n      function pauseGame() {\n          \/\/ setting gameActive flag to false\n          clearInterval(gameControl);\n          gameActive = false;\n          document.getElementById(\"game-status\").innerHTML = \"<small>Game Paused<\/small>\";\n      }\n      \n      function endGame(x) {\n          \/\/ setting gameActive flag to false\n          clearInterval(gameControl);\n          gameActive = false;\n          document.getElementById(\"game-status\").innerHTML = \"<small>Game Over<\/small>\";\n          document.getElementById(\"game-score\").innerHTML = \"<h1>Score: \" + x + \"<\/h1>\";\n      }\n\n      \/\/ game world\n      var gridSize = (tileSize = 20); \/\/ 20 x 20 = 400\n      var nextX = (nextY = 0);\n\n      \/\/ snake\n      var defaultTailSize = 3;\n      var tailSize = defaultTailSize;\n      var snakeTrail = [];\n      var snakeX = (snakeY = 10);\n\n      \/\/ apple\n      var appleX = (appleY = 15);\n\n      \/\/ draw\n      function draw() {\n        \/\/ move snake in next pos\n        snakeX += nextX;\n        snakeY += nextY;\n\n        \/\/ snake over game world?\n        if (snakeX <0) { snakeX = gridSize - 1; } if (snakeX> gridSize - 1) {\n          snakeX = 0;\n        }\n\n        if (snakeY <0) { snakeY = gridSize - 1; } if (snakeY> gridSize - 1) {\n          snakeY = 0;\n        }\n\n        \/\/snake bite apple?\n        if (snakeX == appleX && snakeY == appleY) {\n          tailSize++;\n\n          appleX = Math.floor(Math.random() * gridSize);\n          appleY = Math.floor(Math.random() * gridSize);\n        }\n\n        \/\/  Select the colour to fill the canvas\n      ctx.fillStyle = CANVAS_BACKGROUND_COLOUR;\n      \/\/  Select the colour for the border of the canvas\n      ctx.strokestyle = CANVAS_BORDER_COLOUR;\n\n      \/\/ Draw a \"filled\" rectangle to cover the entire canvas\n      ctx.fillRect(0, 0, canvas.width, canvas.height);\n      \/\/ Draw a \"border\" around the entire canvas\n      ctx.strokeRect(0, 0, canvas.width, canvas.height);\n\n        \/\/ paint snake\n        ctx.fillStyle = SNAKE_COLOUR;\n        ctx.strokestyle = SNAKE_BORDER_COLOUR;\n        for (var i = 0; i <snakeTrail.length; i++) { ctx.fillRect( snakeTrail[i].x * tileSize, snakeTrail[i].y * tileSize, tileSize, tileSize ); ctx.strokeRect(snakeTrail[i].x * tileSize , snakeTrail[i].y* tileSize, tileSize, tileSize); \/\/snake bites it's tail? if (snakeTrail[i].x == snakeX && snakeTrail[i].y == snakeY) { if(tailSize> 3) {\n                endGame(tailSize);\n            }\n            tailSize = defaultTailSize;  \n          }\n        }\n\n        \/\/ paint apple\n        ctx.fillStyle = \"red\";\n        ctx.fillRect(appleX * tileSize, appleY * tileSize, tileSize, tileSize);\n\n        \/\/set snake trail\n        snakeTrail.push({ x: snakeX, y: snakeY });\n        while (snakeTrail.length > tailSize) {\n          snakeTrail.shift();\n        }\n      }\n\n      \/\/ input\n      function keyDownEvent(e) {\n        switch (e.keyCode) {\n          case 65:\n            nextX = -1;\n            nextY = 0;\n            break;\n          case 87:\n            nextX = 0;\n            nextY = -1;\n            break;\n          case 68:\n            nextX = 1;\n            nextY = 0;\n            break;\n          case 83:\n            nextX = 0;\n            nextY = 1;\n            break;\n          case 32:\n            if(gameActive == true) {\n                pauseGame();\n            }\n            else {\n                gameControl = startGame(x);\n            }\n            break;\n        }\n      }\n    <\/script>\n  \n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Orm Du skulle inte ha hittat det h\u00e4r Anv\u00e4nd tangenterna W,A,S,D p\u00e5 ditt tangentbord f\u00f6r att styra ormen nedanf\u00f6r och samla \u00e4pplena utan att g\u00e5 tillbaka p\u00e5 dig sj\u00e4lv. Ormspel med HTML och Javascript &#8211; Studytonight<\/p>\n","protected":false},"author":219820763,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-45780","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Orm | Pitchmark<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/pitchmark.com\/sv\/orm\/\" \/>\n<meta property=\"og:locale\" content=\"sv_SE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Orm | Pitchmark\" \/>\n<meta property=\"og:description\" content=\"Orm Du skulle inte ha hittat det h\u00e4r Anv\u00e4nd tangenterna W,A,S,D p\u00e5 ditt tangentbord f\u00f6r att styra ormen nedanf\u00f6r och samla \u00e4pplena utan att g\u00e5 tillbaka p\u00e5 dig sj\u00e4lv. Ormspel med HTML och Javascript &#8211; Studytonight\" \/>\n<meta property=\"og:url\" content=\"https:\/\/pitchmark.com\/sv\/orm\/\" \/>\n<meta property=\"og:site_name\" content=\"Pitchmark\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/Linemarking\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-28T14:32:24+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@PitchmarkLtd\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/orm\\\/\",\"url\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/orm\\\/\",\"name\":\"Orm | Pitchmark\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#website\"},\"datePublished\":\"2022-12-14T13:35:58+00:00\",\"dateModified\":\"2023-11-28T14:32:24+00:00\",\"inLanguage\":\"sv-SE\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/pitchmark.com\\\/sv\\\/orm\\\/\"]}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#website\",\"url\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/\",\"name\":\"Pitchmark\",\"description\":\"The Future Of Line Marking\",\"publisher\":{\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"sv-SE\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#organization\",\"name\":\"Pitchmark\",\"url\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"sv-SE\",\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/pitchmark.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Pitchmark-Dark-Green-Oval.png\",\"contentUrl\":\"https:\\\/\\\/pitchmark.com\\\/wp-content\\\/uploads\\\/2022\\\/11\\\/Pitchmark-Dark-Green-Oval.png\",\"width\":1348,\"height\":522,\"caption\":\"Pitchmark\"},\"image\":{\"@id\":\"https:\\\/\\\/pitchmark.com\\\/sv\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/Linemarking\",\"https:\\\/\\\/x.com\\\/PitchmarkLtd\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Orm | Pitchmark","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":"https:\/\/pitchmark.com\/sv\/orm\/","og_locale":"sv_SE","og_type":"article","og_title":"Orm | Pitchmark","og_description":"Orm Du skulle inte ha hittat det h\u00e4r Anv\u00e4nd tangenterna W,A,S,D p\u00e5 ditt tangentbord f\u00f6r att styra ormen nedanf\u00f6r och samla \u00e4pplena utan att g\u00e5 tillbaka p\u00e5 dig sj\u00e4lv. Ormspel med HTML och Javascript &#8211; Studytonight","og_url":"https:\/\/pitchmark.com\/sv\/orm\/","og_site_name":"Pitchmark","article_publisher":"https:\/\/www.facebook.com\/Linemarking","article_modified_time":"2023-11-28T14:32:24+00:00","twitter_card":"summary_large_image","twitter_site":"@PitchmarkLtd","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/pitchmark.com\/sv\/orm\/","url":"https:\/\/pitchmark.com\/sv\/orm\/","name":"Orm | Pitchmark","isPartOf":{"@id":"https:\/\/pitchmark.com\/sv\/#website"},"datePublished":"2022-12-14T13:35:58+00:00","dateModified":"2023-11-28T14:32:24+00:00","inLanguage":"sv-SE","potentialAction":[{"@type":"ReadAction","target":["https:\/\/pitchmark.com\/sv\/orm\/"]}]},{"@type":"WebSite","@id":"https:\/\/pitchmark.com\/sv\/#website","url":"https:\/\/pitchmark.com\/sv\/","name":"Pitchmark","description":"The Future Of Line Marking","publisher":{"@id":"https:\/\/pitchmark.com\/sv\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/pitchmark.com\/sv\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"sv-SE"},{"@type":"Organization","@id":"https:\/\/pitchmark.com\/sv\/#organization","name":"Pitchmark","url":"https:\/\/pitchmark.com\/sv\/","logo":{"@type":"ImageObject","inLanguage":"sv-SE","@id":"https:\/\/pitchmark.com\/sv\/#\/schema\/logo\/image\/","url":"https:\/\/pitchmark.com\/wp-content\/uploads\/2022\/11\/Pitchmark-Dark-Green-Oval.png","contentUrl":"https:\/\/pitchmark.com\/wp-content\/uploads\/2022\/11\/Pitchmark-Dark-Green-Oval.png","width":1348,"height":522,"caption":"Pitchmark"},"image":{"@id":"https:\/\/pitchmark.com\/sv\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/Linemarking","https:\/\/x.com\/PitchmarkLtd"]}]}},"jetpack_likes_enabled":false,"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PdSCqU-bUo","_links":{"self":[{"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/pages\/45780","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/users\/219820763"}],"replies":[{"embeddable":true,"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/comments?post=45780"}],"version-history":[{"count":4,"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/pages\/45780\/revisions"}],"predecessor-version":[{"id":54025,"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/pages\/45780\/revisions\/54025"}],"wp:attachment":[{"href":"https:\/\/pitchmark.com\/sv\/wp-json\/wp\/v2\/media?parent=45780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}