ProjectD/참고자료

참고자료 ¶

코드의 질은 보장하지않음....
JavaScript/2011년스터디

URL Hunter ¶

<html>
    <head>
        <script>
            var arr=new Array(40);
            var hunter=20;
            

            function firprint()
            {
                var i=0;

                while(i<40)
                {
                    arr[i]='-';
                    i++;
                }

                makea();
                arr[hunter]='O';
                continuePrint();
            }
            
            function continuePrint()
            {
                
                location.href="./URLHunter.html#|||"+arr.join('')+"|||time:";
                movea();
            }
            
            function makea()
            {
                var a;
                for(i=0;i<10;i++)
                {
                    a=Math.floor(Math.random()*40);
                    if(arr[a]=='-') arr[a]='a';
                }
            }
            function keyboard(){

				switch(event.keyCode){
					case 37:	// Left
                    if(hunter>0){
                        hunter--;
                        if(arr[hunter]=='a') arr[hunter]='@';
                        else arr[hunter]='O';
                        
                        if(arr[hunter+1]=='@') arr[hunter+1]='a';
                        else arr[hunter+1]='-';
                    }
                    continuePrint();
                    break;
					case 39:	// Right
                    if(hunter<40){

                        hunter++;
                        if(arr[hunter]=='a') arr[hunter]='@';
                        else arr[hunter]='O';
                        
                        if(arr[hunter-1]=='@') arr[hunter-1]='a';
                        else arr[hunter-1]='-';
                        
                    }
                    continuePrint();
                    break;
					case 32:	// Space Bar
                    if(arr[hunter]=='@'){
                        arr[hunter]='O';
                    }
                    continuePrint();
                    break;
                }
            }
            function movea(){
                var temp;
                i=0;
                while(i<40)
                {
                    if(arr[0]=='a') arr[1]=='a';
                    if(arr[40]=='a') arr[39]=='a';
                    temp=Math.floor(Math.random()*3)-1;
                    if(arr[i]=='a') {
                        if(arr[i-1]!='O'||arr[i]!='O'||arr[i+1]!='O') {
                            arr[i]='-'; arr[temp+i]='a';
                        }
                    }
                    i++;
                }
            }
        
        </script>
    </head>
    <body onload="firprint();" onkeydown="keyboard();">
        <input type="button" value="pause" onclick="pause();"/>
        <br/>
        !!! 완성했다!	</body>
</html>

그림판 ¶

<!doctype html>
<html>
    <head>
        <meta charset="utf-8"/>
        <script>
            var flag=false;
            var element;
            var ctx;
            var color=3,size=2,drawmethod=1;
            var dotx,doty;
            var temp;
            var lastImage=[],imgNum=1,imgNumL=0;
            
        function draw()
        {	
            if(ctx && flag){
                ctx.beginPath();
                drawColor();
                if(drawmethod==1) drawLines();
                else if(drawmethod==2) drawDotPoint();
            }
        }
            
            function hold()
            {
                flag=true;
                
                element=document.getElementById('drawLine');
                ctx=element.getContext('2d');

                draw();
            }
            function release()
            {

                dotx=undefined;
                undoprac();
                imgNumL=imgNum;
                flag=false;
            }


//            var draw=new array();
//            draw.color=a;
//            draw.color();
//          
            function undoprac()
            {
                if(lastImage[imgNum-1]!=element.toDataURL()){
                    lastImage[imgNum]=element.toDataURL();
                    imgNum++;
                }
            }
            
            function undo()
            {
                ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);
                
                var img = new Image();
                img.onload = function(){
                    ctx.drawImage(img,0,0);
                }
                if(imgNum!=1){
                    img.src = lastImage[imgNum-2];
                    imgNum--;
                }else {
                    img.src = lastImage[0];
                }
            }
            function redo()
            {
                
                ctx.clearRect(0,0,window.innerWidth-15, window.innerHeight-50);
                
                var img = new Image();
                img.onload = function(){
                    ctx.drawImage(img,0,0);
                }
                if(lastImage[imgNum]!=undefined&&imgNumL!=imgNum){
                    img.src = lastImage[imgNum];
                    imgNum++;
                }else {
                    img.src = lastImage[imgNum-1];
                    alert("더이상 되살릴 수 없습니다.");
                }
            }
            
            function selectColor(temp)
            {
                color=temp;
            }
            function selectSize(temp)
            {
                size=temp+1;
            }
            function drawMethod(temp)
            {
                drawmethod=temp;
            }
            
            
            function drawColor()
            {
                switch(color){
                    case 0:
                    ctx.fillStyle="rgb(255, 255, 255)";
                    ctx.strokeStyle="rgb(255, 255, 255)";
                    break;
                    case 1:
                    ctx.fillStyle="rgb(5, 5, 230)";
                    ctx.strokeStyle="rgb(5, 5, 230)";
                    break;
                    case 2:
                    ctx.fillStyle="rgb(230, 5, 5)";
                    ctx.strokeStyle="rgb(255, 0, 0)";
                    break;
                    case 3:
                    ctx.fillStyle="rgb(0, 0, 0)";
                    ctx.strokeStyle="rgb(0, 0, 0)";
                }

            }
            function drawDotPoint()
            {
                ctx.arc(event.x-7, event.y-7, size, 0, Math.PI*2, false);
                ctx.fill();

            }
            function drawLines()
            {
                if(ctx && flag){
                    ctx.beginPath();
                    ctx.lineWidth=size;
                    ctx.moveTo(dotx-7, doty-7);
                    ctx.lineTo(event.x-7, event.y-7);
                    dotx=event.x;
                    doty=event.y;

                    ctx.stroke();
                    return 0;
                }
                
            }
            </script>
    </head>
    <body>
        <canvas id="drawLine" width="300" height="300" onmousedown="hold();" 
            onmouseup="release();" onmouseout="release();" onmousemove="draw();"></canvas>
        Choose Color:
        <select name="colors"onclick="selectColor(this.selectedIndex)">
            <option value="White">White(Eraser)</option>
            <option value="Blue">Blue</option>
            <option value="Red">Red</option>
            <option value="Black"selected="selected">Black</option>
        </select>
        Size:
        <select name="sizes"onclick="selectSize(this.selectedIndex)">
            <option value="1">1</option>
            <option value="2"selected="selected">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
        </select>
        Style:
        <button type="button" onclick="drawMethod(1)"> LINE </button>
        <button type="button" onclick="drawMethod(2)"> DOT </button>
        실행취소:
        <button type="button" onclick="undo()"> UNDO </button>
        <button type="button" onclick="redo()"> REDO </button>
            <!--
        <form action="">
        </form>
         -->
        <script>
            element=document.getElementById("drawLine");
            element.setAttribute("width", window.innerWidth-15);
            element.setAttribute("height", window.innerHeight-50);
            context=element.getContext('2d');
            context.strokeRect(0, 0, window.innerWidth-15, window.innerHeight-50);
            lastImage[0]=element.toDataURL();
            </script>
    </body>
</html>