CrazyManth3 Posted December 5, 2019 Report Share Posted December 5, 2019 So I noticed the button for "code", and there are options for JavaScript and Python, and several other types of coding. I was wondering what cool amazing things the people of the Shard can do with this option. I once had a Web Design class where we learned HTML, but I've forgotten how to do it... <header> I forgot how HTML works 0 Quote Link to comment Share on other sites More sharing options...
Lunamor Posted December 5, 2019 Report Share Posted December 5, 2019 (edited) Unfortunately the code option is only so the code posted on the site is formatted correctly, it can’t actually do anything Edited December 5, 2019 by Ookla the Excessive 0 Quote Link to comment Share on other sites More sharing options...
CrazyManth3 Posted December 5, 2019 Author Report Share Posted December 5, 2019 (edited) Shoot. What is the aide? (function() { var SIZE = 500; // Size of the play-field in pixels var GRID_SIZE = SIZE / 50; var c = document.getElementById('c'); c.height = c.width = SIZE * 2; // 2x our resolution so retina screens look good c.style.width = c.style.height = SIZE + 'px'; var context = c.getContext('2d'); context.scale(2, 2); // Scale our canvas for retina screens var direction = newDirection = 1; // -2: up, 2: down, -1: left, 1: right var snakeLength = 5; var snake = [{x: SIZE / 2, y: SIZE / 2}]; // Snake starts in the center var candy = null; var end = false; function randomOffset() { return Math.floor(Math.random() * SIZE / GRID_SIZE) * GRID_SIZE; } function stringifyCoord(obj) { return [obj.x, obj.y].join(','); } function tick() { var newHead = {x: snake[0].x, y: snake[0].y}; // Only change directon if the new direction is a different axis if (Math.abs(direction) !== Math.abs(newDirection)) { direction = newDirection; } var axis = Math.abs(direction) === 1 ? 'x' : 'y'; // 1, -1 are X; 2, -2 are Y if (direction < 0) { newHead[axis] -= GRID_SIZE; // Move left or down } else { newHead[axis] += GRID_SIZE; // Move right or up } // Did we eat a candy? Detect if our head is in the same cell as the candy if (candy && candy.x === newHead.x && candy.y === newHead.y) { candy = null; snakeLength += 20; } context.fillStyle = '#002b36'; context.fillRect(0, 0, SIZE, SIZE); // Reset the play area if (end) { context.fillStyle = '#eee8d5'; context.font = '40px serif'; context.textAlign = 'center'; context.fillText('Refresh to play again', SIZE / 2, SIZE / 2); } else { snake.unshift(newHead); // Add the new head to the front snake = snake.slice(0, snakeLength); // Enforce the snake's max length } // Detect wall collisions if (newHead.x < 0 || newHead.x >= SIZE || newHead.y < 0 || newHead.y >= SIZE) { end = true; } context.fillStyle = '#268bd2'; var snakeObj = {}; for (var i = 0; i < snake.length; i++) { var a = snake[i]; context.fillRect(a.x, a.y, GRID_SIZE, GRID_SIZE); // Paint the snake // Build a collision lookup object if (i > 0) snakeObj[stringifyCoord(a)] = true; } if (snakeObj[stringifyCoord(newHead)]) end = true; // Collided with our tail // Place a candy (not on the snake) if needed while (!candy || snakeObj[stringifyCoord(candy)]) { candy = {x: randomOffset(), y: randomOffset()}; } context.fillStyle = '#b58900'; context.fillRect(candy.x, candy.y, GRID_SIZE, GRID_SIZE); // Paint the candy } window.onload = function() { setInterval(tick, 100); // Kick off the game loop! window.onkeydown = function(e) { newDirection = {37: -1, 38: -2, 39: 1, 40: 2}[e.keyCode] || newDirection; }; }; })(); Oh it's just source code, now it makes sense Edited December 5, 2019 by Ookla the Crazy curious to see how this works 0 Quote Link to comment Share on other sites More sharing options...
Lunamor Posted December 5, 2019 Report Share Posted December 5, 2019 3 minutes ago, Ookla the Crazy said: What is the aide? I meant to type site, sorry 0 Quote Link to comment Share on other sites More sharing options...
CrazyManth3 Posted December 5, 2019 Author Report Share Posted December 5, 2019 oh okay... I am now sad... Though why does it ask for the type of code you are using? 0 Quote Link to comment Share on other sites More sharing options...
Lunamor Posted December 5, 2019 Report Share Posted December 5, 2019 Different ones use different colors and formats. Python, for example, needs to have its spacing perfect otherwise it won’t work while stuff like C# just needs to have ;s and {} in the right places. 0 Quote Link to comment Share on other sites More sharing options...
CrazyManth3 Posted December 5, 2019 Author Report Share Posted December 5, 2019 Huh, well this exploration was enlightening and at least worth a try. 0 Quote Link to comment Share on other sites More sharing options...
Lunamor Posted December 5, 2019 Report Share Posted December 5, 2019 Yay for half-success! 0 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.