쉽고 빠르게 만드는 다양한 이미지 이펙트!
깡코딩
자바스크립트와 CSS로 흩어진 이미지 조각을 하나의 이미지로 완성하는 다양한 패턴의 이미지 이펙트를 따라 만들고 랜덤으로 나타나도록 처리합니다. 이 수업을 응용한다면 수강생 여러분의 독창적인 이펙트를 만들 수 있을 거라 생각되네요!
초급
JavaScript, HTML/CSS, 인터랙티브 웹
BEST
Learning interactive web while making web games! JAVASCRIPT
A three-in-one class where you can create web games and learn front-end web development skills! This class has been created to teach you how to create games using JavaScript, CSS, and HTML with your own ideas!
Reviews from Early Learners
What you will gain after the course
Naturally learn web animation and interactive web implementation principles while creating games!
Make games and learn FE web development skills!
Lecture Introduction
Web game play video
Recent work projects
Try creating various motions!
Create various motions for heroes that respond to keystrokes, monsters, shurikens, damage effects, and more.
Stop the oncoming monsters!
Let's implement a collision feature and create a game stage that blocks incoming monsters. We'll create a stage that repeats infinitely , and two game stages that the developer specifies .
Talk to NPCs and complete quests!
Create a game quest and a feature that allows you to interact with NPCs . Complete the quest and receive a reward .
Level up and adjust your hero stats!
Let's create a level-up function by managing the hero's health and experience points, and also change the hero's stats.
Class Features
- The class will be conducted using VanillaJS .
- I've broken it down into sections as much as possible to make it easier to understand and less boring .
- We learn by creating together sequentially .
- It's a fun class because we learn while making games.
- It deals a lot with arrays, objects, and loops .
- You can learn various web skills used in front-end development while creating games.
- It's similar to the principle of creating a game with Canvas, but it's easier to approach using HTML/CSS together.
- About 9 hours long! We'll explain everything in as much detail as possible. (52 lessons total)
- Learn a variety of skills that can increase your salary .
Please note
- Uses JavaScript ES6 syntax.
- We do not use open source libraries.
- If you have any questions about the class, please feel free to post them in the Q&A section! We have a strong support team .
- This course isn't about creating a game aimed at official release. Instead, we'll create a simple web game using HTML, CSS, and JavaScript.
- You should have a basic understanding of HTML, CSS, and JavaScript. Basic grammar will not be covered in class.
- Excluding the basic grammar, the implementation principles are explained in as much detail as possible while creating them sequentially.
- The class weight is approximately 80% JavaScript and 20% HTML/CSS.
- Free distribution of code from this course is prohibited .
- The game may have slight differences depending on the system and browser environment.
Expected Questions Q&A
- Q. What browsers does it work on?
- A. The games we created in class were tested on the latest versions of Chrome, Safari, Opera, Firefox, and Edge .
- Q. What are the differences depending on the system environment and browser?
- A. Since this is a game that runs on a browser, there may be slight differences in smoothness .
- Q. Can non-majors also take the course?
- A. I think even non-majors will be able to follow along if they know the basic grammar of HTML, CSS, and JavaScript.
A rich curriculum of 52 lectures and approximately 9 hours of content!
Please check below.
Recommended for
these people
Who is this course right for?
For those interested in UI/UX!
Job seekers who want to create a special portfolio!
Web animation! For those interested in interaction!
For those who want to learn various front-end skills!
For those who want to increase their skills and raise their salary!
Need to know before starting?
JAVASCRIPT, CSS, HTML
1,340
Learners
77
Reviews
163
Answers
4.7
Rating
3
Courses
안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)
10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.
저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요
많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.
제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.
그럼 수업에서 뵙겠습니다 :)
Curriculum
All
55 lectures ∙ (8hr 54min)
Course Materials:
Lecture resources
4. Game Settings
11:29
18. Making a Monster
06:06
Published:
Last updated:
Reviews
All
25 reviews
4.7
25 reviews
배가현Reviews 7
∙
Average Rating 5.0
5
36% enrolled인프런에서 인터렉트브웹을 만드는 강의를 많이 들었지만, 정말 많이 유익하고 도움이 되네요! 강의 시간도 좋고, 내용도 정말 좋네요! 좋은 강의 감사합니다. 저도 많이 훈련해서 나중에 누군가에게 도움이 되는 강의를 만들고 싶어지네요! 2022년 새해 복 많이받으세요!
- 깡코딩Instructor
안녕하세요 :) 새해부터 이렇게 기분 좋아지는 글을 보게되어 한편으론 마음이 무겁지만 한편으론 힘도나고 너무 기쁘네요 :) 감사합니다. 새해 복 많이 많이 받으시고 좋은일만 가득하길 바라겠습니다 ^___^
$68.20
ggangcoding162118's other courses
Check out other courses by the instructor!
Similar courses
Explore other courses in the same field!
![제대로 배우는 JavaScript: 객체지향 프로그래밍 완성 & 전략형 AI 틱택토 실전 Part2 [중급편]강의 썸네일](https://cdn.inflearn.com/public/files/courses/336946/cover/01jv48md3p02hgkwt4yh1svf3j?f=avif&w=420)
![[JS] Phaser 게임 제작 - 뱀파이어 서바이벌 클론강의 썸네일](https://cdn.inflearn.com/public/courses/329088/cover/4ae98f5f-88a4-437e-bfaa-cb531f013021/329088-eng.png?f=avif&w=420)
