Tutorial

Developer
Aaron Happe
Size
3,498 Kb
Views
16,192
  1. Tutorial Previews
  2. Tutorial HTML Codes
  3. Tutorial CSS Codes
  4. Tutorial JS Codes

How do I make an tutorial?

This is a tutorial I followed. This is not my code! :). What is a tutorial? How do you make a tutorial? This script and codes were developed by Aaron Happe on 09 November 2022, Wednesday.

Tutorial Previews
IQ Test

Tutorial - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Tutorial</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<html> <head> <meta charset="utf-8"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Animate J</title> <link rel="author" href="humans.txt"> <link rel="stylesheet" href="css/style.css"> </head> <body>	<div id="stage">	<div id="j" class="character"></div>	<div id="j2" class="character"></div>	</div>	<table>	<tr>	<td>	<input type="button" value="Run Left" id="run-left" />	</td>	<td>	<input type="button" value="Stop Running" id="stop-run" />	</td>	<td>	<input type="button" value="Run Right" id="run-right" />	</td>	<td>	<input type="button" value="Jump" id="jump" />	</td>	</tr>	<tr>	<td>	<input type="button" value="Run Left" onclick="j2.run_left();">	</td>	<td>	<input type="button" value="Stop Running" onclick="j2.stop_running();">	</td>	<td>	<input type="button" value="Run Right" onclick="j2.run_right();">	</td>	<td>	<input type="button" value="Jump" onclick="j2.jump();">	</td>	</tr>	</table> </body>
</html> <script src="js/index.js"></script>
</body>
</html>

Tutorial - Script Codes CSS Codes

#stage {	background-color:#cccccc;	border:1px solid black;	height:170px;	width:750px;	position:relative;	z-index:0;	}	.character {	height:50px;	width:40px;	position:absolute;	top:120px;	background-repeat:no-repeat;	background-position:0 0;	}	#j {	left:100px;	background-image: url('https://cdn.tutsplus.com/net/uploads/2013/10/javascript-spriting-j-sprite.png');	}	#j2 {	left:200px;	background-image: url('https://cdn.tutsplus.com/net/uploads/2013/10/javascript-spriting-j2-sprite.png');	}

Tutorial - Script Codes JS Codes

/*this is a tutorial. this is my code!!!*/
var eventUtility = {	addEvent : function(el, type, fn) {	if (typeof addEventListener !== "undefined") {	el.addEventListener(type, fn, false);	} else if (typeof attachEvent !== "undefined") {	el.attachEvent("on" + type, fn);	} else {	el["on" + type] = fn;	}	},	getTarget : function(e) {	if (typeof e.target !== "undefined") {	return e.target;	} else {	return e.srcElement;	}	},	preventDefault : function(e) {	if (typeof e.preventDefault !== "undefined") {	e.preventDefault();	} else {	e.returnValue = false;	}	}
};
var RobotMaker = function(elJ, run_speed, jump_height){
var run_timer,	jump_timer,	face_right = true,	stage = document.getElementById("stage");
function run_r(phase, left){	if ((left + (15 * run_speed)) < (document.getElementById('stage').offsetWidth - elJ.offsetWidth)){	left = left + 15; // Increase his left attribute by 10px	elJ.style.left = left+"px"; // and then we move him	switch (phase){	case 1:	elJ.style.backgroundPosition = "-40px 0px";	run_timer = setTimeout(function(){run_r(2, left);}, 200);	break;	case 2:	elJ.style.backgroundPosition = "-80px 0px";	run_timer = setTimeout(function(){run_r(3, left);}, 200);	break;	case 3:	elJ.style.backgroundPosition = "-120px 0px";	run_timer = setTimeout(function(){run_r(4, left);}, 200);	break;	case 4:	elJ.style.backgroundPosition = "-80px 0px";	run_timer = setTimeout(function(){run_r(1, left);}, 200);	break;	}	} else {	elJ.style.backgroundPosition = "0px 0px";	}
}
function run_l(phase, left){	face_right = false;	if (0 < elJ.offsetLeft - (15 * run_speed)){	left = left - (15 * run_speed);	elJ.style.left = left+"px";	switch (phase){	case 1:	elJ.style.backgroundPosition = "-40px -50px";	run_timer = setTimeout(function(){run_l(2, left);}, 200);	break;	case 2:	elJ.style.backgroundPosition = "-80px -50px";	run_timer = setTimeout(function(){run_l(3, left);}, 200);	break;	case 3:	elJ.style.backgroundPosition = "-120px -50px";	run_timer = setTimeout(function(){run_l(4, left);}, 200);	break;	case 4:	elJ.style.backgroundPosition = "-80px -50px";	run_timer = setTimeout(function(){run_l(1, left);}, 200);	break;	}	} else {	elJ.style.backgroundPosition = "0px -50px";	}
}	function jmp(up, top){	if (face_right){	elJ.style.backgroundPosition = "-160px 0px";	} else {	elJ.style.backgroundPosition = "-160px -50px";	}	if (up && (elJ.offsetTop > (20 * (1 / jump_height)))){	top = top - (top * .1);	elJ.style.top = top+"px";	jump_timer = setTimeout(function(){jmp(up, top);}, 60);	} else if (up) {	up = false;	jump_timer = setTimeout(function(){jmp(up, top);}, 60);	} else if (!up && (elJ.offsetTop < 115)){	top = top + (top * .1);	elJ.style.top = top+"px";	jump_timer = setTimeout(function(){jmp(up, top);}, 60);	} else {	elJ.style.top = "120px";	if (face_right){	elJ.style.backgroundPosition = "0px 0px";	} else {	elJ.style.backgroundPosition = "0px -50px";	}	jump_timer = false;	}	}	return {	run_right : function(){	if (!jump_timer || jump_timer === undefined){	clearTimeout(run_timer); // We clear whatever running is going on now ...	run_r(1, elJ.offsetLeft); // And we start them running to the right.	}	},	/* * This is the function to start running left that can be called from the outside */	run_left : function(){	/* * First we check if the jump_timer is going - we don't want them running in midair! */	if (!jump_timer || jump_timer === undefined){	clearTimeout(run_timer); // We clear whatever running is going on now ...	run_l(1, elJ.offsetLeft); // and we start them running to the left.	}	},	/* * This function stops the running, and returns them to a standing position. * Notice that it checks the 'face_right' value to see if it should use the right-facing sprite or the * left-facing sprite * This function also checks to see if they are jumping so it doesn't change to a standing sprite in midair */	stop_running : function(){	if (!jump_timer || jump_timer === undefined){	clearTimeout(run_timer);	if (face_right){	elJ.style.backgroundPosition = "0px 0px";	} else {	elJ.style.backgroundPosition = "0px -50px";	}	}	},	/* * This function is the jumping function * We check to make sure we aren't already jumping (we don't want a double jump) * Then clear the running animation and call the jump function */	jump : function(){	if (!jump_timer || jump_timer === undefined){	clearTimeout(run_timer);	jmp(true, elJ.offsetTop);	}	}	};	};
var	runRightButton = document.getElementById("run-right"),	runLeftButton = document.getElementById("run-left"),	stopRunButton = document.getElementById("stop-run"),	jumpButton = document.getElementById("jump");	elJ = document.getElementById("j");
eventUtility.addEvent(document, "click", function(e){	var target = eventUtility.getTarget(e);	switch (target) {	case runRightButton:	j.run_right(1, elJ.offsetLeft);	break;	case runLeftButton:	j.run_left(1, elJ.offsetLeft);	break;	case stopRunButton:	j.stop_running();	break;	case jumpButton:	j.jump(true, elJ.offsetTop);	break;	}	});	var j = RobotMaker(document.getElementById('j'), 1, 1);	var j2 = RobotMaker(document.getElementById('j2'), .8, 5);
Tutorial - Script Codes
Tutorial - Script Codes
Home Page Home
Developer Aaron Happe
Username aaronhappe
Uploaded November 09, 2022
Rating 3
Size 3,498 Kb
Views 16,192
Do you need developer help for Tutorial?

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!

Aaron Happe (aaronhappe) Script Codes
Name
Snap SVG exploration
Map prototype
A Pen by Aaron Happe
Shop Record Bookmarklet
FF - Accordion Layout - DT
Prototype for BZees filters.
FF - Accordion Layout - Mobile and iPad
Nat Banner Builder
Js-ninja 4.16
Playing with CSS
Create amazing sales emails 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!