Schneefall mit Musik

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Schneefall mit Musik

Beitrag von Hape »

Hier ein Schneefallscript mit Musik. Der Schnee bleibt am unteren Bildschirmrand liegen.

Code: Alles auswählen

<script language="javascript">
<!--
ns6 = document.getElementById;
ns  = document.layers;
ie  = document.all;
/*******************[AccessCSS]***********************************/
function accessCSS(layerID)        {                                                                                                                                    //
  if(ns6){ return document.getElementById(layerID).style;}     //
   else if(ie){ return document.all[layerID].style; }         //
    else if(ns){ return document.layers[layerID]; }          //
}/***********************************************************/
/**************************[move Layer]*************************************/
function move(layer,x,y)  { accessCSS(layer).left=x; accessCSS(layer).top = y; }
function browserBredde() {
        if (window.innerWidth) return window.innerWidth;
        else if (document.body.clientWidth) return document.body.clientWidth;
        else return 1024;
}

function browserHoyde() {

            if (window.innerHeight) return window.innerHeight;
            else if (document.body.clientHeight) return document.body.clientHeight;
            else return 800;
}
function makeDiv(objName,content)
{
          // positionType could be 'absolute' or 'relative'
          var oDiv = document.createElement ("DIV");
    oDiv.id = objName;
    oDiv.style.width = 24;
                oDiv.style.height= 24;
                oDiv.innerHTML=content;
                oDiv.style.position = "absolute";
                oDiv.style.left=-2000;
                oDiv.style.top=-2000;
                oDiv.style.overflow="hidden";
    document.body.appendChild (oDiv);
                delete oDiv;
}

var snowC=0;
var x = new Array();
var y = new Array();
var speed = new Array();
var t=0;
var cC = new Array();
var ra = new Array();
var sum_snowC = 0;
var alive = new Array();

var snoHaug = new Array();
var maxWidth=browserBredde()-60;
var maxHeight = browserHoyde();
for (t=0;t<Math.round(maxWidth/10);t++) snoHaug[t] = maxHeight-10;
function makeSnow() {
        sum_snowC++;
        x[snowC] = Math.round(Math.random()*maxWidth);
        y[snowC] = 10;
        speed[snowC] = Math.round(Math.random()*8)+1;
        var bilde="/snow1.gif";
        if (speed[snowC]<3)  bilde="/snow2.gif";
         else if (speed[snowC]<6) bilde="/snow3.gif";
          else if (speed[snowC]<8) bilde="/snow2.gif";

        alive[snowC] = true;
        makeDiv("snow"+snowC,'<img src="'+bilde+'">');

        cC[snowC]=Math.random()*10;
        ra[snowC] = Math.random()*7;
        snowC++;

}
function deleteSnow(nr) {
        sum_snowC--;
        alive[nr] = false;
        snoHaug[Math.round(x[nr]/10)]-=7;
}
function moveSnow() {
        var r = Math.round(Math.random()*100);
        if (r>70 && sum_snowC<20) makeSnow();

        for (t=0;t<snowC;t++) {
                if (alive[t]) {
                                y[t]+=speed[t];move("snow"+t,x[t],y[t]);
                                if (y[t]>snoHaug[Math.round(x[t]/10)]) deleteSnow(t);

                                cC[t]+=0.01;
                                x[t]+=Math.cos(cC[t]*ra[t]);
                                if (x[t]>maxWidth) x[t] -= 5;
                                else if (x[t]<10) x[t] = 10;
                }

        }

//        setTimeout('moveSnow()',20);
}

var snowId = "jau";
snowId = setInterval('moveSnow()',10);

document.body.onLoad=doIt();
//--------------------------------[stop]--------------------------------------
//-->
</script>

<div style="visibility:hidden">
    <audio autoplay>
        <source src="URL zur Sounddatei">
    </audio>
</div>
Demoseite hier: https://hapes-javascript-demo-page.hpag ... musik.html
Dateianhänge
snow3.gif
snow3.gif (173 Bytes) 5204 mal betrachtet
snow2.gif
snow2.gif (62 Bytes) 5204 mal betrachtet
snow1.gif
snow1.gif (207 Bytes) 5204 mal betrachtet

Antworten