Walking Bot - Udacity CS255
How do I make an walking bot - udacity cs255?
Source: http://forums.udacity.com/questions/100020868/if-you-have-a-localhost-webserver-here-is-some-code-to-get-a-walking-robot#cs255. What is a walking bot - udacity cs255? How do you make a walking bot - udacity cs255? This script and codes were developed by Oliver Schafeld on 05 October 2022, Wednesday.
Walking Bot - Udacity CS255 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Walking Bot - Udacity CS255</title>
</head>
<body> <!-- Source: Udacity CS255 http://forums.udacity.com/questions/100020868/if-you-have-a-localhost-webserver-here-is-some-code-to-get-a-walking-robot#cs255 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> <title>Animation Test</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body onload="setup();" id="body">
</body>
</html> <script src="js/index.js"></script>
</body>
</html>
Walking Bot - Udacity CS255 - Script Codes JS Codes
var canvas = null;
var context = null;
var xCoord = 0;
var xDirection = 1;
var yCoord = 0;
var yDirection = 1;
var LEFTACTIVE=false;
var RIGHTACTIVE=false;
var UPACTIVE=false;
var DOWNACTIVE=false;
var backGroundCol = "#efefdd";
var assets = ['http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk00.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk01.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk02.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk03.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk04.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk05.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk06.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk07.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk08.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk09.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk10.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk11.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk12.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk13.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk14.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk15.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk16.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk17.png', 'http://www.udacity.com/media/js/standalone/libs/gamedev_assets/robowalk/robowalk18.png'];
var frames = [];
var imgNum=0;
var loaded=new Array();
var done=false;
var onImageLoad = function(){ // console.log("IMAGE "+imgNum+"!!!"); loaded[imgNum]=true; canvas.width=canvas.width; context.drawImage(frames[imgNum], xCoord, yCoord); imgNum++;
};
var setup = function() { body = document.getElementById('body'); canvas = document.createElement('canvas'); context = canvas.getContext('2d'); canvas.width = 500; canvas.height = 500; canvas.style.backgroundColor= backGroundCol; body.appendChild(canvas); canvas.setAttribute("tabIndex",1); canvas.focus(); document.addEventListener('keydown', downKey, false); document.addEventListener('keyup', upKey, false); // Load each image URL from the assets array into the frames array // in the correct order. // Afterwards, call setInterval to run at a framerate of 30 frames // per second, calling the animate function each time. // YOUR CODE HERE _LOAD_THR_=setInterval(function(){LoaderThread()}, 0);
};
var animating=false;
var animate = function(){ // Draw each frame in order, looping back around to the // beginning of the animation once you reach the end. // Draw each frame at a position of (0,0) on the canvas. // YOUR CODE HERE if(animating || done!=true)return; animating=true; if(imgNum>=frames.length)imgNum=0; canvas.width=canvas.width; offsetMover(); xCoord+=xDirection; if(!(xCoord>=0 && xCoord<(500-83))) xDirection*=-1; yCoord+=yDirection; if(!(yCoord>=0 && yCoord<(500-83))) yDirection*=-1; context.drawImage(frames[imgNum], xCoord, yCoord); imgNum++; animating=false;
};
function upKey(event)
{ var scanCode=event.keyCode; if(scanCode==38)//Up UPACTIVE=false; if(scanCode==40)//Down DOWNACTIVE=false; if(scanCode==37)//Left LEFTACTIVE=false; if(scanCode==39)//Right RIGHTACTIVE=false; if(!done) offsetMover(); event.preventDefault(); return false;
}
function downKey(event)
{ var scanCode=event.keyCode; if(scanCode==38)//Up UPACTIVE=true; if(scanCode==40)//Down DOWNACTIVE=true; if(scanCode==37)//Left LEFTACTIVE=true; if(scanCode==39)//Right RIGHTACTIVE=true; if(!done) offsetMover(); event.preventDefault(); return false;
}
function offsetMover()
{ if(UPACTIVE)//Up { if(yCoord>=0) { yDirection=-1; yCoord+=yDirection; } } if(DOWNACTIVE)//Down { if(yCoord<(500-83)) { yDirection=1; yCoord+=yDirection; } } if(LEFTACTIVE)//Left { if(xCoord>=0) { xDirection=-1; xCoord+=xDirection; } } if(RIGHTACTIVE)//Right { if(xCoord<(500-83)) { xDirection=1; xCoord+=xDirection; } }
}
var loading=false;
function LoaderThread()
{ if(loading)return; loading=true; if(imgNum>=assets.length) { imgNum=0; clearInterval(_LOAD_THR_); done=true; for(var x=0; x<assets.length; x++) done&=loaded[x]; } if(loaded[imgNum]!=true && frames[imgNum]==undefined) { frames[imgNum]=new Image(); frames[imgNum].onload=onImageLoad; frames[imgNum].src=assets[imgNum]; } loading=false;
}
var _LOAD_THR_=null;
var _ANIM_THR_=null;
_ANIM_THR_=setInterval(animate, 1000/30);
Developer | Oliver Schafeld |
Username | schafeld |
Uploaded | October 05, 2022 |
Rating | 3 |
Size | 3,036 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 1st Demo | 1,656 Kb |
Special Characters | 1,749 Kb |
3D Dose | 3,250 Kb |
2-column, Flex-box menu fly-out | 2,103 Kb |
Sass Cheat Sheet | 2,396 Kb |
HTML5 Canvas Test 1 | 2,128 Kb |
Button Download Flyer rtk-russia.de | 2,252 Kb |
Flyout menu using target pseudo-element | 5,456 Kb |
Markdown Notes | 1,866 Kb |
AngularJS ToDo Demo | 2,306 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 |
Masonry | Uriuriuriu | 5,005 Kb |
CSS eye follow | Pedrocampos | 2,592 Kb |
Slider css only | Armandobau | 2,161 Kb |
Kudos Please | TimPietrusky | 6,624 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
Working around OS X Dynamic Scrollbars | Jrjenk | 2,279 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Virtual vinyl | Davidpanik | 3,474 Kb |
Navcube | Wbarlow | 4,775 Kb |
Parallax with only CSS | Thulioph | 2,297 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!