SlideShare a Scribd company logo
HTML5で
ゲームが作れます
自己紹介



       情報学群情報科学類一年
       ほつれ
       Twitter ID:hotsure_sj




                 HTML5でゲームが作れます
概要

HTML5 Canvas + JavaScript でブラウザで
動くゲームが作れます
 HTML5とは
 利点とか
 欠点的なの
 ゲーム紹介

                     HTML5でゲームが作れます
HTML5とは

HTML5とは HTML の 5 回目に当たる大幅な改定版である。
現在、2014年までの正式勧告を目指して策定が行われている。
HTML5 は WHATWG によって2004年に定められた Web
Applications 1.0 に Web Forms 2.0 を取り入れたものが
W3C の専門委員会に採用され、W3C より2008年1月22日に
ドラフト(草案)が発表された。HTML5は、プロプライエタ
リなプラグインとして提供されているリッチインターネット
アプリケーションのプラットフォーム(JavaFX、Adobe
Flash、Microsoft Silverlight 等)を置き換えることを標榜
しており、ウェブアプリケーションのプラットフォームとし
ての機能やマルチメディア要素が実装されている。そのため
HTML5 が普及すれば Adobe Flash などのプラグインは不要
になるという意見がある。(Wikipediaよりほぼ抜粋)     HTML5でゲームが作れます
要は

 2014年ぐらいに正式な規格が決まる
  HTMLのすごいやつ
 FlashやJavaなどのプラグインなしにビ
  デオ再生やダイナミックな表現等がブラ
  ウザ単体の機能のみで実現出来る
 ブラウザが対応さえしていれば、スマホ
  だろうとタブレットだろうと動く

                HTML5でゲームが作れます
利点とか

 ブラウザで動く
 クロスプラットフォーム
 開発に参入しやすい
 ユーザーにやさしい




                HTML5でゲームが作れます
欠点的なの

 遅い
 誰でもソースを見ることが出来る
 ブラウザごとにプログラムの挙動が違う




             HTML5でゲームが作れます
ゲーム紹介

 Sinuous (イケメンなやつ)
http://hakim.se/experiments/html5/sinuous/01/#
 Sketchout (ソース丸見え)
http://sketch-out.appspot.com/
 Pirates Love Daisies (大作)
http://www.pirateslovedaisies.com/


                                 HTML5でゲームが作れます
HTML5で
ゲームが作れます

More Related Content

Similar to HTML5でゲームが作れます

「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
Microsoft
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
Honma Masashi
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Hideki Akiba
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
Sho Ito
 
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料
leverages_event
 
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
Microsoft
 
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~満徳 関
 
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
Takahiro Kujirai
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要yoshikawa_t
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
tomo_masakura
 
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
Developers Summit
 
組込みにおけるHTML5
組込みにおけるHTML5組込みにおけるHTML5
組込みにおけるHTML5Tomo Watanabe
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説Masakazu Muraoka
 
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
Akihiko Kigure
 
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成Osamu Monoe
 
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
Yusuke Naka
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
yoshikawa_t
 
HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)
Microsoft
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
Masakazu Muraoka
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
yoshikawa_t
 

Similar to HTML5でゲームが作れます (20)

「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
「Web標準」の価値と可能性 〜Windows 8.1とともに考える標準技術の重要性〜
 
HTML5 によるロボット制御
HTML5 によるロボット制御HTML5 によるロボット制御
HTML5 によるロボット制御
 
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
Web標準技術の今とこれからを考える(村岡正和 ・ 秋葉秀樹)
 
Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5Concentrated HTML5 & Attractive HTML5
Concentrated HTML5 & Attractive HTML5
 
20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料20140902 HTML5認定試験紹介資料
20140902 HTML5認定試験紹介資料
 
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
HTML5とIE11とWindows 8.1 -最新の Web トレンドとマイクロソフトの関係
 
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
はじめよう!Visual Studio 2010 で HTML5 プログラミング ~ Internet Explorer 9 のリリースに向けて~
 
20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)20151114 _html5無料セミナー(OSC2015徳島)
20151114 _html5無料セミナー(OSC2015徳島)
 
いまさら聞けないHTML5概要
いまさら聞けないHTML5概要いまさら聞けないHTML5概要
いまさら聞けないHTML5概要
 
HTML5 のお話
HTML5 のお話HTML5 のお話
HTML5 のお話
 
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
デブサミ2014【13-D-2】成井弦氏 HTML5が創り出す新たな世界
 
組込みにおけるHTML5
組込みにおけるHTML5組込みにおけるHTML5
組込みにおけるHTML5
 
パンダの会 Html5概説
パンダの会 Html5概説パンダの会 Html5概説
パンダの会 Html5概説
 
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
AWS Summit Tokyo IoT アイディアソン&ハッカソン 2015
 
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
3 倍早い?! MS 製開発者専用ツールによる HTML5 + JavaScript を使ったWeb 作成
 
5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ5分で分るWebRTCコーデックウォーズ
5分で分るWebRTCコーデックウォーズ
 
Chrome apps for mobile 概要
Chrome apps for mobile 概要Chrome apps for mobile 概要
Chrome apps for mobile 概要
 
HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)HTML5とマイクロソフト(東京)
HTML5とマイクロソフト(東京)
 
Thing.jsについて
Thing.jsについてThing.jsについて
Thing.jsについて
 
Html5概要 & デモ
Html5概要 & デモHtml5概要 & デモ
Html5概要 & デモ
 

More from amusementcreators

ライセンスの話
ライセンスの話ライセンスの話
ライセンスの話
amusementcreators
 
空間分割
空間分割空間分割
空間分割
amusementcreators
 
わたしのゲーミング
わたしのゲーミングわたしのゲーミング
わたしのゲーミング
amusementcreators
 
かんたん作曲講座(2)
かんたん作曲講座(2)かんたん作曲講座(2)
かんたん作曲講座(2)
amusementcreators
 
かんたん作曲講座(1)
かんたん作曲講座(1)かんたん作曲講座(1)
かんたん作曲講座(1)
amusementcreators
 
猫には分からないオセロAIの仕組み
猫には分からないオセロAIの仕組み猫には分からないオセロAIの仕組み
猫には分からないオセロAIの仕組み
amusementcreators
 
コルーチンでC++でも楽々ゲーム作成!
コルーチンでC++でも楽々ゲーム作成!コルーチンでC++でも楽々ゲーム作成!
コルーチンでC++でも楽々ゲーム作成!
amusementcreators
 
フォントのしくみ
フォントのしくみフォントのしくみ
フォントのしくみ
amusementcreators
 
AVRマイコン入門
AVRマイコン入門 AVRマイコン入門
AVRマイコン入門
amusementcreators
 
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
amusementcreators
 

More from amusementcreators (20)

ライセンスの話
ライセンスの話ライセンスの話
ライセンスの話
 
空間分割
空間分割空間分割
空間分割
 
わたしのゲーミング
わたしのゲーミングわたしのゲーミング
わたしのゲーミング
 
曲線について
曲線について曲線について
曲線について
 
C++11のつかいかた
C++11のつかいかたC++11のつかいかた
C++11のつかいかた
 
DUAL SHOCK2で遊ぼう
DUAL SHOCK2で遊ぼうDUAL SHOCK2で遊ぼう
DUAL SHOCK2で遊ぼう
 
Pythonでゲーム作る
Pythonでゲーム作るPythonでゲーム作る
Pythonでゲーム作る
 
ライフゲーム
ライフゲームライフゲーム
ライフゲーム
 
Lt nande linux_nano
Lt nande linux_nanoLt nande linux_nano
Lt nande linux_nano
 
Lt130123
Lt130123Lt130123
Lt130123
 
コルーチンを使おう
コルーチンを使おうコルーチンを使おう
コルーチンを使おう
 
20121212
2012121220121212
20121212
 
Kim120 lt 12_6
Kim120 lt 12_6Kim120 lt 12_6
Kim120 lt 12_6
 
かんたん作曲講座(2)
かんたん作曲講座(2)かんたん作曲講座(2)
かんたん作曲講座(2)
 
かんたん作曲講座(1)
かんたん作曲講座(1)かんたん作曲講座(1)
かんたん作曲講座(1)
 
猫には分からないオセロAIの仕組み
猫には分からないオセロAIの仕組み猫には分からないオセロAIの仕組み
猫には分からないオセロAIの仕組み
 
コルーチンでC++でも楽々ゲーム作成!
コルーチンでC++でも楽々ゲーム作成!コルーチンでC++でも楽々ゲーム作成!
コルーチンでC++でも楽々ゲーム作成!
 
フォントのしくみ
フォントのしくみフォントのしくみ
フォントのしくみ
 
AVRマイコン入門
AVRマイコン入門 AVRマイコン入門
AVRマイコン入門
 
読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム読みやすいプログラム、書き換えやすいプログラム
読みやすいプログラム、書き換えやすいプログラム
 

Recently uploaded

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
Osaka University
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
harmonylab
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
Toru Tamaki
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
嶋 是一 (Yoshikazu SHIMA)
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
azuma satoshi
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
osamut
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
tazaki1
 

Recently uploaded (7)

生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
生成AIがもたらすコンテンツ経済圏の新時代  The New Era of Content Economy Brought by Generative AI
 
Generating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language ModelsGenerating Automatic Feedback on UI Mockups with Large Language Models
Generating Automatic Feedback on UI Mockups with Large Language Models
 
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
論文紹介:Deep Learning-Based Human Pose Estimation: A Survey
 
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
「進化するアプリ イマ×ミライ ~生成AIアプリへ続く道と新時代のアプリとは~」Interop24Tokyo APPS JAPAN B1-01講演
 
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobodyロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
ロジックから状態を分離する技術/設計ナイト2024 by わいとん @ytnobody
 
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMMハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
ハイブリッドクラウド研究会_Hyper-VとSystem Center Virtual Machine Manager セッションMM
 
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライドHumanoid Virtual Athletics Challenge2024 技術講習会 スライド
Humanoid Virtual Athletics Challenge2024 技術講習会 スライド
 

HTML5でゲームが作れます

  • 2. 自己紹介 情報学群情報科学類一年 ほつれ Twitter ID:hotsure_sj HTML5でゲームが作れます
  • 3. 概要 HTML5 Canvas + JavaScript でブラウザで 動くゲームが作れます  HTML5とは  利点とか  欠点的なの  ゲーム紹介 HTML5でゲームが作れます
  • 4. HTML5とは HTML5とは HTML の 5 回目に当たる大幅な改定版である。 現在、2014年までの正式勧告を目指して策定が行われている。 HTML5 は WHATWG によって2004年に定められた Web Applications 1.0 に Web Forms 2.0 を取り入れたものが W3C の専門委員会に採用され、W3C より2008年1月22日に ドラフト(草案)が発表された。HTML5は、プロプライエタ リなプラグインとして提供されているリッチインターネット アプリケーションのプラットフォーム(JavaFX、Adobe Flash、Microsoft Silverlight 等)を置き換えることを標榜 しており、ウェブアプリケーションのプラットフォームとし ての機能やマルチメディア要素が実装されている。そのため HTML5 が普及すれば Adobe Flash などのプラグインは不要 になるという意見がある。(Wikipediaよりほぼ抜粋) HTML5でゲームが作れます
  • 5. 要は  2014年ぐらいに正式な規格が決まる HTMLのすごいやつ  FlashやJavaなどのプラグインなしにビ デオ再生やダイナミックな表現等がブラ ウザ単体の機能のみで実現出来る  ブラウザが対応さえしていれば、スマホ だろうとタブレットだろうと動く HTML5でゲームが作れます
  • 6. 利点とか  ブラウザで動く  クロスプラットフォーム  開発に参入しやすい  ユーザーにやさしい HTML5でゲームが作れます
  • 7. 欠点的なの  遅い  誰でもソースを見ることが出来る  ブラウザごとにプログラムの挙動が違う HTML5でゲームが作れます
  • 8. ゲーム紹介  Sinuous (イケメンなやつ) http://hakim.se/experiments/html5/sinuous/01/#  Sketchout (ソース丸見え) http://sketch-out.appspot.com/  Pirates Love Daisies (大作) http://www.pirateslovedaisies.com/ HTML5でゲームが作れます