Embedded Files
En este simulador se puede optar entre motor diésel y de gasolina y acelerar o parar el movimiento.
El código html se incluye a continuación.
<html>
<head>
<title>Simulador de motores</title>
</head>
<body>
<table width=100% border="0" bordercolor="#81BEF7" cellspacing="0" bgcolor="#81BEF7">
<tr>
<td width="100%" bgcolor="#81BEF7">
<canvas id="canvas" width="1200" height="1500" class="playable-canvas" style="border:0px solid #A9F5F2;" bgcolor="#A9D0F5">
</canvas>
<script type="text/javascript">
var contador = 0;
var angulobiela=0;
var leva = 0;
var radiociguenal = 60;
var senocontador = 0;
var cosenocontador = 0;
var xciguenal = 0;
var yciguenal = 0;
var angulobiela = 0;
var longitudbiela = 350;
var xbiela = 0;
var ybiela = 0;
var arranque = 0;
var x;
var y;
var ax;
var ay;
var acelerador = 280;
var ritmo = 75;
var diesel = 0;
function arrancar(ev){
x = ev.clientX - canvas.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft;
y = ev.clientY - canvas.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
if((x>30)&&(x<80)&&(y>110)&&(y<197)){
arranque = 1;
}
if((x>100)&&(x<180)&&(y>100)&&(y<180)){
arranque = 3;
}
if((x>465)&&(x<530)&&(y>120)&&(y<180)&&(diesel==0)){
diesel = 1;
X=0;
y=0;
}
if((x>465)&&(x<530)&&(y>120)&&(y<180)&&(diesel==1)){
diesel = 0;
X=0;
y=0;
}
}
function acelerar(ev){
ax = ev.clientX - canvas.offsetLeft + document.body.scrollLeft + document.documentElement.scrollLeft;
ay = ev.clientY - canvas.offsetTop + document.body.scrollTop + document.documentElement.scrollTop;
if((ax>250)&&(ax<350)&&(ay>125)&&(ay<175)){
acelerador = ax;
ritmo = 351 - acelerador;
if (ritmo <3){
ritmo = 0.000001;
}
window.clearInterval(tm);
tm = window.setInterval(loop,ritmo);
}
}
imagenbloquepos = new Image();
imagenbloquepos.src = 'https://1.bp.blogspot.com/-I68ZrGrvCLA/XqhmvQ91_lI/AAAAAAAA2yU/WzkNavX2kAg8UppuBM-2xVS9Ct-djCqFQCEwYBhgL/s1600/bloque_cilindros_posterior.png';
imagenbloquedel = new Image();
imagenbloquedel.src = 'https://1.bp.blogspot.com/-8Q-aom-N2bE/Xqhmub56m8I/AAAAAAAA2yg/1oT8_TzU9YIDDKYMKG2ZufBEi_c8dk8kgCEwYBhgL/s1600/bloque_cilindros_delantero.png';
imagenculata = new Image();
imagenculata.src = 'https://1.bp.blogspot.com/-IWefOzywoCs/Xqhm3PbrRGI/AAAAAAAA2yk/ieak4rl_10wo80zspUhd8BCp8AIBvzsbwCEwYBhgL/s1600/culata.png';
imagenciguenal = new Image();
imagenciguenal.src = 'https://1.bp.blogspot.com/-DzsUjQcqypU/Xqhm2chtwbI/AAAAAAAA2yc/DDwHhXux65cWDERkluQ4TaNSJgJFbQ_CACEwYBhgL/s1600/ciguenal.png';
imagenpiston = new Image();
imagenpiston.src = 'https://1.bp.blogspot.com/-R_eSPOhqSUc/XqhpRRA6jAI/AAAAAAAA2yw/7KXUQoIQxM4Ktczfo2clI3rRNsprwhMbgCLcBGAsYHQ/s1600/piston.png';
imagenbiela = new Image();
imagenbiela.src = 'https://1.bp.blogspot.com/-ILbxv0VYkIg/Xqhmfl4vgjI/AAAAAAAA2w0/Qn2eELe0eKIeY9hPHviZ6mx15xXARy0RwCEwYBhgL/s1600/biela.png';
imagenvalvulaadmision = new Image();
imagenvalvulaadmision.src = 'https://1.bp.blogspot.com/-9-OYhdIqvSQ/XqhpYeJ2DuI/AAAAAAAA2y8/wb1asUjEm7snAfKutltQymuVCb9qIQvGACLcBGAsYHQ/s1600/valvulaadmision.png';
imagenvalvulaescape = new Image();
imagenvalvulaescape.src = 'https://1.bp.blogspot.com/-BjllwLAzBbY/XqhpZGY1EiI/AAAAAAAA2zA/5yCNtW-vXrA268nUgJpDZwfzMFCHVqkMwCLcBGAsYHQ/s1600/valvulaescape.png';
imagenleva = new Image();
imagenleva.src = 'https://1.bp.blogspot.com/-sB1moAdEYfk/Xqhm-ajMVZI/AAAAAAAA2yY/P1Iv3JGOEjMX3q9ximk8akXAA_YI5kdDgCEwYBhgL/s1600/leva.png';
imagencarburador = new Image();
imagencarburador.src = 'https://1.bp.blogspot.com/--3XaaQ1WPpI/Xqhm11sKWiI/AAAAAAAA2yY/vQNxnt5QE7UCbTn0_WwZDHYVmicKiNmQgCEwYBhgL/s1600/carburador.png';
imagenbujia = new Image();
imagenbujia.src = 'https://1.bp.blogspot.com/-JL4nAD2oKgQ/XqhmuGy37vI/AAAAAAAA2yg/birHnwTVrqs2o9X19CUsKOqrohigsOE2wCEwYBhgL/s1600/bujia.png';
imagenllama01 = new Image();
imagenllama01.src = 'https://1.bp.blogspot.com/-VD21kX7RP6Y/XqhnAQ_D8NI/AAAAAAAA2yc/tT_cnk1cSWIOqJVZrCciJO8gLJtj4Tz2ACEwYBhgL/s320/llama01.png';
imagenhumo01 = new Image();
imagenhumo01.src = 'https://1.bp.blogspot.com/-w6klGBkg3jA/Xqhm7_tuayI/AAAAAAAA2yQ/_1U_QzVY8jIuRsdEcceplHj5MPn6vf9ZgCEwYBhgL/s320/humo01.png';
imagenhumo02 = new Image();
imagenhumo02.src = 'https://1.bp.blogspot.com/-hq1NV3_Gqz8/Xqhm76HElQI/AAAAAAAA2yc/j-0guITnayEov3cfInf1xCS9W6xwmDxSwCEwYBhgL/s1600/humo02.png';
imagenhumo03 = new Image();
imagenhumo03.src = 'https://1.bp.blogspot.com/-hHsTeRXK5d0/Xqhm739fAYI/AAAAAAAA2yk/cByDRgSEiU4fvoSffC86nvCz6tb3-4DAwCEwYBhgL/s1600/humo03.png';
imagenhumo04 = new Image();
imagenhumo04.src = 'https://1.bp.blogspot.com/-RLhUTlhS_Cc/Xqhm8gkAS2I/AAAAAAAA2yk/NGr2BJmjYIs_fnJ_7xsGK-iuSzZTO8NFwCEwYBhgL/s1600/humo04.png';
imagenhumo05 = new Image();
imagenhumo05.src = 'https://1.bp.blogspot.com/-ZV38yf0pAPU/Xqhm9PXzmoI/AAAAAAAA2yQ/TqMmi870je0iTyE7G57HC7nfNXiuemFIwCEwYBhgL/s1600/humo05.png';
imagenarranque = new Image();
imagenarranque.src = 'https://1.bp.blogspot.com/-4SDrmz-kmcE/XqhmfWFDQdI/AAAAAAAA2w0/p0gx6SIOf4cNo9JdXjUy8MOMUBh0G091QCEwYBhgL/s1600/arranque.png';
imagenstop = new Image();
imagenstop.src = 'https://1.bp.blogspot.com/-mkqyzl3tTME/XqhpYfkLKyI/AAAAAAAA2y0/LrCbDs7snAk-QymutYXFTbQFhX-xs__7wCLcBGAsYHQ/s1600/stop.png';
imagenadmision = new Image();
imagenadmision.src = 'https://1.bp.blogspot.com/-S_Flm-wLBhg/XqhmfvREslI/AAAAAAAA2ww/16IUYT-k67UAhdMtUBiB7xIFm26nRzOHwCEwYBhgL/s320/admision.png';
imagencompresion = new Image();
imagencompresion.src = 'https://1.bp.blogspot.com/-vWwv4cO_Ts8/Xqhm2ZF0-WI/AAAAAAAA2yQ/O-HpTs1_OpsJK-VvuXM-4PdjDApdAVkYwCEwYBhgL/s320/compresion.png';
imagenexplosion = new Image();
imagenexplosion.src = 'https://1.bp.blogspot.com/-xPSaK3vUJ-o/Xqhm3wndGUI/AAAAAAAA2yY/tDweZ-9ednke-sCblQ81uKabfAMiosiqACEwYBhgL/s320/explosion.gif';
imagenescape = new Image();
imagenescape.src = 'https://1.bp.blogspot.com/-I113kcRElCk/Xqhm3Rz4LZI/AAAAAAAA2yM/0UQ2voFtljArRK30UfOG-33qJo8mnKTMgCEwYBhgL/s1600/escape.png';
imagenmandoacelerador = new Image();
imagenmandoacelerador.src = 'https://1.bp.blogspot.com/-s2U0R7XXYCw/XqhnAmaYt1I/AAAAAAAA2yg/OAT0BeEVnKYsNjy1PeZCLU_FkqR7gf01wCEwYBhgL/s1600/mandoacelerador.png';
imagenguiaacelerador = new Image();
imagenguiaacelerador.src = 'https://1.bp.blogspot.com/-J8p4TZzZw7I/Xqhm6q_71aI/AAAAAAAA2yk/1Pgp_1-86f4L2TS96I11kVDqdG-qNaChwCEwYBhgL/s320/guiaacelerador.png';
imagenmariposa = new Image();
imagenmariposa.src = 'https://1.bp.blogspot.com/-eMgQTiNd5nI/XqhnA1vt_dI/AAAAAAAA2yk/GsH19kqMp2IOBDvYheibi8iD0FmII82bgCEwYBhgL/s1600/mariposa.png';
imagendiesel = new Image();
imagendiesel.src = 'https://1.bp.blogspot.com/-27WLlOCJpfg/Xqhm3TDo0rI/AAAAAAAA2yQ/z_KRYKEqn7UAvGepO3A6fkkEFKXnLvBBgCEwYBhgL/s1600/diesel.png';
imagengasolina = new Image();
imagengasolina.src = 'https://1.bp.blogspot.com/-nLQ-SDCS1FQ/Xqhm5w_JSnI/AAAAAAAA2yU/qyMSQtNYowsbfCuAkkQaB1_w7uVVPejrQCEwYBhgL/s320/gasolina.png';
imagensimulador = new Image();
imagensimulador.src = 'https://1.bp.blogspot.com/-yBximIaRTlA/Xqhv2uZF7zI/AAAAAAAA2zY/EkyHIZoKkgQy2s9F8cgrE6ZEZvnwfvh7wCLcBGAsYHQ/s1600/simulador.png';
imagenmotorgris = new Image();
imagenmotorgris.src = 'https://1.bp.blogspot.com/-tsgVygGyYPc/Xqho5TYvH2I/AAAAAAAA2yo/cVEbf2GYQHA20TRg0Kmdw47DVWfi68l0gCLcBGAsYHQ/s320/motorgris.png';
imageninyector = new Image();
imageninyector.src = 'https://1.bp.blogspot.com/-PsASrdKT-80/Xqhm9RLgLbI/AAAAAAAA2yU/DeV6xjCVmboBKk42HNoPsUM20ZNwPkPbACEwYBhgL/s320/inyector.png';
imagenfiltro = new Image();
imagenfiltro.src = 'https://1.bp.blogspot.com/-CMq7JDUTwWc/Xqhm4bxjzKI/AAAAAAAA2yc/wDulvuIgMX8jqlbWi1_aTt3qehGoaWeowCEwYBhgL/s1600/filtro.png';
imagenflechagira = new Image();
imagenflechagira.src = 'https://1.bp.blogspot.com/-VWf3CYT7xuQ/Xqhm4pmsphI/AAAAAAAA2yg/rJqNhU1wz3QLiGVbV9lrUqRNm9KLGLtdQCEwYBhgL/s1600/flechagira.png';
var canvas = document.getElementById("canvas");
var context = canvas.getContext('2d');
context.fillStyle="#A9D0F5";
context.fillRect(0, 0, canvas.width, canvas.height);
canvas.addEventListener('click', arrancar, false); //********
canvas.addEventListener('mousemove', acelerar, false); //********
tm = setInterval(loop, ritmo);
function loop() {
if (arranque==1){
contador+=2;
if (contador==362){
contador = 2;
}
if (leva==2){
leva = 1;
}
radian = Math.PI/180;
senocontador = Math.sin(contador*radian);
cosenocontador = Math.cos(contador*radian);
xciguenal = senocontador*radiociguenal;
yciguenal = cosenocontador*radiociguenal;
angulobiela = (Math.asin(xciguenal/longitudbiela))/radian;
//document.getElementById("datos").innerHTML=x+"aa"+x+"aa"+y+"aa"+diesel;
context.clearRect(0,0,canvas.width, canvas.height);
context.fillStyle="#81BEF7";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(imagensimulador, 0, 0);
context.drawImage(imagenmotorgris, 850, 0);
context.drawImage(imagenarranque, 30, 110, 70, 70);
context.drawImage(imagenstop, 100, 100, 90, 90);
context.drawImage(imagenflechagira, 460, 115, 60, 60);
context.drawImage(imagenguiaacelerador, 230, 125, 210, 80);
context.drawImage(imagenmandoacelerador, acelerador, 120, 70, 40);
context.drawImage(imagenbloquepos, 90, 514);
context.drawImage(imagenculata, 262, 250);
if(diesel == 0){
context.drawImage(imagencarburador, 5, 282);
context.drawImage(imagenbujia, 397, 362);
context.drawImage(imagengasolina, 540, 110, 250, 70);
}
if(diesel == 1){
context.drawImage(imagenfiltro, 15, 335);
context.drawImage(imageninyector, 387, 312, 80, 190);
context.drawImage(imagendiesel, 540, 110, 250, 70);
}
rotarimagen(imagenmariposa, 220, 446, 80+ritmo/1);
context.strokeRect(0, 0, canvas.width, canvas.height);
rotarimagen(imagenciguenal, 425,865, contador/1);
context.drawImage(imagenbloquedel, 90, 514);
//***********Rotulo compresion
if ((contador>180)&&(contador<360)&&(leva==0)){
context.drawImage(imagencompresion, 520, 520, 280, 100);
}
//***********Rotulo admision
if ((contador>0)&&(contador<180)&&(leva==0)){
context.drawImage(imagenadmision, 520, 520, 280, 80);
}
//**********HUMO
if ((contador>170)&&(contador<360)&&(leva==1)){
var aleatorio = Math.round(Math.random()*10);
context.drawImage(imagenescape, 530, 520);
context.drawImage(imagenhumo01, 277+contador/12, 500, 320-contador/6, 250-contador/3);
if (aleatorio>5){
context.drawImage(imagenhumo02, 262, 250);
}
if (aleatorio<6){
context.drawImage(imagenhumo03, 342, 250);
}
if (aleatorio==1){
context.drawImage(imagenhumo04, 590, 360);
}
if (aleatorio==2){
context.drawImage(imagenhumo04, 595, 350);
}
if (aleatorio==3){
context.drawImage(imagenhumo04, 600, 340);
}
if (aleatorio==4){
context.drawImage(imagenhumo04, 610, 330);
}
if (aleatorio==5){
context.drawImage(imagenhumo04, 615, 320);
}
if (aleatorio==6){
context.drawImage(imagenhumo04, 620, 310);
}
if (aleatorio==7){
context.drawImage(imagenhumo04, 625, 300);
}
if (aleatorio==8){
context.drawImage(imagenhumo04, 630, 290);
}
}
//**********LLAMA
if ((contador>10)&&(contador<170)&&(leva==1)){
var escala = contador;
if (escala>120){
escala = 120;
}
context.drawImage(imagenexplosion, 520, 520, 280, 100);
context.drawImage(imagenllama01, 367-escala/1.8, 487, 120+escala*1.3, 150+escala);
}
//*******BIELA PISTON
rotarimagen(imagenbiela, 425 ,580+(radiociguenal-yciguenal), -angulobiela);
context.drawImage(imagenpiston, 364, 516+(radiociguenal-yciguenal));
//******************************VALVULA ADMISION
if ((contador<70)&&(leva==0)){
context.drawImage(imagenvalvulaadmision, 319.5+((4/35)*(contador/2)), 327+((14/35)*(contador/2)));
}
if ((contador>68)&&(contador<260)&&(leva==0)){
context.drawImage(imagenvalvulaadmision, 4+319.5-((4/100)*((contador-70)/2)), 14+327-(14/100)*(contador-70)/2);
}
if (contador>258){
context.drawImage(imagenvalvulaadmision, 319.5, 327);
}
if (leva==1){
context.drawImage(imagenvalvulaadmision, 319.5, 327);
}
//*********** VALVULA ESCAPE
if ((contador>130)&&(contador<200)&&(leva==1)){
context.drawImage(imagenvalvulaescape, 426-((4/35)*((contador-130)/2)), 327+((14/35)*((contador-130)/2)));
}
if ((contador>198)&&(contador<362)&&(leva==1)){
context.drawImage(imagenvalvulaescape, 422+((4/80)*((contador-198)/2)), 14+327-(14/80)*(contador-198)/2);
}
if (contador<132){
context.drawImage(imagenvalvulaescape, 426, 327);
}
if (contador>318){
//context.drawImage(imagenvalvulaescape, 426, 327);
}
if (leva==0){
context.drawImage(imagenvalvulaescape, 426, 327);
}
//****************
if (leva==0){
rotarimagen(imagenleva, 344, 314, ((contador/2)+40)/1);
rotarimagen(imagenleva, 509, 314, ((contador/2)+180)/1);
if (contador==360){
leva = 2;
}
}
if (leva==1){
rotarimagen(imagenleva, 344, 314, ((contador/2)+220)/1);
rotarimagen(imagenleva, 509, 314, ((contador/2))/1);
if (contador == 360){
leva = 0;
}
}
}
if (arranque==0){
context.clearRect(0,0,canvas.width, canvas.height);
context.fillStyle="#81BEF7";
context.fillRect(0, 0, canvas.width, canvas.height);
context.drawImage(imagensimulador, 0, 0);
context.drawImage(imagenmotorgris, 850, 0);
context.drawImage(imagenarranque, 30, 110, 70, 70);
context.drawImage(imagenstop, 100, 100, 90, 90);
context.drawImage(imagenflechagira, 460, 115, 60, 60);
context.drawImage(imagenguiaacelerador, 230, 125, 210, 80);
context.drawImage(imagenmandoacelerador, 280, 120, 70, 40);
context.drawImage(imagenbloquepos, 90, 514);
context.drawImage(imagenculata, 262, 250);
context.drawImage(imagencarburador, 5, 282);
context.drawImage(imagenbujia, 397, 362);
context.drawImage(imagenciguenal, 200, 635);
context.drawImage(imagenbloquedel, 90, 514);
context.drawImage(imagenbiela, 350 ,310);
context.drawImage(imagenpiston, 364, 516);
context.drawImage(imagenvalvulaadmision, 319.5, 327);
context.drawImage(imagenvalvulaescape, 426, 327);
context.drawImage(imagenleva, 285, 263);
context.drawImage(imagenleva, 450, 263);
context.drawImage(imagenmariposa, 207, 406);
//document.getElementById("datos").innerHTML=x+"aa"+y;
}
}
function rotarimagen(imagen, x, y, angulo) {
context.save();
context.translate(x, y);
context.rotate(angulo * radian);
context.drawImage(imagen, -(imagen.width/2), -(imagen.height/2));
context.restore();
}
</script>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</table>
<p id="datos">
</p>
</body>
</html>
Page updated
Google Sites
Report abuse