JavaScript228 [JavaScript] 벽돌깨기 게임 만들기 (2) 공 튕기기 안녕하세요.오늘은 벽돌깨기 게임만들기 두번째 시간입니다.이전 편에서 우리는 HTML5 와 자바스크립트를 사용하여 벽돌 깨기 게임의 기본 구조를 만들고, 캔버스에 공, 패들, 벽돌을 그렸습니다. 이번 편에서는 공이 벽이나 패들, 벽돌에 닿았는지 여부를 확인해서 공이 튕겨나갈 수 있도록 동작을 추가해 보겠습니다. 이전 시간에 작성한 코드에서 이어서 작성합니다. 이전 코드는 아래 링크를 참고해주세요.2024.08.12 - [JavaScript] - [JavaScript] 벽돌깨기 게임 만들기 (1) 에 도형 그리기 1. 공이 캔버스 밖으로 벗어나지 않게 하기이 작업은 draw() 함수에서 다음 공의 위치를 업데이트할 때 이루어집니다. 공이 캔버스 밖으로 빠져나가지 않게 하려면(1) 좌,우 벽에 닿았을때 공을.. 2024. 8. 18. [JavaScript] 사칙연산 계산기 만들기 안녕하세요 오늘은 자바스크립트를 이용하여 사칙연산이 가능한 간단한 계산기를 만들어보겠습니다 먼저 html 파일을 만들어줍니다. calculator.html 사칙연산 + - x / (나누기) Calculate Result: 아래는 자바 스크립트 코드 입니다 calculator.js 사칙연산 + - x / (나누기) 계산하기 결과: 결과 화면입니다 2024. 8. 16. [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. [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. [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. [JavaScript] 다크 모드 토글 기능 구현 안녕하세요.오늘은 다크모드 토글 기능을 구현 해보겠습니다. index.html 파일을 생성해줍니다. 다크모드 토글 예시 다크모드 토글 styles.css/* styles.css */body { transition: background-color 0.5s, color 0.5s;}.container { text-align: center; margin-top: 50px;}button { padding: 10px 20px; font-size: 16px; cursor: pointer;}.light-mode { background-color: white; color: black;}.dark-mode { background-color: black; co.. 2024. 7. 2. [Javascript] dad joke 만들기 오늘은 dad joke를 만들어보겠습니다. index.html random dad jokes Lorem, ipsum dolor sit amet consectetur adipisicing elit. Exercitationem unde quibusdam quia ex asperiores consectetur quis maxime corporis suscipit expedita. styles.css*,::after,::before { box-sizing: border-box;}:root { --primary-100: hsl(21, 94%, 87%); --primary-200: hsl(21, 80%, 74%.. 2024. 6. 28. [Javascript] stripe만들기 오늘은 stripe를 만들어보겠습니다 indexl.html products developers company Sign in Payments infrastructure for the internet .. 2024. 6. 23. [Javascript] wikipedia 데이터 가져오기 오늘은 검색한 결과를 wikipedia에서 가져오는 프로젝트를 만들어보겠습니다. index.html Search Wikipedia search styles.css*,::after,::before { box-sizing: border-box;}html { font-size: 100%;} /*16px*/:root { /* colors */ --primary-100: #e2e0ff; --primary-200: #c1beff; --primary-300: #a29dff; --primary-400: #837dff; --primary-50.. 2024. 6. 19. 이전 1 ··· 3 4 5 6 7 8 9 ··· 26 다음
