Heavy Snake - Level Editor - Dev

Developer
Steven
Size
5,348 Kb
Views
22,264
  1. Heavy Snake - Level Editor - Dev Previews
  2. Heavy Snake - Level Editor - Dev HTML Codes
  3. Heavy Snake - Level Editor - Dev CSS Codes
  4. Heavy Snake - Level Editor - Dev JS Codes

How do I make an heavy snake - level editor - dev?

For reddit.com/r/javascriptstudygrou. What is a heavy snake - level editor - dev? How do you make a heavy snake - level editor - dev? This script and codes were developed by Steven on 07 November 2022, Monday.

Heavy Snake - Level Editor - Dev Previews
IQ Test

Heavy Snake - Level Editor - Dev - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Heavy Snake - Level Editor - Dev</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Instruction bar ruthlessly stolen from https://www.reddit.com/user/senocular -->
<div id="menu" draggable="true"> <img class="menuTile" style="background: rgba(50, 150, 200, 1)" draggable="true" title="Sky" src="http://www.volv.org/images/gsnake/sky.png"> <img class="menuTile" title="Dirt" src="http://www.volv.org/images/gsnake/dirt.png"> <img class="menuTile" title="Dirt with grass" src="http://www.volv.org/images/gsnake/grass.png"> <img class="menuTile" title="Grass Tuft - Passable" src="http://www.volv.org/images/gsnake/tuft.png"> <img class="menuTile" title="Corner down to right, decorative" src="http://www.volv.org/images/gsnake/dirtrightdown.png"> <img class="menuTile" title="Corner down to left, decorative" src="http://www.volv.org/images/gsnake/dirtleftdown.png"> <img class="menuTile" title="Passable Ground Block - for secretz" src="http://www.volv.org/images/gsnake/dirtsecret.png"> <img class="menuTile" title="Watermelon, Collect all to win" src="http://www.volv.org/images/gsnake/watermelon.png"> <img class="menuTile" title="Watermelon with tuft" src="http://www.volv.org/images/gsnake/watermelontuft.png"> <img class="menuTile" title="Spike. Lose" src="http://www.volv.org/images/gsnake/spike.png"> <img class="menuTile" title="Spike with tuft" src="http://www.volv.org/images/gsnake/spiketuft.png"> <img class="menuTile" title="Snake Head" src="http://www.volv.org/images/gsnake/snakeHead.png"> <img class="menuTile" title="Snake Body" src="http://www.volv.org/images/gsnake/snakeBody.png">
</div>
<h1>Heavy Snake</h1>
<h2>Level Editor</h2>
<button id="btnOutput">Get Code</button>
<div id="codeOutput">
<textarea id="txtOut"></textarea>
<button id="btnClose">Close</button>
</div>
<img class="mouseImg" id="mouseImg" src="http://www.volv.org/images/gsnake/dirt.png"> <script src="js/index.js"></script>
</body>
</html>

Heavy Snake - Level Editor - Dev - Script Codes CSS Codes

html, body { height: 100%; margin: 0; text-align: center; background: rgba(50, 150, 200, 1);
}
h1 { margin-top: 0px; margin-bottom: 0px; font-size: 48px; color:white;
}
h2 { margin-top: -5px; margin-bottom: 0px; font-size: 25px; color: white;
}
#menu { position: absolute; top: 5vh; left: 5vw; box-sizing: border-box; padding: 0em; border: 2px solid black; border-radius: 8px; background-color: #555; text-align: center; font-size: 0; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.25); z-index: 40; overflow: hidden; resize: both; cursor: default;
}
#menu a { color: white; font-weight: bold;
}
#menu:hover { cursor: move;
}
#menu p { display: block; margin: 10px 10px 10px 10px;
}
.menuTile { display: block; border: solid limegreen 0.5px; margin: auto; margin-top: 8px; height: 10px; cursor: default;
}
.menuTile:hover { border: solid green 0.5px;
}
.gridRow { font-size: 0;
}
.gridSquare { border: solid black 0.5px; display: inline-block;
}
.gridSquare:hover { border: solid red 0.5px;
}
.mouseImg { border: dashed limegreen 0.5px; visibility: hidden; position: absolute; background: rgba(50, 150, 200, 0.7);
}
#btnOutput { width: 200px; height: 30px; top: 90vh; left: 50%; margin-left:-100px; position: absolute; font-weight: bold;
}
#txtOut { box-sizing: border-box; width: 100%; height: 90%;
}
#codeOutput { position: fixed; border: solid black 2px; background: rgba(50, 150, 200, 1); left: 50%; top: 10%; width: 80vw; height: 80vh; margin-left: -40vw; z-index: 40; visibility: hidden;
}
#btnClose { position: relative; border-top: solid black; margin: -4px; width: 100%; height: 10%; font-weight: bold;
}

Heavy Snake - Level Editor - Dev - Script Codes JS Codes

// Tileset credits - http://opengameart.org/users/bleddyuffles
// Game inspiration - http://www.lessmilk.com/
// Watermelon - http://opengameart.org/content/watermelos-piece
// Spikes - http://opengameart.org/content/spikey-stuff
// Created for https://www.reddit.com/r/javaScriptStudyGroup/
// 0 - Air, 3 - Grass tuft (Can walk through),
// 1 - Ground, 2 - Ground with grass,
// 4 - Watermelon, 7 - Watermelon + Tuft
// 5 - Spike, 6 - Spike + Tuft
// 8 - Slant Up-Right, 9 - Slant Up-left. Barriers
// 10 - Secret Wall (Regular Ground Graphic), Walkable.
console.clear();
var levels = [{ coords: [ [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 3, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 3, 0], [0, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 0], [0, 2, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 4, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0], [0, 2, 0, 3, 0, 0, 0, 0, 7, 3, 3, 0, 3, 2, 0], [0, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0] ], playerPosition: [ [3, 7], [3, 8], [3, 9], [3, 10], [3, 11], ] }
];
(() => { let state = { levelMap: new Map(), startCoords: [] } let srcToCode = { "http://www.volv.org/images/gsnake/sky.png" : 0, "http://www.volv.org/images/gsnake/dirt.png" : 2, "http://www.volv.org/images/gsnake/grass.png" : 1, "http://www.volv.org/images/gsnake/tuft.png" : 3, "http://www.volv.org/images/gsnake/dirtrightdown.png" : 8, "http://www.volv.org/images/gsnake/dirtleftdown.png" : 9, "http://www.volv.org/images/gsnake/dirtsecret.png" : 10, "http://www.volv.org/images/gsnake/watermelon.png" : 4, "http://www.volv.org/images/gsnake/watermelontuft.png" : 7, "http://www.volv.org/images/gsnake/spike.png" : 5, "http://www.volv.org/images/gsnake/spiketuft.png" : 6, "http://www.volv.org/images/gsnake/snakeHead.png" : 11, "http://www.volv.org/images/gsnake/snakeBody.png" : 12 } let viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) // like vw let viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) // like vh let mapHeight = 15; // User to set let mapWidth = 15; // User to set let tileSize = (viewHeight * 0.7) / mapHeight; // Sensible sized tiles. loadDefault(mapHeight, mapWidth, tileSize); buildMenu(); addMenuEvents(); // Draw initial grid of squares. function loadDefault(mapHeight, mapWidth, tileSize) { for (let i = 0; i < mapHeight; i++) { let row = document.createElement("div"); row.setAttribute("class", "gridRow"); document.body.appendChild(row); for (let j = 0; j < mapWidth; j++) { let tile = document.createElement("div"); let picSrc = document.getElementsByClassName("menuTile")[0].src; tile.setAttribute("class", "gridSquare"); tile.style.background = `url(${picSrc}) no-repeat`; tile.style["background-size"] = `${tileSize}px ${tileSize}px`; tile.style.width = `${tileSize}px`; tile.style.height = `${tileSize}px`; state.levelMap.set(tile, srcToCode[picSrc]) row.appendChild(tile); } } } function buildMenu() { const NO_TILES = 13; const TILE_SIZE = tileSize; const TILE_MARGIN = 11; const MENU_HEIGHT = viewHeight * 0.8; document.getElementById("menu").style.width = `${tileSize*1.5}px`; document.getElementById("menu").style.height = `${MENU_HEIGHT*1.01}px`; let menuLeftPos = document.getElementsByClassName("gridSquare")[0].getBoundingClientRect().left-tileSize*2.5; document.getElementById("menu").style.left = `${( menuLeftPos > 10 ) ? menuLeftPos : 10}px`; Array.from(document.getElementsByClassName("menuTile")) .forEach((each) => { if ( (TILE_SIZE+TILE_MARGIN)*NO_TILES <= MENU_HEIGHT) { each.style.width = `${TILE_SIZE}px`; each.style.height = `${TILE_SIZE}px`; } else { each.style.width = `${(MENU_HEIGHT / NO_TILES) - TILE_MARGIN}px`; each.style.height = `${(MENU_HEIGHT / NO_TILES) - TILE_MARGIN}px`; } }); } function addMenuEvents() { Array.from(document.getElementsByClassName("menuTile")) .forEach((each) => { each.addEventListener("click", (e) => { let mouseImg = document.getElementById("mouseImg"); mouseImg.src = `${e.target.src}`; mouseImg.style.visibility = `visible`; }) }); Array.from(document.getElementsByClassName("gridSquare")) .forEach((each) => { each.addEventListener("mousedown", (event) => { event.preventDefault(); changeTile(each, event); }); }) Array.from(document.getElementsByClassName("gridSquare")) .forEach((each) => { each.addEventListener("mouseover", (event) => { event.preventDefault(); if (event.buttons === 1) // Mouse button held down. changeTile(each, event); }); }); function changeTile(which, event) { let mouseImg = document.getElementById("mouseImg"); which.style.background = `url(${mouseImg.src}) no-repeat`; which.style["background-size"] = `${tileSize}px ${tileSize}px`; state.levelMap.set(event.target, srcToCode[mouseImg.src]) } function dragStarted(event) { let style = window.getComputedStyle(event.target, null); let startX = parseInt(style.getPropertyValue("left"), 10) - event.clientX; let startY = parseInt(style.getPropertyValue("top"), 10) - event.clientY; state.startCoords[0] = startX; state.startCoords[1] = startY; } function dragEnd(event) { var offset = state.startCoords; var dm = event.target; dm.style.left = (event.clientX + parseInt(offset[0], 10)) + 'px'; dm.style.top = (event.clientY + parseInt(offset[1], 10)) + 'px'; } document.getElementById("menu").addEventListener("dragstart", dragStarted); document.getElementById("menu").addEventListener("dragend", dragEnd); } window.addEventListener("mousemove", function(e) { let mouseImg = document.getElementById("mouseImg"); let scrollingElement = document.scrollingElement || document.documentElement; mouseImg.style.left = `${e.x+2}px`; mouseImg.style.top = `${e.y+2+scrollingElement.scrollTop}px`; }); window.addEventListener("contextmenu", function(e) { e.preventDefault(); let mouseImg = document.getElementById("mouseImg"); mouseImg.src = `http://www.volv.org/images/gsnake/sky.png`; mouseImg.style.visibility = `hidden`; }); document.getElementById("mouseImg").style.width = `${tileSize}px`; document.getElementById("mouseImg").style.height = `${tileSize}px`; window.addEventListener("resize", function() { viewWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0) // like vw viewHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) // like vh tileSize = (viewHeight * 0.7) / mapHeight; // Sensible sized tiles. buildMenu(); Array.from(document.getElementsByClassName("gridSquare")) .forEach((each) => { each.style["background-size"] = `${tileSize}px ${tileSize}px`; each.style.width = `${tileSize}px`; each.style.height = `${tileSize}px`; }); }); document.getElementById("btnOutput").addEventListener("click", function() { let values = state.levelMap.values(); let output = document.getElementById("txtOut"); document.getElementById("codeOutput").style.visibility = "visible"; document.getElementById("btnOutput").style.visibility = "hidden"; state.outObj = {} state.outObj.coords = []; state.outObj.playerPosition = []; let tmpArray = []; output.value = `{\n coords: [\n`; for (let i = 0; i < mapHeight; i++) { let line = ` [`; for (let j = 0; j < mapWidth; j++) { let curValue = values.next().value; line += `${(curValue > 10) ? 0 : curValue}, `; // Replace over 10s with 0 if (curValue === 11) { // Snake head. state.outObj.playerPosition.push([j, i]); } tmpArray.push(curValue); } line = line.split("").slice(0, -2).join(""); line += `],\n`; output.value += line; state.outObj.coords.push(tmpArray); tmpArray = []; } output.value = output.value.split("").slice(0, -2).join(""); output.value += `\n ],\n`; findSnake(); }); function findSnake() { let output = document.getElementById("txtOut"); let snake = state.outObj.playerPosition; let map = state.outObj.coords; if (snake.length !== 1) { output.value = "Error - No Snake or multiple snakes defined."; return; } let x = snake[0][1]; let y = snake[0][0]; let found = true; let foundList = []; while (found) { found = false; let snakeHead = map[x][y]; let posToCheck = [ [(x+1 < mapWidth) ? x+1 : mapWidth-1, y], [x,(y+1 < mapHeight) ? y+1 : mapHeight-1], [(x-1 >= 0) ? x-1 : 0, y], [x,(y-1 >= 0) ? y-1 : 0] ]; posToCheck .filter((each) => { return !foundList.some((eachFound) => { return (eachFound[0] === each[0] && eachFound[1] === each[1]) }); }) .some((each) => { if (map[each[0]][each[1]] === 12) { console.log(`FOUND TAIL - [${each[1]}, ${each[0]}]`) found = true; foundList.push([x, y]); snake.push([each[1], each[0]]); x = each[0]; y = each[1]; return true; } return false; }); } output.value += ` playerPosition: [\n`; snake.forEach((each) => { output.value += ` [${each[0]},${each[1]}],\n`; }); output.value = output.value.split("").slice(0, -2).join(""); output.value += `\n ]\n},`; console.dir(state.outObj); } document.getElementById("btnClose").addEventListener("click", function() { document.getElementById("codeOutput").style.visibility = "hidden"; document.getElementById("btnOutput").style.visibility = "visible"; });
})();
Heavy Snake - Level Editor - Dev - Script Codes
Heavy Snake - Level Editor - Dev - Script Codes
Home Page Home
Developer Steven
Username volv
Uploaded November 07, 2022
Rating 3
Size 5,348 Kb
Views 22,264
Do you need developer help for Heavy Snake - Level Editor - Dev?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Steven (volv) Script Codes
Name
Midas Points
Wiki Viewer
Midas - Total Multi
WK 15 Exercises
Squares Within Range
A Pen by Steven
Nested Loops
Twitch Status
Promises
Beer Event - Remaining Rewards
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!