JavaScript228 [JavaScript] 비행기 슈팅 게임 만들기 - (1) 비행기 그리기 안녕하세요.자바스크립트로 간단한 비행기 슈팅 게임을 만들어보겠습니다.오늘은 먼저 다음 영상처럼 화면에 비행기를 그리고 키보드 입력에 따라 좌우로 움직이도록 해보겠습니다. index.html style.css/* 전체 화면의 기본 설정 */body { margin: 0; /* 여백 제거 */ display: flex; /* 화면을 중앙으로 정렬하기 위한 flexbox 사용 */ justify-content: center; /* 수평 중앙 정렬 */ align-items: center; /* 수직 중앙 정렬 */ height: 100vh; /* 화면 전체 높이 설정 */ background-color: #000; /* 배경색을 검정색으로 설정.. 2024. 9. 15. [JavaScript] 간단한 테트리스 게임 만들기 (3) - 일시정지 안녕하세요 테트리스 마지막 게시글입니다 테트리스 게임 이전편은 아래 링크에서 확인하실 수 있습니다 [JavaScript] 간단한 테트리스 게임 만들기오늘은 자바 스크립트로 간단한 테트리스 게임을 만들어보도록 하겠습니다. 먼저 HTML 코드입니다 (자바 스크립트 전체 코드는 게시글 하단에서 확인하실 수 있습니다) 테트리스 도형이 쌓stickode.tistory.com [JavaScript] 간단한 테트리스 게임 만들기 (2) - 레벨업 하기안녕하세요 오늘은 지난번에 만들었던 테트리스 게임에 레벨업 기능을 추가시켜보도록 하겠습니다. 기존 게임에서는 1초 간격으로 블럭이 하단으로 떨어지도록 구현하였습니다. 전체 코드는stickode.tistory.com 오늘은 일시정지 기능을 추가해보도록 하겠습니다 .. 2024. 9. 14. [JavaScript] 틱택토(Tic-Tac-Toe) 게임 만들기 안녕하세요.오늘은 자바스크립트로 간단한 틱택토 게임 예제를 만들어보겠습니다. index.html style.css* { margin: 0; padding: 0; box-sizing: border-box;}body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: Arial, sans-serif; background-color: #f0f0f0;}h1 { margin-bottom: 20px;}#g.. 2024. 9. 9. [JavaScript] 도형을 드래그하여 테두리에 정확히 맞추기 안녕하세요,오늘은 도형을 드래그하여 같은 크기의 테두리에 정확히 맞추면 테두리의 색이 변경되는 예시를 만들어보도록 하겠습니다. html 코드입니다. DOCTYPE html>html lang="en">head> meta charset="UTF-8"> meta name="viewport" content="width=device-width, initial-scale=1.0"> title>Documenttitle> style> #draggable { width: 100px; height: 100px; background-color: blue; position: absolute; .. 2024. 9. 5. [JavaScript] 간단한 테트리스 게임 만들기 (2) - 레벨업 하기 안녕하세요 오늘은 지난번에 만들었던 테트리스 게임에 레벨업 기능을 추가시켜보도록 하겠습니다. 기존 게임에서는 1초 간격으로 블럭이 하단으로 떨어지도록 구현하였습니다. 전체 코드는 하단에서 확인하실 수 있습니다 오늘은 여기에 레벨업 기능을 추가하여 1분마다 블럭의 하강 속도가 기존 속도대비 20%씩 빨라지도록 구현해보겠습니다.간단한 테트리스 게임 만들기 1편은 아래 링크에서 확인하실 수 있습니다. [JavaScript] 간단한 테트리스 게임 만들기오늘은 자바 스크립트로 간단한 테트리스 게임을 만들어보도록 하겠습니다. 먼저 HTML 코드입니다 (자바 스크립트 전체 코드는 게시글 하단에서 확인하실 수 있습니다) 테트리스 도형이 쌓stickode.tistory.com 자바스크립트 코드입니다. 변경된.. 2024. 9. 4. [JavaScript] 벽돌깨기 게임 발전시키기 - 가속도와 마찰력 추가하기 안녕하세요.오늘은 이전 글에 이어서 벽돌깨기 게임을 더 현실감 있게 만들기 위해 가속도와 마찰력을 추가해보겠습니다.지난 포스팅까지 따라해보셨다면, 공의 움직임이 현실과는 다르고 좀 답답하다고 느끼셨을 수 있습니다. 그 이유는 공이 속도가 변하지 않는 등속운동을 하도록 구현되어 있기 때문인데요. 가속도와 마찰력 개념을 도입하면 공의 속도가 현실에서 이동하는 물체와 유사하게 변화하도록 할 수 있습니다.이전 코드는 아래 링크를 참고해주세요.2024.08.28 - [JavaScript] - [JavaScript] 벽돌깨기 게임 발전시키기 - 목숨 기능 추가하기 [JavaScript] 벽돌깨기 게임 발전시키기 - 목숨 기능 추가하기안녕하세요.오늘은 이전에 만들었던 벽돌깨기 게임 예제를 더 발전시키기 위해서 목숨 .. 2024. 9. 3. [JavaScript] 벽돌깨기 게임 발전시키기 - 목숨 기능 추가하기 안녕하세요.오늘은 이전에 만들었던 벽돌깨기 게임 예제를 더 발전시키기 위해서 목숨 기능을 추가해보겠습니다.목숨은 플레이어가 실수로 공을 놓쳤을 때 줄어들며, 목숨이 0이 되면 게임이 종료됩니다. 기존의 코드는 아래 링크를 통해 확인해주세요.2024.08.12 - [JavaScript] - [JavaScript] 벽돌깨기 게임 만들기 (3) 게임 시작, 게임 오버, 게임 클리어, 다시 시작 구현하기 [JavaScript] 벽돌깨기 게임 만들기 (3) 게임 시작, 게임 오버, 게임 클리어, 다시 시작 구현하기ㅇ안녕하세요.오늘은 벽돌깨기 게임 만들기 마지막 시간입니다. 이전 시간에 canvas에 원하는 도형을 그리고, 각 도형이 서로 닿았을 때 원하는 대로 동작하도록 처리하는 방법에 대해서 배웠습stick.. 2024. 8. 28. [JavaScript] 간단한 테트리스 게임 만들기 오늘은 자바 스크립트로 간단한 테트리스 게임을 만들어보도록 하겠습니다. 먼저 HTML 코드입니다 (자바 스크립트 전체 코드는 게시글 하단에서 확인하실 수 있습니다) 테트리스 도형이 쌓일 배경을 만들어줍니다. 다음은 자바스크립트 코드입니다.앞서 작성한 HTML 코드에서는 캔버스의 크기를 가로 300픽셀, 세로 600픽셀로 설정했습니다.캔버스 위의 게임 보드는 작은 셀들로 구성되어 있습니다.// 1) grid 그리드 크기 설정 const canvas = document.getElementById('tetris');const context = canvas.getContext('2d');const grid = 20; // 테트리스 그리드 크기const cols = canvas.width .. 2024. 8. 24. [JavaScript] 벽돌깨기 게임 만들기 (3) 게임 시작, 게임 오버, 게임 클리어, 다시 시작 구현하기 ㅇ안녕하세요.오늘은 벽돌깨기 게임 만들기 마지막 시간입니다. 이전 시간에 canvas에 원하는 도형을 그리고, 각 도형이 서로 닿았을 때 원하는 대로 동작하도록 처리하는 방법에 대해서 배웠습니다.이번에는 실제 게임처럼 동작하도록 몇가지 기능을 추가해서 게임을 마무리 해보겠습니다. 이전 코드를 보고 싶으시면 아래 링크를 참고해주세요. 2024.08.12 - [JavaScript] - [JavaScript] 벽돌깨기 게임 만들기 (1) 에 도형 그리기2024.08.12 - [JavaScript] - [JavaScript] 벽돌깨기 게임 만들기 (2) 공 튕기기 1. index.html 수정먼저 index.html을 수정해서 시작하기, 다시 시작 버튼을 만들어줍니다. 게임 시작 다시 시작.. 2024. 8. 22. 이전 1 2 3 4 5 6 7 8 ··· 26 다음
