A Little Snake Animation

Developer
Robert
Size
4,738 Kb
Views
28,336
  1. A Little Snake Animation Previews
  2. A Little Snake Animation HTML Codes
  3. A Little Snake Animation CSS Codes
  4. A Little Snake Animation JS Codes

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 Previews
IQ Test

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
A Little Snake Animation - Script Codes
Home Page Home
Developer Robert
Username AgentRR007
Uploaded September 04, 2022
Rating 3
Size 4,738 Kb
Views 28,336
Do you need developer help for A Little Snake Animation?

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!

Robert (AgentRR007) Script Codes
Name
AngularJS 1.5 Demo
Interface Animation
CountDown
Simple Calculator
Santa, my house is over here...
RegExp in Angular Tester
Challenge Reveal... with a twist.
Angular Calendar Clock
Observing Cells
Angular Auto Table
Create amazing blog posts 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!