분류 전체보기1345 [JavaScript] 벽돌깨기 게임 만들기 (1) <canvas> 에 도형 그리기 안녕하세요.오늘은 자바스크립트와 HTML5 ''를 이용해서 아래 동영상처럼 간단한 벽돌깨기 게임을 만들어보겠습니다. 이 시리즈는 총 3편으로 구성되고, 첫번째 편에서는 캔버스에 공, 벽돌, 패들을 그리는 방법을 다룹니다.그럼 시작해보겠습니다. 1. Index.html 파일 생성 먼저 HTML 파일을 설정하여 게임의 기본 구조를 만듭니다. 2. 공 그리기이제 'game.js' 파일을 만들고, 캔버스에 공을 그리려보겠습니다.// 캔버스와 2D 컨텍스트 가져오기const canvas = document.getElementById("myCanvas");const ctx = canvas.getContext("2d");// 공의 위치와 반지름 설정let x = canvas.width / 2; //.. 2024. 8. 12. [JAVA][Android] View Binding으로 레이아웃 뷰 연결하기 안녕하세요 오늘은 View Binding 을 사용하여 액티비티에 레이아웃 뷰 요소를 연결해보도록 하겠습니다. findViewById의 동작 방식 기존부터 사용되던 findViewById 메소드의 경우 런타임에 호출됩니다. On Create 메소드에서 setContentView 를 통해 레이아웃을 설정한 후 findViewById 를 호출하여 레이아웃 내의 특정 뷰를 찾습니다. 또한 뷰를 찾는 과정에서 루트 뷰를 시작으로 뷰 계층 구조를 순회하며 주어진 ID 값을 찾습니다. 이는 뷰 계층 구조가 깊거나 뷰의 개수가 많을 경우, 성능에 영향을 미칠 수 있습니다. View Binding 의 동작 방식 컴파일 타임에 생성된 모든 레이아웃에 대한 별도의 바인딩 클래스를 생성합니다. 이 과정에서 레이아웃 .. 2024. 8. 11. [JAVA][Android] CustomTextWatcher 사용해서 컴마, 원화 표시하기 안드로이드 텍스트에서 숫자에 컴마, 원화를 표시해 보겠습니다 import androidx.appcompat.app.AppCompatActivity;import android.os.Bundle;import android.widget.EditText;public class MainActivity extends AppCompatActivity { EditText editText; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); editText = fin.. 2024. 8. 10. [Nodejs]bcryptjs 활용하기 오늘은 bcryptjs를 활용해 비밀번호 해시 처리가 된 간단한 회원가입 및 로그인 예시를 만들어보겠습니다. 1.프로젝트 생성 및 초기화mkdir 생성할 폴더명cd 방금 생성한 폴더명npm init -y => 원하는 경로에 폴더를 생성하고 해당 폴더로 이동 후 프로젝트 생성 및 초기화 시켜줍니다. 2.express , bcryptjs 설치npm install express bcryptjs => 해당 경로에서 express 와 bcryptjs를 설치합니다. 3.회원가입, 로그인 html 파일들이 위치할 폴더, 서버용 js 파일, 회원가입 로그인 파일 생성mkdir 로그인, 회원가입 파일들을 모아둘 폴더명touch express 서버용으로 쓸 js 파일명touch 사용할 로그인 html 파일명tou.. 2024. 8. 9. [JavaScript] 드래그 앤 드랍으로 이미지 순서 변경하기 안녕하세요. 오늘은 자바스크립트에서 드래그 앤 드랍으로 이미지의 순서를 변경해보겠습니다. 먼저 틀이 되는 html 코드를 이용해서 이미지를 3개 준비합니다. 이미지 크기 등을 조정하기 위해 styles.css 도 작성합니다. body { font-family: Arial, sans-serif;}.container { display: flex; gap: 10px;}.draggable { width: 400px; /* .draggable의 너비를 400픽셀로 설정 */ height: 400px; /* .dra.. 2024. 8. 8. [JAVA][Android] 클릭한 라디오 버튼 배경 다르게 설정하기 안녕하세요.오늘은 클릭한 라디오버튼과 클릭하지 않은 라디오버튼의 배경을 다르게 보여줄 수 있도록 xml 파일을 만들어 보도록 하겠습니다. 클릭한 버튼은 검은색 배경에 하얀색 텍스트로, 클릭하지 않은 버튼은 하얀색 배경에 검은색 텍스트로 만들어 보겠습니다. 먼저, 라디오버튼의 배경이 될 xml 파일입니다. (res> drawable 에 radio_button_background.xml 파일 생성) xml 파일 코드(radio_button_background.xml ) 라디오버튼의 텍스트 색을 설정하는 xml 파일입니다. (res>.. 2024. 8. 7. [JavaScript] 마우스 드래그로 캔버스에 네모와 동그라미 그리기 안녕하세요 오늘은 자바스크립트에서 마우스를 드래그하여 원하는 크기의 네모, 동그라미를 그려보도록 하겠습니다. html 의 요소를 사용해보겠습니다. 먼저 html 파일을 생성해줍니다. html_shapes.html 네모 그리기 동그라미 그리기 같은 폴더 안에 js 파일을 만들어줍니다. js_shapes.js const canvas = document.getElementById('myCanvas');const ctx = canvas.getContext('2d');let drawingShape = '';let isDrawing = false;let startX, startY;document.getElementById('drawRect').ad.. 2024. 8. 6. [JAVA][Android] RecyclerView의 간격을 조정하기 안드로이드 리사이클러뷰는 기본적으로 뷰끼리 붙어있습니다. 간격을 조정해서 띄움으로써 좀 더 데이터의 구분이 쉬워집니다. activity_main.xml list_item.xml MainActivityimport android.os.Bundle;import androidx.appcompat.app.AppCompatActivity;import androidx.recyclerview.widget.LinearLayoutManager;import androidx.recyclerview.widget.RecyclerView;public class MainActivity extends AppCompatActivity { int ITEM_DIVIDER_HEI.. 2024. 8. 5. [JAVA][Android] BottomSheetDialogFragment 에 값 전달하고 받기 오늘은 BottomSheetDialogFragment 를 커스텀하여 메인 액티비티에서 입력한 값을 BottomSheet에 띄우고, BottomSheet에서 입력한 값을 메인 액티비티에서 받아보겠습니다. 레이아웃 xml 파일 코드(custom_bottomsheet_layout.xml) 레이아웃 xml 파일 코드(main_layout.xml) custom_BottomSheet 클래스 자바 코드public class custom_BottomSheet extends BottomSheetDialogFragment { private String getText; EditText bottomSheet_editText; Context co.. 2024. 8. 4. 이전 1 ··· 10 11 12 13 14 15 16 ··· 150 다음
