dhteumeuleu » Yoshi’s Island

Yoshi’s Island

On August 1, 2005, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/yoshisland.html

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Yoshis Island - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		background: #222; 
		width: 100%; 
		height: 100%; 
		margin: 0px; 
		padding: 0px; 
	} 
	#center { 
		position: absolute; 
		left:50%; 
		top:50%; 
	} 
	#border { 
		position: absolute; 
		background: #fff; 
		width: 532px; 
		height: 340px; 
		left: -266px; 
		top: -170px; 
	} 
	#screen { 
	 	position: absolute; 
		background: #000; 
		width: 512px; 
		height: 320px; 
		left: -256px; 
		top: -160px; 
	} 
	#screen span { 
		position:absolute; 
		left:0px; 
		top:0px; 
		width:100%; 
		height:100%; 
		overflow:hidden; 
	} 
	#screen img { 
		position: absolute; 
		z-index: 0; 
	} 
	#images { 
		visibility:hidden; 
	} 
	#credit { 
		position: absolute; 
		color: #888; 
		font-family: arial; 
		font-size: 0.8em; 
		width: 99%; 
		text-align: right; 
		bottom: 2px; 
	} 
	a {text-decoration: none;color:#fff;} 
	a:hover	{text-decoration: none;background:#ff8000;color:#fff;} 
	a:visited {text-decoration: none;color:#fff;} 
	a:visited:hover {text-decoration: none;background:#ff8000;color:#fff;} 
</style> 
 
<script type="text/javascript"> 
// ======================================================== 
//      ------ DHTML Yoshis Island ------ 
// Gerard Ferrandez - Ge-1-doot - August 2005 
// http://www.dhteumeuleu.com 
// GFX: from GBA Yoshi's Island TM (c)1995-2002 Nintendo 
// ======================================================== 
 
 
var o=[]; 
var xm=0; 
var ym=0; 
var ay=2; 
var sin=Math.sin(ay*Math.PI/180); 
var cos=Math.cos(ay*Math.PI/180); 
var k=0; 
var b1, b2; 
 
function run(){ 
	// ---- background scrolling 
	b1.left=Math.round(k)+"px"; 
	b2.left=Math.round(k+512)+"px"; 
	k-=ay*2; 
	if(k>0)k-=512; 
	if(k<-512)k+=512; 
	// ---- rotate elements 
	for(var i in o)o[i].rotate(); 
} 
 
document.onmousemove = function(e) { 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX); 
	// ---- ay angle 
	if(document.body){ 
		ay=(-xm+document.body.offsetWidth*.5)/100; 
		sin=Math.sin(ay*Math.PI/180); 
		cos=Math.cos(ay*Math.PI/180); 
	} 
} 
 
function CObj(i, x, y, z, mz, gr) { 
	this.x = x; 
	this.y = y; 
	this.z = z; 
	this.gr=gr; 
	this.w0=img[i].width; 
	this.h0=img[i].height; 
	// ---- insert image 
	this.img=document.createElement("img"); 
	this.img.src=img[i].src; 
	this.img.style.width=this.w0; 
	this.img.style.height=this.h0; 
	scr.appendChild(this.img); 
	this.img = this.img.style; 
	// ---- vertical animation 
	this.mz = false; 
	if(mz){ 
		this.mzr=0; 
		this.mz=mz; 
	} 
	// ---- ground 
	if(gr)this.h0/=1.5; 
} 
// ---- y axis 3D rotate function 
CObj.prototype.rotate=function() { 
	if(this.mz){ 
		this.mzr++; 
		this.y++; 
		if(this.mzr>this.mz){ 
			this.y-=this.mzr; 
			this.mzr=0; 
		} 
	} 
	var x1=this.x*cos-this.z*sin; 
	this.z=this.z*cos+this.x*sin; 
	this.x=x1; 
	var r=512/(512+this.z); 
	this.img.left=Math.round(256+(2*this.x*r)-(this.w0*r)*.5)+"px"; 
	this.img.top=Math.round(-320-(2*this.y*r)-(this.h0*r))+"px"; 
	this.img.zIndex=this.gr?0:Math.round(1000-this.z); 
} 
 
onload = function() { 
	img = document.getElementById("images").getElementsByTagName("img"); 
	scr = document.getElementById("screen"); 
	b1  = scr.getElementsByTagName("img")[0].style; 
	b2  = scr.getElementsByTagName("img")[1].style; 
 
	map = [ 
		[0, 0, -256, -30], // big mountain 
		[4, 0, -172, -30], // house big mountain 
		[1, 35, -256, -40], 
		[1, 35, -256, 0], 
		[1, -20, -256, -60], // mountain 
		[2, -40, -256, 0], 
		[2, 20, -256, -70], // green talus 
		[7, -40, -256, -25], // red tower 
		[26, -40, -256, -25, 0, 1], // ground 
		[8, -25, -256, -95], // volcano 
		[9, 60, -256, -60], 
		[9, 50, -256, 40], 
		[9, -40, -256, 40], // hill 
		[10, 80, -256, -70], 
		[10, 80, -256, -40], 
		[10, 60, -256, 60], 
		[10, -60, -256, 50], 
		[10, -60, -256, 20], // small hill 
		[27, 80, -256, -70, 0, 1], 
		[27, 60, -256, 60, 0, 1], 
		[27, -60, -256, 50, 0, 1], // green ground 
		[11, 50, -256, -20], // grey donjon 
		[26, 50, -256, -20, 0, 1], // ground 
		[11, 0, -256, 10], // grey donjon 
		[25, 0, -256, 10, 0, 1], // castle water 
		[12, -12, -256, 10], 
		[12, 12, -256, 10], 
		[12, 0, -256, -2], 
		[12, 0, -256, 22], // grey towers 
		[13, 60, -256, 15], // towers with red roof 
		[14, 50, -256, -80], // dolmen 
		[15, 65, -256, 30], 
		[15, 85, -256, 30], 
		[15, 70, -256, 10], 
		[15, 70, -256, -20], // oranges 
		[16, 0, -200, -70], 
		[16, 20, -180, -70], 
		[16, 40, -170, -50], 
		[16, 40, -190, -30], // cloud 
		[17, -50, -160, -10], // cloud castle 
		[18, -65, -256, -50], 
		[18, -45, -256, -50], 
		[18, -40, -256, -70], 
		[18, -65, -256, -30], 
		[18, -80, -256, -80], 
		[18, -80, -256, -20], 
		[18, -90, -256, 0], // fir 
		[19, -60, -256, -40], 
		[19, -90, -256, -40], 
		[19, -100, -256, -20], 
		[19, -90, -256, -60], 
		[19, -40, -256, -80], 
		[19, -60, -256, -60], 
		[19, -60, -256, -90], // small fir 
		[3, 60, -256, -40], 
		[3, 60, -256, -30], 
		[3, 60, -256, -90], 
		[3, 70, -256, -90], 
		[3, 50, -256, -95], 
		[3, 90, -256, -40], // flower 
		[3, 95, -256, -50], 
		[3, 95, -256, -30], 
		[3, 80, -256, -20], 
		[3, 80, -256, -10], 
		[3, 100, -256, -10], 
		[3, 100, -256, 0], // flower 
		[21, 30, -256, 30], 
		[21, 20, -256, 40], 
		[21, 20, -256, 60], 
		[21, -20, -256, 30], 
		[21, -20, -256, 50], 
		[21, -30, -256, 60], 
		[21, -10, -256, 90], // tree 
		[22, 30, -256, 45], 
		[22, 35, -256, 60], 
		[22, 45, -256, 70], 
		[22, 50, -256, 90], 
		[22, -20, -256, 90], 
		[22, -15, -256, 70], 
		[22, -10, -256, 35], // small tree 
		[5, 0, -256, 30], 
		[5, 0, -256, 40], 
		[5, 0, -256, 50], 
		[5, 0, -256, 60], 
		[5, 0, -256, 70], // plots 
		[6, -25, -220, -95, 20], 
		[6, -25, -210, -95, 20], // volcano smoke 
		[23, -10, -172, -23], 
		[23, -15, -169, -21], 
		[23, -20, -166, -19], 
		[23, -25, -163, -17], 
		[23, -30, -160, -15], // chain 
		[24, 20, -200, 40, 2], // seagull 
		[28, 20, -256, 40] // Yoshi 
	]; 
	for(var k=0;k<map.length;k++) 
		o.push( 
			new CObj( 
				map[k][0], 
				map[k][1], 
				map[k][2], 
				map[k][3], 
				map[k][4], 
				map[k][5] 
			) 
		); 
	// grass 
	for(var i=0;i<20;i++){ 
		do{ 
			var r=Math.round(Math.random()*180-90) 
		} while(r<80); 
		a=Math.random()*2*Math.PI; 
		o.push( 
			new CObj( 
				20, 
				Math.round(r*Math.cos(a)), 
				-256, Math.round(r*Math.sin(a)) 
			) 
		); 
	} 
	// run 
	setInterval(run, 32); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="credit"> 
	·home: <a href="http://www.dhteumeuleu.com/" target="_self" title="Interactive DHTML demos">www.dhteumeuleu.com </a> 
	·source: <a href="http://www.dhteumeuleu.com/colorsyntax/viewJS.php?src=yoshisland.html" target="_self" title="source code">code</a> 
</div> 
 
<div id="center"> 
	<div id="border"></div> 
	<div id="screen"> 
		<span> 
			<img src="../images/map.gif"> 
			<img src="../images/map.gif"> 
		</span> 
	</div> 
</div> 
 
<div id="images"> 
	<img src="../images/oam20.gif"> 
	<img src="../images/oam24.gif"> 
	<img src="../images/oam8.gif"> 
	<img src="../images/oam23.gif"> 
	<img src="../images/oam22.gif"> 
	<img src="../images/oam16.gif"> 
	<img src="../images/oam4.gif"> 
	<img src="../images/oam3.gif"> 
	<img src="../images/oam5.gif"> 
	<img src="../images/oam32.gif"> 
	<img src="../images/oam19.gif"> 
	<img src="../images/oam14.gif"> 
	<img src="../images/oam11.gif"> 
	<img src="../images/oam28.gif"> 
	<img src="../images/oam17.gif"> 
	<img src="../images/oam25.gif"> 
	<img src="../images/oam10.gif"> 
	<img src="../images/oam35.gif"> 
	<img src="../images/oam2.gif"> 
	<img src="../images/oam1.gif"> 
	<img src="../images/oam27.gif"> 
	<img src="../images/oam6.gif"> 
	<img src="../images/oam9.gif"> 
	<img src="../images/oam33.gif"> 
	<img src="../images/oam38.gif"> 
	<img src="../images/oam50.gif"> 
	<img src="../images/oam51.gif"> 
	<img src="../images/oam52.gif"> 
	<img src="../images/oam18.gif"> 
</div> 
 
</body> 
</html>

Tagged with: 3D • rotate