전체                  ==>     *

type tag             ==>   div

ID                     ==>  #id

class                  ==> .class

state                  ==>  :

atrribute             ==>  [] 

'IT 통신 수학 과학 > HTML' 카테고리의 다른 글

000webhost/아이엠앱에서 php로 DB 접속  (0) 2021.06.01
2d canvas game : brick breaker  (0) 2020.10.03
웹에 그림그리는 4가지 방법  (0) 2020.10.01
웹에 그림그리기.  (0) 2020.10.01

 

데이타베이스 접속//테이블 생성

<?php

           $con=mysqli_connect("localhost","USER_ID","USER_PWD","DB_NAME");

           // Check connection

           if (mysqli_connect_errno())

          {

                     echo "Failed to connect to MySQL: " . mysqli_connect_error();

          }

 

 

           // Create table

           $sql="CREATE TABLE users(ID INT user_name CHAR(30), firstname CHAR(30), lastname CHAR(30), email CHAR(30))";

 

           // Execute query

           if (mysqli_query($con,$sql))

          {

                     echo "Table persons created successfully";

          }

           else

          {

                     echo "Error creating table: " . mysqli_error($con);

          }

?>

 

데이타베이스 테이블에 항목추가

 

<?php

    $con=mysqli_connect("localhost","localhost","USER_ID","USER_PWD","DB_NAME");

    // Check connection

    if (mysqli_connect_errno())

    {

        echo "Failed to connect to MySQL: " . mysqli_connect_error();

    }

    echo $sql;

 

    $sql = "INSERT INTO DB_NAME.users (id, user_name, firstname, lastname, email)    

    VALUES ('7','hopman7', 'Dog man7','gold Smith7', 'john7@example.com')";

 

    echo $sql;

 

    // if ($mysql_query($sql) === TRUE) {

    //     echo "New record inserted successfully";

    // } else {

    //     echo "Error: " . $sql . "<br>" . $conn->error;

    // }

 

    if ($con->query($sql) === TRUE) {

        echo "Table MyGuests created successfully";

    } else {

        echo "Error creating table: " . $conn->error;

    }

 

    $conn->close();

?>

 

데이타베이스 테이블 내용 조회

 

<?php

   

  $con=mysqli_connect("localhost","localhost","USER_ID","USER_PWD","DB_NAME");

    // Check connection

    if (mysqli_connect_errno())

     {

     echo "Failed to connect to MySQL: " . mysqli_connect_error();

     }

     

    $query = "SELECT id, user_name FROM DB_NAME.users";

 

    $res = $con->query($query); 

    //$res = mysqli_query($conn, $query);

    

    $num =$res->num_rows ;

 

    if ($res->num_rows > 0)   {

        // output data of each row

        while($row = $res->fetch_assoc()) {

            echo "id: " . $row["id"]. " - Name: " . $row["user_name"]. "<br>";

        }

    } else {

        echo "0 results";

    }

    $con->close();

?>

 

'IT 통신 수학 과학 > HTML' 카테고리의 다른 글

CSS 셀렉터  (0) 2021.06.05
2d canvas game : brick breaker  (0) 2020.10.03
웹에 그림그리는 4가지 방법  (0) 2020.10.01
웹에 그림그리기.  (0) 2020.10.01

feliz-dia.000webhostapp.com/game1.html

 

 

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title>Gamedev Canvas Workshop</title>

    <style>

         * { padding: 0; margin: 0; }

         canvas { background: #eee; display: block; margin: 0 auto; }

    </style>

</head>

<body>

    <canvas id="myCanvas" width="480" height="320"></canvas>

 

    <script>

        var canvas = document.getElementById("myCanvas");

        var ctx = canvas.getContext("2d");

        var ballRadius = 10;

        var x = canvas.width / 2;

        var y = canvas.height - 30;

        var dx = 2;

        var dy = -2;

        var paddleHeight = 10;

        var paddleWidth = 75;

        var paddleX = (canvas.width - paddleWidth) / 2;

        var rightPressed = false;

        var leftPressed = false;

        var brickRowCount = 3;

        var brickColumnCount = 5;

        var brickWidth = 75;

        var brickHeight = 20;

        var brickPadding = 10;

        var brickOffsetTop = 30;

        var brickOffsetLeft = 30;

       

        var lives = 3;

        var score = 0;

 

        var bricks = [];

        for (var c = 0; c < brickColumnCount; c++) {

            bricks[c] = [];

            for (var r = 0; r < brickRowCount; r++) {

                bricks[c][r] = { x: 0, y: 0, status: 1 };

            }

        }

 

        document.addEventListener("keydown", keyDownHandler, false);

        document.addEventListener("keyup", keyUpHandler, false);

        document.addEventListener("mousemove", mouseMoveHandler, false);

 

        function keyDownHandler(e) {

            if (e.key == "Right" || e.key == "ArrowRight") {

                rightPressed = true;

            }

            else if (e.key == "Left" || e.key == "ArrowLeft") {

                leftPressed = true;

            }

        }

 

        function keyUpHandler(e) {

            if (e.key == "Right" || e.key == "ArrowRight") {

                rightPressed = false;

            }

            else if (e.key == "Left" || e.key == "ArrowLeft") {

                leftPressed = false;

            }

        }

       

        function mouseMoveHandler(e) {

            var relativeX = e.clientX - canvas.offsetLeft;

            if(relativeX > 0 && relativeX < canvas.width) {

                paddleX = relativeX - paddleWidth/2;

            }

        }

       

        function drawLives() {

            ctx.font = "16px Arial";

            ctx.fillStyle = "#0095DD";

            ctx.fillText("Lives: "+lives, canvas.width-65, 20);

        }

       

        function collisionDetection() {

            for(var c=0; c<brickColumnCount; c++) {

                for(var r=0; r<brickRowCount; r++) {

                    var b = bricks[c][r];

                    if(b.status == 1) {

                        if(x > b.x && x < b.x+brickWidth && y > b.y && y < b.y+brickHeight) {

                            dy = -dy;

                            b.status = 0;

                            score++;

                            if(score == brickRowCount*brickColumnCount) {

                                alert("YOU WIN, CONGRATS!");

                                document.location.reload();

                            }

                        }

                    }

                }

            }

        }

       

        function drawBall() {

            ctx.beginPath();

            ctx.arc(x, y, ballRadius, 0, Math.PI * 2);

            ctx.fillStyle = "#0095DD";

            ctx.fill();

            ctx.closePath();

        }

       

        function drawPaddle() {

            ctx.beginPath();

            ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);

            ctx.fillStyle = "#0095DD";

            ctx.fill();

            ctx.closePath();

        }

       

        function drawBricks() {

            for (var c = 0; c < brickColumnCount; c++) {

                for (var r = 0; r < brickRowCount; r++) {

                    if (bricks[c][r].status == 1) {

                        var brickX = (c * (brickWidth + brickPadding)) + brickOffsetLeft;

                        var brickY = (r * (brickHeight + brickPadding)) + brickOffsetTop;

                        bricks[c][r].x = brickX;

                        bricks[c][r].y = brickY;

                        ctx.beginPath();

                        ctx.rect(brickX, brickY, brickWidth, brickHeight);

                        ctx.fillStyle = "#0095DD";

                        ctx.fill();

                        ctx.closePath();

                    }

                }

            }

        }

       

        function drawScore() {

            ctx.font = "16px Arial";

            ctx.fillStyle = "#0095DD";

            ctx.fillText("Score: "+score, 8, 20);

        }

 

        function draw() {

            ctx.clearRect(0, 0, canvas.width, canvas.height);

            drawBricks();

            drawBall();

            drawPaddle();

            collisionDetection();

            drawScore();

            drawLives();

 

            if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {

                dx = -dx;

            }

            if (y + dy < ballRadius) {

                dy = -dy;

            }

            else if (y + dy > canvas.height - ballRadius) {

                if (x > paddleX && x < paddleX + paddleWidth) {

                    if (y = y - paddleHeight) {

                        dy = -dy;

                    }

                }

                else {

                    lives--;

                    if(!lives) {

                        alert("GAME OVER");

                        document.location.reload();

                        clearInterval(interval); // Needed for Chrome to end game

                    }

                    else {

                        x = canvas.width/2;

                        y = canvas.height-30;

                        dx = 2;

                        dy = -2;

                        paddleX = (canvas.width-paddleWidth)/2;

                    }

                }

            }

 

            if (rightPressed && paddleX < canvas.width - paddleWidth) {

                paddleX += 7;

            }

            else if (leftPressed && paddleX > 0) {

                paddleX -= 7;

            }

 

                x += dx;

                y += dy;

        }

 

        var interval = setInterval(draw, 10);

    </script>

 

</body>

</html>

'IT 통신 수학 과학 > HTML' 카테고리의 다른 글

CSS 셀렉터  (0) 2021.06.05
000webhost/아이엠앱에서 php로 DB 접속  (0) 2021.06.01
웹에 그림그리는 4가지 방법  (0) 2020.10.01
웹에 그림그리기.  (0) 2020.10.01

: Canvas, SVG, CSS, and direct DOM animation. 

There are four ways to draw things on the web: Canvas, SVG, CSS, and direct DOM animation. Canvas differ from the other three:

SVG: SVG는 그림을 그리는 vector API 이다. 각 그림은 한개의 object를 갖는다.  그 object에 event handler를 연결할 수 있고 줌을 할때 캔버스에서 부드럽게 픽셀로 변환되어질 수 있다. 

CSS: CSS은 사실은 styling DOM elements에 관한 것이다. 그래서 캔버스에 그릴 수 있는 DOM objects가 없고,

      DOM object를 꾸밀 수 있는CSS가 없다.

      css는 사각형 영역에만 영향을 미치고 경계와 배경 색깔을 설정할 수 있다.

DOM animation: The DOM, Document Object Model은 화면에 있는 모든 object를 정의한다.,

      DOM animation은 CSS나 JavaScript로 objects를 움직일 수 있고 캔버스로 움직이는 것보다

      부드럽게 움직일 수 있으나 구현은 웹 브라우저에 따라 다르다.

Canvas : 위의 다른 것 낮은 수준으로 그림에 더 많은 제어를 해야하나 적은 메모리를 사용한다.  즉 적은 메모리를 사용하는 만큼 많은 코드가 필요하다는 것이다.

 

브라우저 지원

Safari 3.0+
Chrome 10+
Opera 9+
FireFox 4.0+
Internet Explorer 9.0+

 

핸드폰 지원

iOS all
webOS all
Android 2.0+
BlackBerry Playbook and OS 6.0+
Windows Phone 7 none

 

 

 

'IT 통신 수학 과학 > HTML' 카테고리의 다른 글

CSS 셀렉터  (0) 2021.06.05
000webhost/아이엠앱에서 php로 DB 접속  (0) 2021.06.01
2d canvas game : brick breaker  (0) 2020.10.03
웹에 그림그리기.  (0) 2020.10.01

본 내용은   joshondesign.com/ 에서 게시된 내용을 정리한 내용입니다.    

 

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    c.fillStyle = "red";

    c.fillRect(100,100,400,300);

  </script>

</body>

</html>

SCREENSHOT Simple red rectangle

feliz-dia.000webhostapp.com/simple%20rectangle.html

 

 

코드

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    c.fillStyle = '#ccddff';

    c.beginPath();

    c.moveTo(50,20);

    c.lineTo(200,50);

    c.lineTo(150,80);

    c.closePath();

    c.fill();

    c.strokeStyle = 'rgb(0,128,0)';

    c.lineWidth = 5; c.stroke();

  </script>

</body>

</html>

    

feliz-dia.000webhostapp.com/simple%20triangle.html

 

simple path :

<html>

<body>

  <canvas width="800" height="600" id="canvas"></canvas>

  <script>   

    var canvas = document.getElementById('canvas');

    var c = canvas.getContext('2d');

    
    c.fillStyle = 'red';
    c.beginPath();
    c.moveTo(10,30);
    c.bezierCurveTo(50,90,159,-30,200,30);
    c.lineTo(200,90);
    c.lineTo(10,90);
    c.closePath();
    c.fill();
    c.lineWidth = 4;
    c.strokeStyle = 'black';
    c.stroke();    
  </script>

</body>

</html>

feliz-dia.000webhostapp.com/simple%20path.html

 

 

 

 

 

 

 

 

 

 

 

'IT 통신 수학 과학 > HTML' 카테고리의 다른 글

CSS 셀렉터  (0) 2021.06.05
000webhost/아이엠앱에서 php로 DB 접속  (0) 2021.06.01
2d canvas game : brick breaker  (0) 2020.10.03
웹에 그림그리는 4가지 방법  (0) 2020.10.01

+ Recent posts

티스토리툴바