본문 바로가기

분류 전체보기

 (101)
[벽돌깨기]html 캔버스로 게임 만들기 - 3(충돌감지) 공의 움직임까지 구현했지만 공이 화면 밖으로 사라지는 문제가 있습니다 화면의 끝, 벽과 충돌할 때 감지하고 벽 밖으로 나가지 못하게 충돌 감지 함수를 만들고 충돌할 경우 벽에 튕기도록 해보겠습니다 충돌 감지 충돌을 감지하기 위해서는 공이 벽에 닿았는지를 확인하고 그에 따라 움직이는 방향을 수정해야 합니다 ballRadius 변수를 만들고 원의 반지름 값에 대입합니다 var ballRadius = 10; drawBall() 함수 안에 ballRadius을 그리는 코드를 아래와 같이 변경해보겠습니다 ctx.arc(x, y, ballRadius, 0, Math.PI*2); 위아래 좌 우 방향 확인하기 매 프레임마다 공이 4방향에 충돌했는지 확인해야 합니다 위, 아래 방향은 y축과 좌, 우 방향은 x축과 관련이..
[벽돌깨기]html 캔버스로 게임 만들기 - 2(공 움직이기) 2020/10/05 - [HTML] - [벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) 캔버스를 이용해서 벽돌깨기 게임을 만들 준비와 공을 그렸습니다 이번에는 공을 움직이는 방법입니다 화면에서는 공이 움직이지만 실제로는 공이 움직이는 것처럼 보이게 공을 그렸다가 지우는 과정을 반복합니다 매 프레임마다 공의 위치를 조금씩 다르게 그려서 공이 움직이는 것처럼 보이게 하는 방식입니다 드로잉 루프 정의하기 매 프레임마다 캔버스에 계속해서 그리는 것을 반복하기 위해서는 갱신해주는 함수가 필요합니다 MDN 사이트에서는 JavaScript 타이밍 함수인 SetInterval() 함수 또는 requestAnimationFrame() 함수를 이용하면 함수를 계속 반복 사용할 수 있다고 소개하고 있습니다 s..
[벽돌깨기]html 캔버스로 게임 만들기 - 1(캔버스 생성) 추억의 벽돌깨기를 HTML5로 만들 수 있습니다 코드는 MDN web docs에 나온 내용을 복습하면서 만든 벽돌깨기 게임입니다 캔버스 생성 HTML 구조는 간단하게 태그 하나면 준비가 끝납니다 캔버스 태그 id는 myCanvas로 만들고 캔버스의 가로 세로 길이를 결정하는 속성 width, height를 사용해서 width(너비)가 480이고 height(높이)가 320인 캔버스 태그를 만듭니다 스크립트 작성 HTML 태그는 태그 하나로 끝났습니다 벽돌깨기의 핵심은 태그로 구현합니다 캔버스의 var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); 다음은 빨간색 네모를 캔버스에 그리는 방법입니다 주의 : be..
움직이는 글자를 만들 수 있는 태그 marquee 사용법 움직이는 글자 태그입니다 marquee 태그는 입력한 글자를 움직이게 해주는 태그입니다 글자뿐만이 아니라 배경색, 글자의 속도 그리고 글자의 움직임 방향 등등 다양한 모습을 보여줄 수 있는 태그입니다 옵션의 종류가 다양한 편입니다 bgcolor="색상" 기본값은 없음입니다 css color를 주는 방식과 동일합니다 width="너비" 기본값 지정을 안 하면 화면을 다 채움니다 heigth="높이"기본값 지정을 안 하면 글자 크기를 따라갑니다 direction="방향"기본값 지정을 안 하면 왼쪽으로 움직입니다 loop="반복 횟수"기본값 지정을 안 하면 계속해서 반복합니다 scrollamount="속도" 배경 색상(배경 : 검은색) 너비(너비 : 100px) 높이(높이 : 100px) 방향(위, 오른쪽, ..
[PIL]ImageGrab - 화면 캡처하는 프로그램 만들기 파이썬 이미지 처리하는 도와주는 라이브러리를 사용해서 실행하면 정해준 시간 동안 스크린샷을 찍어서 png 형식의 이미지 파일로 저장하는 프로그램을 만듭니다 PIL 파이썬 라이브러리 중에서 이미지 관련 처리를 해주는 라이브러리 PIL을 먼저 import 해야 합니다 pip install Pillow 명령어로 라이브러리를 다운로드합니다 여러 기능 중 ImageGrab를 사용합니다 ImageGrab.grab()을 사용하면 스크린샷의 이미지를 가져옵니다 가져온 이미지는 save() 함수로 저장합니다 시간을 사용하기 위해서는 time 라이브러리는 import 합니다 따로 설치할 필요 없이 기본적으로 가지고 있는 라이브러리입니다 이제 2초에 한 번씩 스크린샷을 총 10번 찍는 프로그램을 만듭니다 실행하면 range..
파이썬 GUI - 프레임 만들기 파이썬 GUI 티킨더(tkinter) 사용 방법을 모른다면? 파이썬 GUI - 기본틀 만들기 프레임 만들기 "기본틀 만들기"와 달리 프레임은 지금까지 만든 버튼. 레이블, 체크박스 등등 만들어온 것들을 프레임으로 좀 더 보기 편하고 구분을 위해서 만드는 것입니다 기존에 버튼을 만들면 버튼들이 만든 순서대로 생성돼서 자리에 위치합니다 프레임을 만들고 버튼들을 프레임 안에 넣겠습니다 Frame() 함수를 사용해서 프레임을 넣을 수 있습니다 Frame(넣을 위치) 사용해서 pack() 함수로 프레임을 만듭니다 언어(language) 주제의 버튼들을 만들고 Frame에 넣고 화면에 보여줍니다 화면상으로는 똑같아 보이지만 이제 버튼들은 frame_language 프레임 안에 있습니다 테두리(border)를 만들어..
파이썬 GUI - 메시지박스 만들기 파이썬 GUI 티킨더(tkinter) 사용 방법을 모른다면? 파이썬 GUI - 기본틀 만들기 메시지박스 만들기 메시지박스는 경고창, 알림 등을 만들어주는 함수입니다 메시지박스를 사용하기 위해서는 아래와 같이 tkinter.messagebox를 import 해야합니다 알림창 알림창은 파란색 배경에 "i" 글자로 되어있습니다 사용방법은 showinfo('제목', '내용')입니다 버튼을 사용해서 "알림" 버튼을 클릭하면 알림창이 나오게 하는 방법입니다 버튼을 변수에 담지 않고 만들고 command를 통해서 만든 함수를 바로 사용할 수 있습니다 알림창 실행 화면입니다 경고창 경고창은 노란색 배경에 "!" 글자로 되어있습니다 사용방법은 showwarning('제목', '내용')입니다 버튼을 사용해서 "경고" 버튼..
파이썬 GUI - 메뉴 만들기 파이썬 GUI 티킨더(tkinter) 사용 방법을 모른다면? 파이썬 GUI - 기본틀 만들기 메뉴 만들기 메모장의 메뉴 같은 메뉴 만들기입니다 메모장의 파일, 편집, 서식, 보기, 도움말 등이 위치한 곳으로 클릭을 하면 아래로 또 다른 메뉴가 나오는 방식입니다 메뉴는 Menu 함수를 사용하면 됩니다 메뉴 자체는 기능이 없고 메뉴를 만들고 메뉴에 추가적인 옵션을 생성해야 기능이 있는 메뉴가 됩니다 add_command add_radiobutton add_checkbutton add_separator add_cascade 이렇게 4가지 종류가 있습니다 add_command는 직접 만든 함수 등을 클릭했을 때 실행될 수 있게 합니다 add_radiobutton는 라디오 버튼입니다 메뉴 중 하나만 선택 가능합니..
파이썬 GUI - 프로그레스(로딩바) 만들기 파이썬 GUI 티킨더(tkinter) 사용 방법을 모른다면? 파이썬 GUI - 기본틀 만들기 로딩바 만들기 막대기에 초록색 등의 색깔이 점점 채워져서 막대기를 꽉 채우는 장면을 본 적이 있을 겁니다 로딩바 혹은 프로그레스바(progressbar)라고 불리는 것을 만들겠습니다 만들기 전에 ttk를 import 해야 프로그레스바(progressbar) 사용이 가능합니다 ttk를 import 했으니 ttk의 Progressbar 함수를 호출합니다 progressbar = ttk.Progressbar(root) progressbar.pack() 실행을 합니다 프로그레스바가 생겼지만 아무 일도 일어나지 않습니다 start() 함수를 사용해야 프로그레스바가 자동으로 실행됩니다 start(숫자) 형식으로 숫자가 0에..
파이썬 GUI - 콤보박스 파이썬 GUI 티킨더(tkinter) 사용 방법을 모른다면? 파이썬 GUI - 기본틀 만들기 콤보박스 만들기 selectbox 모양으로 여러 가지 목록 중 하나를 보여줍니다 펼치기 전 모습입니다 펼친 후 모습입니다 만들기 전에 ttk를 import 해야 콤보박스(combobox) 사용이 가능합니다 import tkinter.ttk를 합니다 사용하기 편하게 as를 붙여서 ttk로 사용합니다 (tkinter.ttk = ttk) 콤보박스를 만드는 방법입니다 values 변수는 [] 안에 문자, 숫자 등 사용해서 만듭니다 []로 감싸진 형태를 배열이라고 부릅니다 문자, 숫자, 문자+숫자 형태를 저장할 수 있습니다 import 했던 ttk의 Combobox 함수를 이용합니다 사용방법입니다 Combobox(넣을 위..

티스토리툴바