강의

멘토링

로드맵

BEST
Game Dev

/

Game Programming

Webゲームを作って学ぶインタラクティブWeb! JAVASCRIPT

Webゲームも作って、フロントエンドWeb開発スキルも学ぶ1席3組授業!

  • ggangcoding162118
Interactive Web
JavaScript
HTML/CSS

学習した受講者のレビュー

こんなことが学べます

  • ゲームを作成し、自然にWebアニメーション、インタラクティブWeb実装の原理を習得!

ゲームも作って、FEウェブ開発スキルも身につけて!

講義紹介

Webゲームプレイビデオ

最近の作業プロジェクト

様々なモーションを作ってみて!

キーに反応するヒーローの様々な動作やモンスター、修理剣、ダメージエフェクトなど様々なモーションを作ってみます。

集まるモンスターを防ぎなさい!

衝突機能を実装して集まるモンスターを防ぐゲームステージを実装してみます。無限に繰り返されるステージを作成し、開発者が直接指定する2つのゲームステージを作成してみます。

NPCと会話を交わしてクエスト遂行!

ゲームクエストを作成し、NPCと会話する機能を作成します。そしてクエストを完了すると報酬を受けます。

レベルアップとヒーローステータス調整!

ヒーローの体力と経験値を管理してレベルアップ機能を作り、ヒーローのステータスも変更してみます。

クラスの特徴

  • クラスはバニラJSに進みます。
  • セクションをできるだけ分割して退屈することなく理解しやすくしました。
  • 順次一緒に作って学びます。
  • ゲームを作って進行する授業だから面白いです。
  • 配列、オブジェクト、繰り返し文をたくさん扱います。
  • ゲームを作成し、フロントエンド開発で使用するさまざまなWebスキルを学ぶことができます。
  • キャンバスでゲームを作る原理に似ています。しかし、HTML / CSSを一緒に使用してアクセスするのは簡単です。
  • 約9時間分!できるだけ詳しく説明します。 (合計52クラス)
  • あなたの年俸を上げる様々なスキルを学びましょう。

知っておいてください

  • JavaScript ES6文法を使用します。
  • オープンソースライブラリを使用しません。
  • クラスに関わる疑問は、いつでも質問と回答に投稿してください!心強い支援群があります。
  • 正式リリースを目指すゲームを作る講義ではありません。 HTML、CSS、JavaScriptを活用して、簡単にWebで楽しめるWebゲームを作成します。
  • HTML、CSS、JavaScriptの基本を知っている必要があります。授業で基礎文法の説明はしません
  • 基礎文法を除く実装原理は順次作成し、できるだけ詳細に説明します。
  • 授業の割合はJavaScript約80% 、HTML / CSS約20%で構成されています。
  • クラスから出てくるコードを無料で配布することを禁止します。
  • ゲームはシステム、ブラウザ環境によって若干の違いがある場合があります。

予想される質問 Q&A

Q. どのブラウザで動作しますか?
A.レッスンで作成されたゲームは、最新バージョンのChrome、Safari、Opera、Firefox、EDGEでテストされました。
Q. システム環境とブラウザによってどのような違いがありますか?
A. ブラウザで動作するゲームだから、細かいスムースさの違いがあるかもしれません。
Q. 非専攻者も聞くことができますか?
A. HTML、CSS、JavaScriptの基本文法を知っていれば、非専攻者も十分に聞くことができると思います。

52強約9時間分の充実したカリキュラム!
以下で確認してください。

こんな方に
おすすめです

学習対象は
誰でしょう?

  • UI/UXに興味のある方々!

  • 特別なポートフォリオを作りたいと思う就学生の方々!

  • Webアニメーション!インタラクションに興味のある方!

  • 様々なフロントエンドスキルを学びたい方!

  • スキルを増やして年俸上げたい方々!

前提知識、
必要でしょうか?

  • JAVASCRIPT、CSS、HTML

こんにちは
です。

1,333

受講生

72

受講レビュー

163

回答

4.7

講座評価

3

講座

안녕하세요. 백엔드 개발자로 시작해 프론트엔드 개발자로 전향해서 UI 개발에 푹 빠져있는 깡코딩입니다. :)

 

10여 년 동안 다수의 기업 홈페이지와 쇼핑몰 SI 소상공인 홈페이지를 제작하며 알게 된 UI/UX 제작 기법 노하우 등을 공유하기 위해 이 강의를 시작하게 되었습니다. 국내 여러 대기업 프로젝트를 경험했고 소상공인에게 초점을 맞춘 홈페이지 제작 사업도 하였습니다.

 

저는 가끔 국내 코딩관련 커뮤니티에서 취미로 만든 애플 인터렉션과 창작 인터렉션을 공유하며 재밌는 기술을 소개했었는데요

많은 분들의 관심을 주셔서 이렇게 강의까지 만들게 되었습니다.

 

제가 만들어갈 강의는 표준 브라우저를 고려하고 실무에서 사용 가능한 감탄사가 절로 나오는 다양하고 멋진 인터렉션과 모션그래픽을 만드는 방법들을 알려드릴 예정이고 프론트 개발자나, 웹퍼블리셔가 솔루션을 이용해 홈페이지, 쇼핑몰 등을 바닥부터 만들 수 있는 강의도 만들 예정입니다.

 

그럼 수업에서 뵙겠습니다 :)

カリキュラム

全体

55件 ∙ (8時間 54分)

講座資料(こうぎしりょう):

授業資料
講座掲載日: 
最終更新日: 

受講レビュー

全体

23件

4.8

23件の受講レビュー

  • 이거사면공부할까?님의 프로필 이미지
    이거사면공부할까?

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    재미있고 반복되는 코드 사용을 통해 Class개념과 배열 및 오브젝트 관리에 대한 이해가 한층 높아졌음 추천할만 합니다. 일단 다른것보다 게임을 만든다고 생각하니까 강의를 계속 듣고 싶어져서 추천함

    • 깡코딩
      知識共有者

      안녕하세요 :) 소중한 수강평 감사합니다. ^^..

  • 박준규님의 프로필 이미지
    박준규

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    인터렉션에 흥미가 있어 듣게되었는데, 어려운 js의 object와 class, 배열, 반복문 등을 쉽고 재미있게 풀어내서 이해가 잘 되었던거 같아요! 저는 두번 반복해서 만들었고 배운개념 활용해서 저만의 게임을 만들러 가보겠습니다 . 좋은강의 감사합니다~!

    • 깡코딩
      知識共有者

      안녕하세요:) 준규님 기능 구현 질문을 올려주셔서 기억하고 있었는데 혼자서 해결하셨나보네요 :) 축하드립니다. 소중한 수강평 감사합니다 :)

  • jinuLee님의 프로필 이미지
    jinuLee

    受講レビュー 6

    平均評価 4.7

    5

    100% 受講後に作成

    강의 덕분에 다양한 기능과 구현 방법을 알게됐습니다. 무엇보다 Object, Class 개념을 확실히 잡을 수 있었습니다. 이 이유하나 만으로도 들을 이유가 충분합니다:D 좋은 강의 감사합니다.

    • 깡코딩
      知識共有者

      안녕하세요:) 도움이 되었다니 기쁘네요! 소중한 수강평 감사합니다. 새해 복 많이 받으세요^_^

  • 배가현님의 프로필 이미지
    배가현

    受講レビュー 7

    平均評価 5.0

    5

    36% 受講後に作成

    인프런에서 인터렉트브웹을 만드는 강의를 많이 들었지만, 정말 많이 유익하고 도움이 되네요! 강의 시간도 좋고, 내용도 정말 좋네요! 좋은 강의 감사합니다. 저도 많이 훈련해서 나중에 누군가에게 도움이 되는 강의를 만들고 싶어지네요! 2022년 새해 복 많이받으세요!

    • 깡코딩
      知識共有者

      안녕하세요 :) 새해부터 이렇게 기분 좋아지는 글을 보게되어 한편으론 마음이 무겁지만 한편으론 힘도나고 너무 기쁘네요 :) 감사합니다. 새해 복 많이 많이 받으시고 좋은일만 가득하길 바라겠습니다 ^___^

  • hyejun님의 프로필 이미지
    hyejun

    受講レビュー 7

    平均評価 5.0

    5

    55% 受講後に作成

    친절하고 단계별 강의가 돋보입니다!~ 굳이에요 굳굳

    • 깡코딩
      知識共有者

      안녕하세요 :) 도움이 되었다니 기쁘네요! 소중한 수강평 감사합니다 :D

¥10,692

ggangcoding162118の他の講座

知識共有者の他の講座を見てみましょう!

似ている講座

同じ分野の他の講座を見てみましょう!