【Javascript初心者 ゲーム開発】 動体視力テスト

●ゲームで遊んでみたい方はこちら！
https://coding-youtuber.github.io/doutai-shiryoku/build/

● 目次
Chapter 1 0:38 Canvasを用意
Chapter 2 2:20 文字を描画
Chapter 3  4:15 テキスト描画をまとめる
Chapter 4 5:35 文字を動かす
Chapter 5 8:54 問題をボタンで変える
Chapter 6  13:29 スタートボタンを設定
Chapter 7 14:31 答えを見るボタンを設定

●動画で使ったプログラムはこちら
https://github.com/coding-youtuber/doutai-shiryoku

●対象となる視聴者の方
・Javascriptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方

●この動画で学べること 
Javascriptを使ったアニメーション
関数の使い方
new演算子
Buttonのclickイベント
ゲームの作り方

●このゲームをもっと発展させる工夫
音をつける
グレーの灰色をデザインする。例、電光掲示板。
点数制にする。時間制にする。
問題をサーバーから更新できるようにする。

#programming  #javascript  #game 

What is GEEK

Buddha Community

【Javascript初心者 ゲーム開発】 動体視力テスト

●ゲームで遊んでみたい方はこちら！
https://coding-youtuber.github.io/doutai-shiryoku/build/

● 目次
Chapter 1 0:38 Canvasを用意
Chapter 2 2:20 文字を描画
Chapter 3  4:15 テキスト描画をまとめる
Chapter 4 5:35 文字を動かす
Chapter 5 8:54 問題をボタンで変える
Chapter 6  13:29 スタートボタンを設定
Chapter 7 14:31 答えを見るボタンを設定

●動画で使ったプログラムはこちら
https://github.com/coding-youtuber/doutai-shiryoku

●対象となる視聴者の方
・Javascriptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方

●この動画で学べること 
Javascriptを使ったアニメーション
関数の使い方
new演算子
Buttonのclickイベント
ゲームの作り方

●このゲームをもっと発展させる工夫
音をつける
グレーの灰色をデザインする。例、電光掲示板。
点数制にする。時間制にする。
問題をサーバーから更新できるようにする。

#programming  #javascript  #game 

【Javascript初心者 ゲーム開発】Javascriptでノベルゲーム

●ゲームで遊んでみたい方はこちら！
https://coding-youtuber.github.io/novel-game/build/index.html

● 目次
Chapter 1 0:27 Canvasを用意
Chapter 2 2:10 背景画像を描画
Chapter 3  4:21 人物画像を描画
Chapter 4 5:36 メッセージボックスを描画
Chapter 5 7:05 セリフを描画
Chapter 6  12:04 処理をまとめる
Chapter 7 14:44 セリフの改行処理
Chapter 8 19:42 クリックで切り替え

●動画で使ったプログラムはこちら
https://github.com/coding-youtuber/novel-game/blob/master/src/js/app.js

●対象となる視聴者の方
・Javascriptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方

●この動画で学べること
canvasにおいての画像描画
読み込み枚数が複数あるときにすべての画像が読み終わったことを検知する方法

#javascript #programming 

【Javascript初心者 ゲーム開発】 Javascriptでアクションゲーム

エディター VS Code
https://azure.microsoft.com/ja-jp/products/visual-studio-code/

 ● 目次
Chapter 1 0:37 Phaserを用意
Chapter 2 1:49 VS Codeを設定
Chapter 3  2:41 Gameの基礎設定
Chapter 4 4:27 画像をload
Chapter 5 6:27 画像を表示
Chapter 6  9:43 プレイヤーを表示
Chapter 7 13:26 プレイヤーを動かす
Chapter 8 17:43 星を動かす
Chapter 9 21:19 スコアを表示
Chapter 10 23:01 ボムを動かす
Chapter 11 28:00 完成

●動画で使ったプログラムはこちら
https://phaser.io/tutorials/making-your-first-phaser-3-game/part1

●対象となる視聴者の方
・Javascriptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方

#programming  #javascript  #game 

【Javascript初心者 ゲーム開発】 Javascriptブロック崩し

●ゲームで遊んでみたい方はこちら！
https://coding-youtuber.github.io/breakout/build/index.html

● 目次
Chapter 1 0:38 Canvasを用意
Chapter 2 1:57 ボールを動かす
Chapter 3  3:33 簡単な衝突検知
Chapter 4 5:01 ボールにぶつかるパドルを定義
Chapter 5 5:31 パドルを操作できるようにする
Chapter 6  7:26 ゲームオーバーを実装
Chapter 7 7:54 ブロックの変数を設定
Chapter 8 10:12 衝突検出関数
Chapter 9 11:36 スコアを数える
Chapter 10 12:09 勝利メッセージを表示
Chapter 11 12:35 パドルをマウスで操作
Chapter 12 13:12 プレイヤーにライフを与える
Chapter 13 14:19 requestAnimationFrame()で描画を改善

●動画で使ったプログラムはこちら
https://github.com/coding-youtuber/breakout/blob/master/src/js/app.js

GitHub
https://github.com/coding-youtuber/breakout

 ●参考
そのままのJavaScriptを使ったブロックくずしゲーム - ゲーム開発 | MDN
https://developer.mozilla.org/ja/docs/Games/Workflows/2D_Breakout_game_pure_JavaScript

●対象となる視聴者の方
・Javascirptの基礎文法は知ってはいるが何を作ればいいのかわからない方
・実際に何か作って理解を深めたい方
・Progateが終わってから次にやることを探している方

●この動画で学べること
Javascriptによるゲーム制作
衝突判定
if文、for文、関数の使い方
二重for文の書き方

#javascript #programming