강의

멘토링

로드맵

Inflearn brand logo image
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,330

受講生

71

受講レビュー

163

回答

4.7

講座評価

3

講座

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

 

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

 

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

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

 

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

 

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

カリキュラム

全体

55件 ∙ (8時間 54分)

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

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

受講レビュー

全体

22件

4.8

22件の受講レビュー

  • truefalse님의 프로필 이미지
    truefalse

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    興味深く繰り返しのコードを使用することで、クラスの概念と配列とオブジェクト管理の理解がさらに高まったことをお勧めします。 一応他よりゲームを作ると思うので講義を聞き続けたくなっておすすめ

    • ggangcoding162118
      知識共有者

      こんにちは:) 大切な受講評 ありがとうございます。 ^^..

  • pjg408님의 프로필 이미지
    pjg408

    受講レビュー 1

    平均評価 5.0

    5

    100% 受講後に作成

    インタラクションに興味があって聞くようになりましたが、難しいjsのオブジェクトとクラス、配列、繰り返し文などを簡単に面白く解いて理解が上手になったと思います! 私は二度繰り返し作り、学んだ概念を活用して私だけのゲームを作っていきます。 良い川のありがとう〜!

    • ggangcoding162118
      知識共有者

      こんにちは:) ジュンギュ 機能実装の質問を投稿して覚えていたのですが、一人で解決しましたね :) おめでとうございます。大切な受講評価ありがとうございます:)

  • sprout0719002828님의 프로필 이미지
    sprout0719002828

    受講レビュー 6

    平均評価 4.7

    5

    100% 受講後に作成

    講義のおかげで、さまざまな機能と実装方法がわかりました。何よりもObject、Classの概念をしっかりとつかむことができました。この理由は、1つだけ聞くのに十分です:D良い講義ありがとうございます。

    • ggangcoding162118
      知識共有者

      こんにちは:) 助けてくれて嬉しいです!大切な受講評 ありがとうございます。明けましておめでとうございます^_^

  • 1988bgh님의 프로필 이미지
    1988bgh

    受講レビュー 7

    平均評価 5.0

    5

    36% 受講後に作成

    インフラストラクチャでインタラクティブWebを作成する講義をたくさん聞きましたが、本当にたくさんの有益で役に立ちます!講義時間も良く、内容も本当にいいですね!良い講義ありがとうございます。私もたくさん訓練して後で誰かに役立つ講義を作りたくなりますね! 2022年明けましておめでとうございます!

    • ggangcoding162118
      知識共有者

      こんにちは :) 新年からこんなに気持ち良くなる文を見るようになり、一方では心が重いですが、一方では大変でとても嬉しいですね:) ありがとうございます。明けましておめでとうございます。

  • vxggangxv0556님의 프로필 이미지
    vxggangxv0556

    受講レビュー 7

    平均評価 5.0

    5

    55% 受講後に作成

    フレンドリーで段階的な講義が際立っています!〜 あえていいよ

    • ggangcoding162118
      知識共有者

      こんにちは:) 助けてくれて嬉しいです!大切な受講評価ありがとうございます:D

¥10,375

ggangcoding162118の他の講座

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

似ている講座

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