CodePen Embed

Live

This Pen is owned by dandeto on CodePen.

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.

{"__browser":{"country":"US","device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer *; ambient-light-sensor *; camera *; display-capture *; encrypted-media *; geolocation *; gyroscope *; microphone *; midi *; payment *; vr *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"errors":[{"message":"Cannot return null for non-nullable field Query.sessionUser"}],"data":null},"url":"https://codepen.io/graphql","api":"cprails"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production","__boomboom":{"serve_url":"https://cdpn.io/cpe/boomboom","store_url":"https://codepen.io/cpe/boomboom/store"},"__pageType":"embed","__item":"{\"editor_settings\":{\"auto_run\":true,\"autocomplete\":false,\"code_folding\":true,\"css_pre_processor\":\"none\",\"css_prefix\":\"neither\",\"css_starter\":\"neither\",\"emmet_active\":true,\"font_size\":14,\"font_type\":\"system\",\"format_on_save\":false,\"html_pre_processor\":\"none\",\"indent_with\":\"tabs\",\"js_pre_processor\":\"none\",\"key_bindings\":\"normal\",\"line_numbers\":true,\"line_wrapping\":true,\"match_brackets\":true,\"snippets\":{\"markupSnippets\":{},\"stylesheetSnippets\":{}},\"tab_size\":2,\"theme\":\"twilight\",\"id\":\"yLWPxpV\",\"auto_save\":true},\"hashid\":\"yLWPxpV\",\"itemType\":\"pen\",\"resources\":[],\"tags\":[\"html5\",\"canvas\",\"javascript\",\"game\",\"snake\"],\"id\":75313632,\"user_id\":12619101,\"html\":\"<html>\\n\\t<head>\\n\\t\\t<title>Snake game</title>\\n\\t</head>\\n\\t<body>\\n\\t\\t<canvas id=\\\"canvas\\\" width=\\\"500\\\" height=\\\"500\\\"></canvas>\\n\\t\\t<script src=\\\"game.js\\\"></script>\\n\\t</body>\\n</html>\\n\",\"css\":\"\",\"js\":\"// Repository: https://codeberg.org/dandeto/HTML5-Snake\\n// Tutorial: https://www.scipress.io/post/RD2DB4zGgNNkZ6wR9uz0/html5-canvas-snake\\n\\nlet canvas = document.getElementById(\\\"canvas\\\");\\nlet ctx    = canvas.getContext(\\\"2d\\\");\\n\\nconst width       = Number(canvas.width);\\nconst height      = Number(canvas.height);\\nconst tileWidth   = 50;\\nconst tileHeight  = 50;\\nconst tilesX      = Math.round(width / tileWidth);\\nconst tilesY      = Math.round(height / tileHeight);\\nconst totalTiles  = tilesX * tilesY;\\nconst borderWidth = 2;\\n\\nlet gameOver = false;\\nlet eaten    = false;\\n\\nlet player = [];\\nlet apple;\\nlet highscore = 0;\\n\\n// Keyboard controls\\nlet lastKey;\\nlet bufferedKey;\\nlet deniedKey = {\\n\\t\\\"ArrowLeft\\\": \\\"ArrowRight\\\",\\n\\t\\\"ArrowRight\\\": \\\"ArrowLeft\\\",\\n\\t\\\"ArrowUp\\\": \\\"ArrowDown\\\",\\n\\t\\\"ArrowDown\\\": \\\"ArrowUp\\\",\\n\\t\\\"undefined\\\": \\\"ArrowLeft\\\"\\n}\\n\\ndocument.addEventListener(\\\"keydown\\\", function (e) {\\n\\tbufferedKey = e.key;\\n});\\n\\nfunction getKey() {\\n\\tif(bufferedKey == \\\"ArrowLeft\\\" || bufferedKey == \\\"ArrowRight\\\" || bufferedKey == \\\"ArrowUp\\\" || bufferedKey == \\\"ArrowDown\\\") {\\n\\t\\tif(!(deniedKey[lastKey] == bufferedKey)) {\\n\\t\\t\\tlastKey = bufferedKey;\\n\\t\\t}\\n\\t}\\n\\telse if(gameOver && bufferedKey == \\\" \\\") {\\n\\t\\tlastKey = bufferedKey;\\n\\t}\\n}\\n\\n// Setup the game - called once each time we init the game.\\nfunction setup() {\\n\\tif(player.length > highscore)\\n\\t\\thighscore = player.length;\\n\\t\\n\\tgameOver = false;\\n\\tlastKey = undefined;\\n\\tplayer = [\\n\\t\\t{\\n\\t\\t\\tx: 4,\\n\\t\\t\\ty: 5\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\tx: 3,\\n\\t\\t\\ty: 5\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\tx: 2,\\n\\t\\t\\ty: 5\\n\\t\\t},\\n\\t\\t{\\n\\t\\t\\tx: 1,\\n\\t\\t\\ty: 5\\n\\t\\t}\\n\\t];\\n\\n\\tcreateApple();\\n}\\n\\n// Update - called every frame\\nfunction update() {\\n\\tgetKey();\\n\\n\\tif(lastKey == undefined)\\n\\t\\treturn;\\n\\n\\tif(gameOver) {\\n\\t\\tif(lastKey == \\\" \\\") {\\n\\t\\t\\tsetup();\\n\\t\\t}\\n\\t\\treturn;\\n\\t}\\n\\n\\t// Remove the last element in the array\\n\\tif(!eaten)\\n\\t\\tplayer.pop();\\n\\telse\\n\\t\\teaten = false;\\n\\n\\t// This is a confusing line of code. We are copying the head of the snake at player[0]\\n\\t// into an empty object {} and returning it to the variable `head`.\\n\\t// If we use `head = player[0]`, we would be referencing `player[0]` instead of copying it.\\n\\tlet head = Object.assign({}, player[0]);\\n\\n\\tif(lastKey == \\\"ArrowLeft\\\")\\n\\t\\t--head.x;\\n\\telse if(lastKey == \\\"ArrowRight\\\")\\n\\t\\t++head.x;\\n\\telse if(lastKey == \\\"ArrowUp\\\")\\n\\t\\t--head.y;\\n\\telse if(lastKey == \\\"ArrowDown\\\")\\n\\t\\t++head.y;\\n\\n\\t// Add the head of the snake to the beginning of the array\\n\\tplayer.unshift(head);\\n\\n\\tfor(let i = 0; i < player.length; ++i) {\\n\\t\\t// Check if the snake has hit itself\\n\\t\\tif(i > 0 && head.x == player[i].x && head.y == player[i].y) {\\n\\t\\t\\tgameOver = true;\\n\\t\\t}\\n\\t\\t\\n\\t\\t// Check if the snake is out of bounds\\n\\t\\tif(player[i].x == tilesX)\\n\\t\\t\\tplayer[i].x = 0;\\n\\t\\telse if(player[i].x == -1)\\n\\t\\t\\tplayer[i].x = tilesX -1;\\n\\t\\t\\n\\t\\tif(player[i].y == tilesY) \\n\\t\\t\\tplayer[i].y = 0;\\n\\t\\telse if(player[i].y == -1)\\n\\t\\t\\tplayer[i].y = tilesY -1;\\n\\t}\\n\\n\\t// Check if the snake hit the apple\\n\\tif(head.x == apple.x && head.y == apple.y) {\\n\\t\\teaten = true;\\n\\t\\tcreateApple();\\n\\t}\\n}\\n\\n// Render - called every frame\\nfunction render() {\\n\\t// Draw background\\n\\tctx.fillStyle = \\\"black\\\";\\n\\tctx.fillRect(0, 0, width, height);\\n\\n\\tif(!gameOver) {\\n\\t\\t// Draw grid\\n\\t\\tfor(var i = 0; i < tilesX; ++i) {\\n\\t\\t\\tfor(var j = 0; j < tilesY; ++j) {\\n\\n\\t\\t\\t\\t// Set the default tile color\\n\\t\\t\\t\\tctx.fillStyle = \\\"blue\\\";\\n\\n\\t\\t\\t\\t// Detect if the player is in this tile\\n\\t\\t\\t\\tfor(var k = 0; k < player.length; ++k) {\\n\\t\\t\\t\\t\\tif(player[k].x == i && player[k].y == j) {\\n\\t\\t\\t\\t\\t\\tctx.fillStyle = \\\"green\\\";\\n\\t\\t\\t\\t\\t\\tbreak;\\n\\t\\t\\t\\t\\t}\\n\\t\\t\\t\\t}\\n\\t\\t\\t\\t\\n\\t\\t\\t\\tdrawTile(i,j);\\n\\t\\t\\t}\\n\\t\\t}\\n\\n\\t\\t// Draw apple\\n\\t\\tctx.fillStyle = \\\"red\\\";\\n\\t\\tdrawTile(apple.x, apple.y);\\n\\t}\\n\\telse {\\n\\t\\t// Draw GameOver screen\\n\\t\\tctx.font = \\\"50px serif\\\";\\n\\t\\tctx.fillStyle = \\\"red\\\";\\n\\t\\tctx.textAlign = \\\"center\\\";\\n\\t\\tctx.fillText(\\\"GAME OVER\\\", width / 2, height / 2);\\n\\t\\tctx.font = \\\"25px serif\\\";\\n\\t\\tctx.fillText(\\\"Press Space to Restart\\\", width / 2, height / 2 + 50);\\n\\t}\\n\\n\\t// Draw the score\\n\\tctx.font = \\\"20px sans serif\\\";\\n\\tctx.fillStyle = \\\"yellow\\\";\\n\\tctx.textAlign = \\\"left\\\";\\n\\tctx.fillText(`Score: ${player.length}`, 10, 20);\\n\\tctx.textAlign = \\\"right\\\";\\n\\tctx.fillText(`Highscore: ${highscore}`, width - 10, 20);\\n}\\n\\n// The entry point for the game\\nfunction main() {\\n\\tupdate();\\n\\trender();\\n}\\n\\n// Utility functions\\nfunction randomTile(max) {\\n\\t// Generate a random number between 0 and max\\n\\tlet randomFloat = Math.random() * max;\\n\\n\\t// Convert float (decimal) to integer\\n\\treturn Math.floor(randomFloat);\\n}\\n\\nfunction drawTile(x, y) {\\n\\t// Calculate the x, y, w, h for each tile\\n\\tx = x * tileWidth + borderWidth;\\n\\ty = y * tileHeight + borderWidth;\\n\\tlet w = tileWidth - borderWidth * 2;\\n\\tlet h = tileHeight - borderWidth * 2;\\n\\n\\t// Draw each tile\\n\\tctx.fillRect(x, y, w, h);\\n}\\n\\nfunction createApple() {\\n\\tlet collision;\\n\\n\\tdo {\\n\\t\\tcollision = false;\\n\\n\\t\\t// Choose a random tile for the Apple\\n\\t\\tapple = {\\n\\t\\t\\tx: randomTile(tilesX),\\n\\t\\t\\ty: randomTile(tilesY)\\n\\t\\t}\\n\\n\\t\\t// Check to see if the apple was generated on a tile the player occupies\\n\\t\\tfor(let i = 0; i < player.length; ++i) {\\n\\t\\t\\tif(player[i].x == apple.x && player[i].y == apple.y) {\\n\\t\\t\\t\\tcollision = true;\\n\\t\\t\\t\\tbreak;\\n\\t\\t\\t}\\n\\t\\t}\\n\\t} while(collision);\\n}\\n\\n// Setup the game before starting the game loop\\nsetup();\\n\\n// This will call the function main at 10fps and start the game\\nsetInterval(main, 1000 / 10);\\n\",\"html_pre_processor\":\"none\",\"css_pre_processor\":\"none\",\"js_pre_processor\":\"none\",\"html_classes\":\"\",\"css_starter\":\"neither\",\"js_library\":null,\"created_at\":\"2024-06-14T03:25:19.549Z\",\"updated_at\":\"2024-07-24T04:35:58.502Z\",\"title\":\"Snake\",\"description\":\"HTML 5 Snake game written in JavaScript.\",\"slug_hash\":\"yLWPxpV\",\"head\":\"\",\"private\":false,\"has_animation\":true,\"team_id\":0,\"css_prefix\":\"neither\",\"template\":false,\"parent_id\":0,\"comments_count\":0,\"custom_screenshot_filename\":null,\"loves_count\":2,\"pick\":false,\"popularity_score\":22,\"views_count\":120,\"pick_visible_at\":null,\"cpid\":\"019014c7-3b3d-732a-ad1b-36378da9e10f\",\"is_new_editor_pen\":false,\"protected\":false,\"access\":\"Public\",\"pen_hash\":null}","__processorsMap":{"autoprefixer":"autoprefixer-10","babel":"babel-7","coffeescript":"coffeescript-2","format-1":"format-1","flutter":"flutter-1","haml":"haml-4","less":"less-3","lint-1":"lint-1","livescript":"livescript-1","markdown":"markdown-11","postcss":"postcss-7","pug":"pug-2","sass":"sass-1","scss":"sass-1","sass-ruby-3":"sass-ruby-3","sass-ruby-compass-3":"sass-ruby-compass-3","slim":"slim-3","stylus":"stylus-0","typescript":"typescript-4","vue":"vue-2","vue3":"vue-3"},"__favicon_mask_icon":"https://cpwebassets.codepen.io/assets/favicon/logo-pin-b4b4269c16397ad2f0f7a01bcdf513a1994f4c94b8af2f191c09eb0d601762b1.svg","__favicon_shortcut_icon":"https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico","__path_to_iframe_console_runner":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeConsoleRunner-6d8bf8b4b479137260842506acbb12717dace0823c023e08b96360e60b0840d9.js","__path_to_iframe_refresh_css":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRefreshCSS-44fe83e49b63affec96918c9af88c0d80b209a862cf87ac46bc933074b8c557d.js","__path_to_iframe_runtime_errors":"https://cpwebassets.codepen.io/assets/editor/iframe/iframeRuntimeErrors-4f205f2c14e769b448bcf477de2938c681660d5038bc464e3700256713ebe261.js","__path_to_processor_worker":"https://cpwebassets.codepen.io/assets/packs/router.js","__path_to_stop_execution_on_timeout":"https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-2c7831bb44f98c1391d6a4ffda0e1fd302503391ca806e7fcc7b9b87197aec26.js","__pen_normalize_css_url":"https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css","__pen_prefix_free_url":"https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js","__pen_reset_css_url":"https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"}