Coding/JavsScript 삽질기2023. 4. 18. 00:16

게임 플레이 해보기
http://www.chobocho.com/game/tetris/

 

Chobosho's tetris

Tetris!

chobocho.com

 

자바스크립트를 공부하면서 만든 아이템 테트리스 소스 입니다.
인터넷을 대충 뒤져 보니, 간단한 테트리스 소스는 많으나,
퍼즐 테트리스, 아이템 테트리스 소스는 없어서 공개 합니다.


 



소스코드 위치
https://github.com/chobocho/webTetris/tree/item_tetris

 

GitHub - chobocho/webTetris: Javascript tetris

Javascript tetris. Contribute to chobocho/webTetris development by creating an account on GitHub.

github.com

좋아요, 추천은 힘이 됩니다! ^^
 

Posted by chobocho
Coding/JavsScript 삽질기2022. 8. 25. 00:03

Javascript로 만든 계산기 입니다.

Chobocho's Simple Calculator
View
MR M+ M- MC

 

Posted by chobocho

자바스크립트로 만델브로트 집합을 구현해 보았다.

만델브로트 집합

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Mandelbrot</title>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <style>
        canvas {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
<div align='center'>
    <canvas id="canvas"></canvas>
</div>

<script language="JavaScript">
    // Start: 2022.02.02
    // Update: 2022.02.02

    let cvs;
    let canvas;
    let bufCanvas;
    let bufCtx;

    function InitCanvas() {
        height = window.innerHeight;
        width = window.innerWidth;

        canvas = document.getElementById("canvas");
        canvas.width = width;
        canvas.height = height;
        cvs = canvas.getContext("2d");

        bufCanvas = document.createElement("canvas");
        bufCanvas.width = canvas.width;
        bufCanvas.height = canvas.height;
        bufCtx = bufCanvas.getContext("2d");
    }

    function _draw() {
        let imageData = bufCtx.createImageData(canvas.width, canvas.height);
        const MAX_COUNT = 255;

        // X = -3.0 ~ 3.0
        // Y = -2.0 ~ 2.0
        // Z = X + Yi

        let mx = -3.0;
        let my = -2.0;
        let mw = 6.0;
        let mh = 4.0;
        let scaleX = mw / imageData.width;
        let scaleY = mh / imageData.height;

        for (let i = 0; i < imageData.height; i++) {
            for (let j = 0; j < imageData.width; j++) {

                let c = 0;
                let x = mx + j * scaleX;
                let y = my + i * scaleY;
                let sx = x;
                let sy = y;

                for (c = 0; c < MAX_COUNT; c++) {
                    if (x**2 + y**2 > 4) {
                        break;
                    }
                    let nx = x**2 - y**2;
                    let ny = 2 * x * y;
                    x = nx + sx;
                    y = ny + sy;
                }

                let pos = 4 * (i * imageData.width + j);

                imageData.data[pos+0] = c;
                imageData.data[pos+1] = c;
                imageData.data[pos+2] = c;
                imageData.data[pos+3] = 255;
            }
        }

        bufCtx.putImageData(imageData, 0, 0);
    }

    function OnDraw() {
        _draw();
        cvs.beginPath();
        cvs.clearRect(0, 0, canvas.width, canvas.height);
        cvs.drawImage(bufCanvas, 0, 0);
    }

    function onLoadPage() {
        InitCanvas();
        OnDraw();
    }

    window.onload = onLoadPage();
</script>
</body>
</html>
Posted by chobocho
Coding/JavsScript 삽질기2019. 12. 17. 00:22

소개 (https://chobocho.tistory.com/2461396)
실행하기 http://www.chobocho.com/javascript/painter.html
전체 소스코드 https://github.com/chobocho/painter

 

chobocho/painter

Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.

github.com

6.1 원 그리기

원을 그리는 함수를 추가합니다.

circle = new Shape("Circle");
circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
function circleMouseDown(event) {
  console.log("circleMouseDown");
  if (painter.isDraw()) {
    return;
  }
  bufCtx.drawImage(canvas, 0, 0);
  var startPos = getMousePosition(event);
  painter.shape.point.x = startPos.X;
  painter.shape.point.y = startPos.Y;
  painter.setDrawMode(true);
}

function circleMouseMove(event) {
  if (!painter.isDraw()) {
    return;
  }
  var currentPos = getMousePosition(event);
  cvs.beginPath();
  // Need a delay
  cvs.clearRect(0, 0, canvas.width, canvas.height);
  cvs.drawImage(bufCanvas, 0, 0);

  cvs.strokeStyle = painter.getColor();

  var circle = {
    X: Math.round((painter.shape.point.x + currentPos.X) / 2),
    Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
    R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
  };
  cvs.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
  cvs.closePath();
  cvs.stroke();
}

function circleMouseUp(event) {
  if (!painter.isDraw()) {
    return;
  }

  var currentPos = getMousePosition(event);
  bufCtx.beginPath();
  bufCtx.strokeStyle = painter.getColor();

  var circle = {
    X: Math.round((painter.shape.point.x + currentPos.X) / 2),
    Y: Math.round((painter.shape.point.y + currentPos.Y) / 2),
    R: Math.round(Math.abs(currentPos.Y - painter.shape.point.y) / 2)
  };
  bufCtx.arc(circle.X, circle.Y, circle.R, 0, Math.PI * 2);
  bufCtx.closePath();
  bufCtx.stroke();

  cvs.clearRect(0, 0, canvas.width, canvas.height);
  cvs.drawImage(bufCanvas, 0, 0);

  painter.setDrawMode(false);
}

 

6.2 도형의 선택

원과 선을 선택 할 수 있도록 html 파일에 함수를 연결 합니다.

[paint.js]

function selectShape(choosedShape) {
  console.log("selectShape:" + choosedShape);
  painter.setShape(choosedShape);
}

Painter 객체에 선, 원을 tools라는 자료형에 추가를 합니다.

Painter.prototype.init = function () {
  line = new Shape("Line");
  line.mouseAction = new MouseAction(lineMouseUp, lineMouseDown, lineMouseMove);
  this.tools[line.name] = line;

  circle = new Shape("Circle");
  circle.mouseAction = new MouseAction(circleMouseUp, circleMouseDown, circleMouseMove);
  this.tools[circle.name] = circle;

  this.shape = this.tools["Line"];
  this.color = "black";
}
function onLoadPage() {
  
  // ...

  painter = new Painter();
  painter.init();
}

6.3 기타 수정 사항

color 값은 모든 도형이 공통적으로 사용하므로,
shape 에서 painter 객체로 이동을 합니다.

Painter.prototype.init = function () {
  // ...
  this.color = "black";
}

 

여기까지 소스코드:

https://github.com/chobocho/painter/tree/master/doc/tutorial/006/src

 

chobocho/painter

Painter written html5. Contribute to chobocho/painter development by creating an account on GitHub.

github.com

 

공감과 댓글은 큰 도움이 됩니다.

Posted by chobocho

'Coding > JavsScript 삽질기' 카테고리의 다른 글

REST (REpresentational State Transfer)  (0) 2018.07.04
Chobocho Calc 2  (0) 2017.03.31
Sam Loyd's unsolvable 15-puzzle  (0) 2017.02.05
Posted by chobocho
Coding/JavsScript 삽질기2017. 3. 31. 00:45

* Javascript로 만든 계산기

http://www.chobocho.com/javascript/calc.html


* 문법

   # : 주석

   변수 수식 ::= 변수에 수식을 대입한다

   = 수식 ::= 수식을 계산한다 


* Source : https://github.com/chobocho/Calc

'Coding > JavsScript 삽질기' 카테고리의 다른 글

공백을 제거해주는 스크립트  (0) 2018.04.02
Sam Loyd's unsolvable 15-puzzle  (0) 2017.02.05
Puzzle game  (0) 2017.01.22
Posted by chobocho
Coding/JavsScript 삽질기2016. 10. 28. 01:28



<HTML>

    <head>

        <title>Chobocho's Simple Calculator</title>

            <style>

                .tile {

                  text-align:center;

                  width:40px;

                  height:40px;

                  font-size:24px;

                  background-color:"white";

                  border:1px solid black;

                  box-shadow:black 1px 1px;

                }

                

                textarea {

                  height:100px;

                  width:200px;

                  text-align:right;

                  font-size:24px;

                  border:1px solid black;

                  box-shadow:black 1px 1px;

                  padding:2px;

                }

            </style>       

        

        <script language="JavaScript">

            var sum = 0;

            var ret = "";

            var keypadValue = [ "AC", "←", "(", ")", "7", "8", "9", "÷", "4", "5", "6", "×", "1", "2", "3", "-", "0", ".", "=", "+" ];

            

            function init() {

                var table = document.getElementById("keypad");


                

                window.onkeydown = onKeyDown;

                window.onkeyup   = onKeyUp;

                

                for (var i = 0; i < 5; i++) {

                    var tr = document.createElement("tr");

                    for (var j = 0; j < 4; j++) {

                        var td = document.createElement("td");

                        td.className="tile";

                        var idx = i*4 + j;

                     

                        td.value = idx;

                        td.index = idx;

                        td.textContent = keypadValue[idx];

                        td.onclick = onClick;

                        tr.appendChild(td);

                    }

                    table.appendChild(tr);

                } 

            }  

            function onKeyUp(e) {

            }

            function onKeyDown(e) {

            }

            function onClick(e) {

               var clkTile = e.srcElement.index;

               var isClickEqual = false;


               switch(clkTile) {

               case 0 : // AC

                    sum = 0;

                    ret = "";

                    break;

               case 1 : // <-

                    ret = ret.slice(0,-1);

                    break;

               case 2 : // (

               case 3 : // )

               case 4 : // 7

               case 5 : // 8

               case 6 : // 9

               case 7 : // ÷

               case 8 : // 4

               case 9 :

               case 10 :

               case 11 : // x

               case 12 : 

               case 13 :

               case 14 :

               case 16 : // 0

               case 19 : // +

                    ret = ret + keypadValue[clkTile];

                    break;

               case 15 : // -

                    if (ret == "") {

                        ret = "-";

                    } else {

                        ret = ret + "-";

                    }

                    break;

               case 17 : // .

                    if (ret == "") {

                        ret = "0.";

                    } else {

                        ret = ret + ".";

                    }

                    

                    break;

               case 18 : // =

                    if (ret == "" && sum != 0) {

                        ret = sum;

                    } else {

                        ret = ret.replace(/×/g, "*").replace(/÷/g, "/");

                        try {

                            sum = eval(ret);

                        } catch(e) {

                            sum = "Error";

                        }

                        ret = "";

                    }

                    isClickEqual = true;

                    break;               

               default:

                   break;

               }

               console.log("Exp : " + ret + " Sum : " + sum);

               

               document.getElementById("result").value = isClickEqual ? sum : ret;

            }         

        </script>

    </head>

    <body onload="init()">

         <table id="keypad" align="center">

            <tr>

                <td colspan=4>

                <textarea id="result" disabled=true cols="35" rows="1"></textarea>

                </td>

            </tr>

         </table>

    </body>

</HTML>

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Puzzle game  (0) 2017.01.22
Clock  (0) 2016.10.25
Puzzle  (0) 2016.10.25
Posted by chobocho
Coding/JavsScript 삽질기2016. 10. 25. 23:23



<html>

    <head>

        <title> My Clock </title>

        <script language="JavaScript">

          // 2016.10.10


          var cvs;

          var clockWidth = 200;

          

          function init() {

              var canvas = document.getElementById("canvas")

              cvs = canvas.getContext("2d");

              drawPanel();

              tick();

              setInterval(tick, 1000);

          }


          function drawPanel() {

              // Draw panel

              cvs.strokeStyle = "black";

              var width = clockWidth/2;

 

              for (var i = 0; i < 12; i++) {          

                  cvs.beginPath();

                  var r = Math.PI / 6 * i;

                  var size = 0.9;

                  cvs.moveTo(width + width * size * Math.sin(r), width + width * size * Math.cos(r));

                  cvs.lineTo(width + width * Math.sin(r), width + width * Math.cos(r));

                  cvs.closePath();

                  cvs.stroke();

              }

          }

          

          function drawClock() {

              var width = clockWidth/2;

              cvs.strokeStyle = "black";

              

              var currentTime = new Date();

              var h = currentTime.getHours() % 12;

              var m = currentTime.getMinutes();

              var s = currentTime.getSeconds();

 

              if ( s === 0 ) {

                  cvs.fillStyle = "white";

                  cvs.fillRect(0, 0, clockWidth, clockWidth);

                  drawPanel();

              }

 

              cvs.beginPath();

              var rh = Math.PI / 6 * h + Math.PI / 6 * ( m / 60 );

              var sizeh = 0.6;

              cvs.moveTo(width, width);

              cvs.lineTo(width + width * sizeh * Math.sin(rh), width - width * sizeh * Math.cos(rh));

              cvs.closePath();

              cvs.stroke();    


              cvs.beginPath();

              var rm = Math.PI / 30 *  m;

              var sizeM = 0.7;

              cvs.moveTo(width, width);

              cvs.lineTo(width + width * sizeM * Math.sin(rm), width - width * sizeM * Math.cos(rm));

              cvs.closePath();

              cvs.stroke();                 

             

              cvs.beginPath();

              var rs = Math.PI / 30 *  s;

              var sizeS = 0.9;

              var sizeS2 = 0.95;

              cvs.strokeStyle = "red";

              cvs.moveTo(width + width * sizeS * Math.sin(rs), width - width * sizeS * Math.cos(rs));

              cvs.lineTo(width + width * sizeS2 * Math.sin(rs), width - width * sizeS2 * Math.cos(rs));

              cvs.closePath();

              cvs.stroke();    

              

              document.getElementById("time").textContent = ((h < 10)  ? "0":"") + h + ":" + ((m < 10)  ? "0":"") + m + ":" + ((s < 10)  ? "0":"") + s;               

          }

                  

          function tick() {

              drawClock();

          }

        

        </script>

    </head>

    

    <body onload="init()">

         <table border="0" align="center">

             <tr>

                 <td>

                     <canvas id="canvas" width="200" height="200"> </canvas>

                 </td>

             </tr>

             <tr>

                 <td align="center">

                     <span id="time"></span>

                 </td>

             </tr>

         </table>

    </body>

</html>

'Coding > JavsScript 삽질기' 카테고리의 다른 글

Simple calculator  (0) 2016.10.28
Puzzle  (0) 2016.10.25
Timer  (0) 2016.09.29
Posted by chobocho
Coding/JavsScript 삽질기2016. 9. 29. 00:04


<html>


    <head>

        <title> Timer </title>

        <script language="JavaScript">

          // 2016. 9. 28

        

          var timerId = NaN, mTime = 0;

          

          function startTimer() {

              mTime = document.getElementById("timer").value;

              timerId = setInterval(tick, 1000);

              document.getElementById("reset").disabled = true;

              document.getElementById("start").disabled = true;

              document.getElementById("stop" ).disabled = false;

              document.getElementById("timer").disabled = true;

          }

          

          function stopTimer() {

              clearInterval(timerId);

              document.getElementById("reset").disabled = false;

              document.getElementById("start").disabled = false;

              document.getElementById("stop" ).disabled = true;

              document.getElementById("timer").disabled = false;

          }

          

          function resetTimer() {

              mTime = 0;

              document.getElementById("timer").value = mTime;

          }

        

          function tick() {

              mTime--;

              document.getElementById("timer").value = mTime;

              if (parseInt(mTime) <= 0) {

                    stopTimer();

                  alert("Time over!");

              }

          }

        

        </script>

    </head>

    

    <body>

        <table border=0 align="center">

            <tr>

                <td>

                   <button onClick="startTimer()" id="start" >Start</button>

                   <button onClick="stopTimer()"  id="stop"  disabled=true >Stop</button>

                   <button onClick="resetTimer()" id="reset" disabled=true >Reset</button>

                </td>

            </tr>

            <tr>

                <td>

                    <input id="timer"></input>

                </td>

            </tr>

        </table>

    </body>


</html>


'Coding > JavsScript 삽질기' 카테고리의 다른 글

Puzzle  (0) 2016.10.25
Samll lisp by Javascript  (0) 2016.09.12
Chobocho Calc 1  (1) 2016.04.23
Posted by chobocho
Coding/JavsScript 삽질기2016. 9. 12. 22:39

Test : http://www.chobocho.com/javascript/lisp.html

Github : https://github.com/chobocho/SmallLisp


Javascript 로 만든 Small LIsp


Small Lisp 만들기

자바스크립트를 공부하면서 간단한 lisp interpreter를 만들어 보기로 하고,
구글링을 통해서 찾은 사이트 http://norvig.com/lispy.html를 참고하여서 만들어 보았다.

1. 목 표

아래 코드를 실행 하여 결과를 출력

(define pi 3)  
(if (= pi 3) (+ 4 5) (* 4 5 ))  
(define twice (lambda (x) (* 2 x)))  
(twice 2)  
(define forth (lambda (x) (* (twice x) (twice x))))  
(forth 2)  
(define fact (lambda (n) (if (<= n 1) 1 (* n (fact (- n 1))))))  
(fact 16)  
(fact (forth 2))  

2. lisp test를 위한 입력용 list.html 제작

<HTML>
<head>
<title>Small lisp</title>

<script language="JavaScript" src="lisp.js"></script> 

<script language="JavaScript">
function Run(form) { 
    form.result_view.value = main(form.source_view.value); 
}

function ClearForm(form) { 
    form.result_view.value = "";
    form.source_view.value = "";    
}

</script>
</head>
<body>

<!------------------------------------------------------------------
// 입력양식
------------------------------------------------------------------->
<FORM name=source_code>
    <TABLE cellSpacing=0 borderColorDark=white align=center borderColorLight=black border=1>
        <TR>
            <TD align="center">
            [ Lisp source ]
            </TD>
            <TD align="center">
            [ 결과 (Result) ]
            </TD>    
        </TR>
        <TR>
            <TD width=160 height=40>
                <SPAN style="FONT-SIZE: 9pt"><TextArea name="source_view" cols="50" rows="20"></textArea> </SPAN>
            </TD>
            <TD width=80 height=40>
                <SPAN style="FONT-SIZE: 9pt"><TextArea name="result_view" cols="20" rows="20"></textArea> </SPAN>
            </TD>
        </TR>
        <TR>
            <TD align="center" width=246 colSpan=2 height=25>
                <SPAN style="FONT-SIZE: 9pt"><INPUT type="button" value="Run", onClick="Run(this.form)"> </SPAN>
                <SPAN style="FONT-SIZE: 9pt"><INPUT type="button" value="Clear", onClick="ClearForm(this.form)"> </SPAN>
            </TD>
        </TR>
        <TR>
            <TD width=240 colSpan=2>
                Example<br>
                (+ 1  2  3)<br>
            </TD>
        </TR>         
    </TABLE>
 </FORM>

</body> 
</HTML>

3. Small Lisp 제작

3.1 지원 할 명령어 리스트

Javascript 학습을 목적으로 만든 것이이서 최소한의 명령어만을 지원한다.

  • 1) +, -. *, /
  • 2) <. >. =. <=. >=
  • 3) define, if
  • 4) lambda (* 쉬운 구현을 위하여 lambda의 인자로 lamdba 함수는 올 수 없도록 제한 함)

3.2 제작 순서

  • 1) +, -. *, /
  • 2) <. >. =. <=. >=
  • 3) define, if
  • 4) lambda

3.3 사칙 연산 계산 ( +. -. *. / )

먼저 (+ 5 5)를 처리하는 코드를 만들어 보자.
먼저 (+ 5 5)를 파싱을 해주어야 한다. 이때, 파서를 따로 제작하지 않고,
javascript string 객체에서 지원하는 메소드를 이용한다.

3.3.1 space 기준으로 자르기 위하여, ( )를 ‘ ( ’ 와 ‘ ) ’ 로 앞뒤에 space를 붙여준다.

replace( /(/g, " ( " );
replace( /)/g, " ) " );
그러나, 구문 제일 앞의 ‘ (’ 와 ‘) ’의 스페이스는 trim()을 이용해 제거를 해주어야 한다.
그렇지 않으면, 파싱된 Token에 “ ”가 구문의 제일 앞과 뒤에 추가 된다.
이걸 정리하면 아래와 같은 코드가 나오고,

function main(args) {
    //Tokenize
    source_code = args.replace(/\(/g, " ( ").replace(/\)/g, " ) ").trim().split(/\s+/);
    return source_code;
}

list.html 에서 아래와 같이 입력시에 ( + 1 2 3 )
아래와 같은 결과를 얻을 수 있다.
(,+,1,2,3,)

3.3.2 소스를 읽어서 ( ) 로 분리한다.

( ) 를 기준으로 파싱을 하기 위한 read_from_tokens() 함수를 만든다.
'(' 를 만나면, ')'를 만날 때 까지 값을 읽어서 그 값을 하나의 리스트에 저장한다.
')'를 만나면 리스트를 통째로 하나의 인자로 input 리스트에 인자로 넣는다.

function main(args) {

    var Result = "";

    //Tokenize
    source_code = args.replace(/\(/g, " ( ").replace(/\)/g, " ) ").trim().split(/\s+/);

    tokens = [];
    read_from_tokens(source_code, tokens);

    return tokens;
}


function read_from_tokens(input, output) {
    token = input.shift();

    switch(token) {
        case undefined:
            output.pop();
            break;

        case '(':
            var list = [];
            while (input[0] != ')') {
                read_from_tokens(input, list);
            }
            input.shift(); // Remove ')'
            output.push(list);
            break;

        case ')':
           console.log("Error : Start with ')'!");
            break;

        default:
            if ( isDigit(token.charAt(0))) {
                output.push(parseInt(token));
            } else {
                output.push(token);
            }
            break;
    } 
}

function isDigit ( ch )
{
    if ("0123456789".indexOf(ch) != -1)
        return true;
    return false;
}

list.html 에서 아래와 같이 입력시에
( + 1 2 3 )
아래와 같은 결과를 얻을 수 있다.
+,1,2,3


'Coding > JavsScript 삽질기' 카테고리의 다른 글

Timer  (0) 2016.09.29
Chobocho Calc 1  (1) 2016.04.23
글자수 세는 자바 스크립트  (2) 2011.11.15
Posted by chobocho