A Little Snake Animation
How do I make an a little snake animation?
What is a a little snake animation? How do you make a a little snake animation? This script and codes were developed by Robert on 04 September 2022, Sunday.
A Little Snake Animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Little Snake Animation</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<body onkeypress="keyAction(event)"> <div class="container"> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> </div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> </div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> </div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"> </div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="row"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> </div> <div class="buttonGrid"> <button class="action-button blue" onclick="snake.snakeInit(); console.log(snake.snakeRandom(81));">Init</button> <button class="action-button blue" onclick="moveSnake();">Start</button> <button class="action-button blue" onclick="clearSnake();">Stop</button> <p id="info"> </p> </div>
</body> <script src="js/index.js"></script>
</body>
</html>
A Little Snake Animation - Script Codes CSS Codes
body { background: #B3C0CA;
}
.container { margin: 50px auto; border: 1px dotted lightgray; background: lightgray; height: 198px; width: 198px; padding: 1px;
}
.box { border: 1px solid #A7A5BA; height: 20px; width: 20px; margin: 0; float: left;
}
.lidBox1 { border: 1px solid rgba(148, 197, 204, 0.75); background: rgba(148, 197, 204, 0.75);
}
.lidBox2 { border: 1px solid rgba(148, 197, 204, 0.5); background: rgba(148, 197, 204, 0.5);
}
.lidBox3 { border: 1px solid rgba(148, 197, 204, 0.25); background: rgba(148, 197, 204, 0.25);
}
.lidBoxGreen { border: 1px solid #94C5CC; background: #94C5CC;
}
.buttonGrid { margin: -25px auto; width: 225px; padding: 1px; padding-left: 15px;
}
.animate { transition: all 0.1s; -webkit-transition: all 0.1s;
}
.action-button { position: relative; width: 4em; padding: 10px 15px; margin: 0px 10px 10px 0px; float: left; border-radius: 10px; font-size: 1em; color: #FFF; text-align: center; text-decoration: none;
}
.blue { background-color: #3498DB; border-bottom: 5px solid #2980B9; text-shadow: 0px -2px #2980B9;
}
A Little Snake Animation - Script Codes JS Codes
var grid = { grid: document.querySelector(".container"), row: document.querySelectorAll(".container .row"), box: document.querySelectorAll(".box"), info: document.getElementById("info"), boxInit: function() { for (var r = 0; r < this.row.length; r++) { for (var b = 0; b < this.box.length; b++) { this.box[b].setAttribute("id", "box" + (b + 1)); //console.log(this.box[b]); } } }
}
var snake = { snakeLen: 4, snakeDir: ["up", "right", "down", "left"], snakeMoving: 1, snakeBodySize: 4, snakeHead: 43, snakeBody: [this.snakeHead], snakeRandom: function(value) { return Math.floor((Math.random() * value)); }, snakeDirRestrict: function(restrict, value) { var counter = 0; do { counter++; retValue = 0; randVal = Math.floor((Math.random() * value)); retValue = restrict.indexOf(randVal); //console.log(randVal); } while (retValue != -1 || counter < 10); return randVal; }, snakeToss: function() { return Math.floor((Math.random() * 2) - 1) === 0 ? -1 : 1; }, snakeBuildHead: function(snakeHeadPos) { var initialHeadPos = this.snakeBody[0]; if (initialHeadPos) { //console.log("Head Position: " + initialHeadPos); grid.box[initialHeadPos].classList.remove("lidBoxGreen"); } this.snakeBody[0] = snakeHeadPos; grid.box[snakeHeadPos].classList.add("lidBoxGreen"); }, snakeBuildBody: function() { var headPos = this.snakeBody[0]; var vertical = (headPos / 9) > 5 ? -1 : 1; var horizontal = (headPos % 9) > 5 ? -1 : 1; var upDown = this.snakeToss(); var newPos = this.snakeHead; //If there are any bodyparts laying around, remove them if (snake.snakeBody.length > 1) { for (var lidOff = 1; lidOff < snake.snakeBodySize; lidOff++) { var boxOff = snake.snakeBody[lidOff]; grid.box[boxOff].className = "box"; } snake.snakeBody.splice(1); } for (var lid = 1; lid < snake.snakeBodySize; lid++) { if (upDown === -1) { newPos = newPos + horizontal; snake.snakeMoving = horizontal === -1 ? 1 : 3; grid.box[newPos].className = "box lidBox" + lid; } else { newPos = newPos + (9 * vertical); snake.snakeMoving = vertical === -1 ? 2 : 0; grid.box[newPos].className = "box lidBox" + lid; } snake.snakeBody.push(newPos); } // grid.info.innerHTML = "Head: " + headPos + "<br/>" + // "Vertical: " + vertical + "<br/>" + // "Horizontal: " + horizontal + "<br/>" + // "URDL: " + upDown + "<br/>" + // "Moving: " + snake.snakeDir[snake.snakeMoving] + " - " + snake.snakeMoving + "<br/>" + // "tailPos: " + newPos + "<br/>" + // "snake: " + snake.snakeBody; }, snakeInit: function() { this.snakeHead = snake.snakeRandom(80); this.snakeBuildHead(this.snakeHead); this.snakeBuildBody(); }, snakeCheckPos: function(pos) { return snake.snakeMoving; }, snakeMove: function() { var headPos = this.snakeBody[0]; var vertical = (headPos / 9) > 5 ? -1 : 1; var horizontal = (headPos % 9) > 5 ? -1 : 1; var upDown = snake.snakeToss(); var newPos = headPos; //Determine Walls and possible next move var yDir = Math.floor(headPos / 9); var xDir = headPos % 9; if (newPos === 0) { snake.snakeMoving = snake.snakeMoving === 3 ? 2 : (snake.snakeMoving === 0 ? 1 : 2); } else if (newPos === 8) { snake.snakeMoving = snake.snakeMoving === 1 ? 2 : (snake.snakeMoving === 0 ? 3 : 2); } else if (newPos === 72) { snake.snakeMoving = snake.snakeMoving === 3 ? 0 : (snake.snakeMoving === 2 ? 1 : 0); } else if (newPos === 80) { snake.snakeMoving = snake.snakeMoving === 1 ? 0 : (snake.snakeMoving === 2 ? 3 : 0); } else if (((yDir === 0) && (xDir > 0)) || ((yDir === 8) && (xDir > 0))) { switch (snake.snakeMoving) { case 0: snake.snakeMoving = this.snakeDirRestrict([0, 2], 4); break; case 1: snake.snakeMoving = this.snakeDirRestrict([1, 3], 3); break; case 2: snake.snakeMoving = this.snakeDirRestrict([0, 2], 4); break; case 3: snake.snakeMoving = this.snakeDirRestrict([1, 3], 4); break; } //ake.snakeMoving = snake.snakeMoving === 0 ? this.snakeDirRestrict([0,2],4) : snake.snakeMoving === 2 ? this.snakeDirRestrict([0,2],4) : this.snakeDirRestrict([0,2],4); //console.log(yDir, xDir, "Moving towards: " + snake.snakeMoving, "Position: " + newPos); } else if (((yDir > 0) && (xDir === 0)) || ((yDir > 0) && (xDir === 8))) { //ake.snakeMoving = snake.snakeMoving === 1 ? (this.snakeDirRestrict([1,3],4)) : (snake.snakeMoving === 3 ? this.snakeDirRestrict([1,3],4) : this.snakeDirRestrict([1,3],3)); switch (snake.snakeMoving) { case 0: snake.snakeMoving = this.snakeDirRestrict([0, 2], 4); break; case 1: snake.snakeMoving = this.snakeDirRestrict([1, 3], 3); break; case 2: snake.snakeMoving = this.snakeDirRestrict([0, 2], 4); break; case 3: snake.snakeMoving = this.snakeDirRestrict([1, 3], 4); break; } //console.log(yDir, xDir, "Moving towards: " + snake.snakeMoving, "Position: " + newPos); } else { switch (snake.snakeMoving) { case 0: snake.snakeMoving = this.snakeDirRestrict([2], 4); break; case 1: snake.snakeMoving = this.snakeDirRestrict([3], 3);; break; case 2: snake.snakeMoving = this.snakeDirRestrict([0], 4);; break; case 3: snake.snakeMoving = this.snakeDirRestrict([1], 4);; break; } } // ------------------------------------- // grid.info.innerHTML = "Head: " + headPos + "<br/>" + // "Vertical: " + vertical + "<br/>" + // "Horizontal: " + horizontal + "<br/>" + // "URDL: " + upDown + "<br/>" + // "Moving: " + snake.snakeDir[snake.snakeMoving] + " - " + snake.snakeMoving + "<br/>" + // "tailPos: " + newPos + "<br/>" + // "snake: " + snake.snakeBody; switch (snake.snakeMoving) { case 0: //up newPos -= 9; break; case 1: //right newPos += 1; break; case 2: //down newPos += 9; break; case 3: //left newPos -= 1; break; } //console.log(yDir, xDir, "Moving towards: " + snake.snakeMoving, "Position: " + newPos); //Ensure that newPos is not outside the grid newPos = newPos < 0 ? newPos = newPos + 9 : (newPos > 81 ? newPos = newPos - 9 : newPos); for (var lidOff = 0; lidOff < snake.snakeBodySize; lidOff++) { var boxOff = snake.snakeBody[lidOff]; grid.box[boxOff].className = "box"; } this.snakeBody.unshift(newPos); this.snakeBody.pop(); //Body to follow for (var lidOn = 0; lidOn < snake.snakeBodySize; lidOn++) { var newLid = this.snakeBody[lidOn]; if (lidOn === 0) { grid.box[newLid].className = "box lidBoxGreen"; } else { grid.box[newLid].className = "box lidBox" + lidOn; } } //grid.info.innerHTML = grid.info.innerHTML + " - New snake: " + snake.snakeBody; }
}
function keyAction(event) { var x = event.which || event.keyCode; var k = String.fromCharCode(x).toUpperCase(); //console.log("keycode: " + x);
}
function moveSnake() { snake.snakeMove(); t = setTimeout(function() { moveSnake(); }, 250);
}
function clearSnake() { clearTimeout(t);
}
(function() { var t; grid.boxInit(); snake.snakeInit(); //console.log(snake.snakeRandom(2)); moveSnake();
})()
![A Little Snake Animation - Script Codes](http://shots.codepen.io/AgentRR007/pen/Govoqd-512.jpg)
Developer | Robert |
Username | AgentRR007 |
Uploaded | September 04, 2022 |
Rating | 3 |
Size | 4,738 Kb |
Views | 28,336 |
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!
Name | Size |
Angular Auto Table | 2,917 Kb |
RegExp in Angular Tester | 3,618 Kb |
Spanish X-mas Word Game | 6,137 Kb |
AngularJS 1.5 Demo | 3,373 Kb |
AgentRR007 Logo Rotate | 1,874 Kb |
Angular Template | 2,104 Kb |
Custom Directive | 3,425 Kb |
Simple Calculator | 3,053 Kb |
Interface Animation | 3,829 Kb |
Angular Alarm | 5,760 Kb |
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!
Name | Username | Size |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
Realistic Buttons | Stoypenny | 2,248 Kb |
Slide out Menu | Rbiggs | 4,936 Kb |
03 - CSS Variables | Run-time | 2,682 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Project -Show the Local Weather | Luciano_Britis | 2,583 Kb |
Fixed Scrolling Nav Bar | Philsinatra | 0 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Blog | Rottingroom | 1,430 Kb |
Shopping List | Markmurray | 6,015 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!