![Børre Stenseth](http://www.it.hiof.no/~borres/allround/selfimages/bs.gif)
Videopussel
Puzzle
![vent litt](http://www.it.hiof.no/~borres/allround/waiter.gif)
Vent til videoen er i gang, så kan du flytte brikkene på plass for å høre lyden.
Den involverte javascriptkoden er:
_video2.js
var V=null; // the video element var CList=null; // the canvas elements var DList=new Array(); // the dragables encosing canvas var VW; // Video width var VH; // Video height var TILE_WIDTH; // all tiles same width var TILE_HEIGHT; // all tiles same height var contextList=new Array(); // (re)init the page function doIt(){ //no sound V.muted=true; //turn off waiter document.getElementById("waiter").style.display="none"; // show shuffler document.getElementById("shuffler").style.display="block"; // all draggables DList=document.getElementsByClassName("dragme"); // adjust canvases to match video VH=V.videoHeight; VW=V.videoWidth; // when debugging: dump("Video: "+VW+","+VH); TILE_WIDTH=Math.round(1.0*VW/3); TILE_HEIGHT=Math.round(1.0*VH/2); BOX.style.width=""+(VW+50)+"px"; BOX.style.height=""+(VH+50)+"px"; setDragBox([-4,-4,VW-TILE_WIDTH/2+4,VH-TILE_HEIGHT/2+4]); try{ for(var ix=0;ix < CList.length;ix++) { CList[ix].style.width=""+TILE_WIDTH+"px"; CList[ix].style.height=""+TILE_HEIGHT+"px"; DList[ix].style.width=""+TILE_WIDTH+"px"; DList[ix].style.height=""+TILE_HEIGHT+"px"; contextList[ix]=CList[ix].getContext('2d'); } shuffle(); setInterval("refresh()", 33); } catch(e){ alert("no good"); } } //check the tiles with some tolerance function check(){ // refpoint is top-left var L=parseInt(DList[0].style.left); var T=parseInt(DList[0].style.top); var ix; // wile debugging /*dump(); for(ix=1;ix < DList.length;ix++) { var ld=Math.abs(parseInt(DList[ix].style.left)-L); var td=Math.abs(parseInt(DList[ix].style.top)-T); dump("offset tile "+ix+" left: "+ld+" top: "+td); }*/ // horizontal offset match for(ix=1;ix < 3;ix++){ var ldiff=Math.abs(parseInt(DList[ix].style.left)-L); if( (ldiff > ix*(TILE_WIDTH+10)) || (ldiff < ix*(TILE_WIDTH-10))){ V.muted=true; return false; } } for(ix=3;ix < CList.length;ix++){ var ldiff=Math.abs(parseInt(DList[ix].style.left)-L); if( (ldiff > (ix-3)*(TILE_WIDTH+10)+10) || (ldiff < (ix-3)*(TILE_WIDTH-10)-10)){ V.muted=true; return false; } } //vertical match for(ix=3;ix < CList.length;ix++){ var tdiff=Math.abs(parseInt(DList[ix].style.top)-T); if( (tdiff > (TILE_HEIGHT+10)) || (tdiff < (TILE_HEIGHT-10))){ V.muted=true; return false; } } // turn on sound V.muted=false; return true; } // shuffle the pieces function shuffle(){ var bw=parseInt(BOX.style.width); var bh=parseInt(BOX.style.height); for(var ix=0;ix < DList.length; ix++){ var l=Math.floor(Math.random()*(bw-TILE_WIDTH)); var t=Math.floor(Math.random()*(bh-TILE_HEIGHT)); // while debugging:dump(""+l+" / "+t); DList[ix].style.left=""+l+"px"; DList[ix].style.top=""+t+"px"; DList[ix].zIndex=ix; } } // this is where we copy from video to canvases function refresh(){ // startclipX, startclipY,clipWidth,clipHeigth,placeX,placeY,W,H var TW=TILE_WIDTH; var TH=TILE_HEIGHT; var w=CList[0].width; var h=CList[0].height contextList[0].drawImage(V, 0, 0, TW,TH, 0,0,w,h); contextList[1].drawImage(V, TW, 0, TW,TH, 0,0,w,h); contextList[2].drawImage(V, 2*TW,0, TW,TH, 0,0,w,h); contextList[3].drawImage(V, 0, TH, TW,TH, 0,0,w,h); contextList[4].drawImage(V, TW, TH, TW,TH, 0,0,w,h); contextList[5].drawImage(V, 2*TW,TH, TW,TH, 0,0,w,h); } // when debugging // when debugging function dump(T) { if(T){ var S=document.getElementById("dump").innerHTML; document.getElementById("dump").innerHTML=S+"\n"+T; }else document.getElementById("dump").innerHTML=""; }
og:
_dragdrop.js
/* Modified from: http://elouai.com/javascript-drag-and-drop.php */ var ie=document.all; var nn6=document.getElementById&&!document.all; var isdrag=false; var x,y; var tx=0; var ty=0; var draggedObj; //-- bs -- var MAXZ=1; var DRAGBOX=[minx=0,0,100,100]; function setStartMaxZ(z){ MAXZ=z; } function setDragBox(b){ DRAGBOX=b; } //---- bs --- function dragMouse(e) { var evt = e || window.event; if (isdrag) { var px=tx + evt.clientX - x; var py=ty + evt.clientY - y; // --- bs if((px < DRAGBOX[0]) ||(py < DRAGBOX[1]) || (px > DRAGBOX[2]) || py > DRAGBOX[3]) drop(); else { draggedObj.style.left =''+px+'px'; draggedObj.style.top =''+py+'px'; } //-- bs return false; } } function selectmouse(e) { var evt = e || window.event; var fobj = evt.target; var topelement = "HTML"; while (fobj.tagName != topelement && fobj.className != "dragme") fobj = fobj.parentElement; if (fobj.className=="dragme") { isdrag = true; draggedObj = fobj; //--- bs -- draggedObj.style.cursor="move"; draggedObj.style.zIndex=MAXZ+1; MAXZ+=1; //--- bs -- tx=0; ty=0; if(draggedObj.style.left) tx = parseInt(draggedObj.style.left); if(draggedObj.style.top) ty = parseInt(draggedObj.style.top); x = evt.clientX; y = evt.clientY; document.onmousemove=dragMouse; return false; } } function drop() { isdrag=false; //--- bs if(draggedObj) draggedObj.style.cursor="default"; check(); //-- bs draggedObj=null; } function initDND() { document.onmousedown=selectmouse; document.onmouseup=drop; }
Et enkelkt stilsett:
_video2.css
.dragme{position:absolute; top:10px;left:10px; width:1px;height:1px; margin:0px} #canbox{position:relative;border-style:solid;border-width:thin} .was-dragme{position:absolute; top:10px;left:10px; width:1px;height:1px; border-style:solid;border-width:thin;border-color:red; margin:0px}
Du kan også inspisere resultatet og kildekoden på en enklere side:
test2.html
http://www.it.hiof.no/~borres/dw/ht5/canvas/video/test2.html