超初心者の JavaScript

JavaScript が使えるようになれば、スマホのゲームも作成出来ます。

プレイできるゲームの抜粋です。

JavaScript Keyword 検索

前田稔の超初心者のプログラム入門

JavaScript Index JavaScript
    紹介
  1. JavaScript Guid
    JavaScript の紹介です。
  2. Hello
    "Hello World!!" を表示する最も簡単な JavaScript です。
  3. Welcome JavaScript
    ループを使って Welcome JavaScript を繰り返します。
    文字列を横スクロールします。
  4. 文字のサイズと色
    文字のサイズと色を選択します。
  5. 自由に配置
    TEXTや画像を自由に配置します。
    コンソールモード
  6. ☆Console Program
    コンソールモードで JavaScript の基本を説明します。

    コンソールモードの実行ページを呼び出します。
    ページ全体のソースコードは、右クリックから[ソースの表示(V)]で確認することが出来ます。
    1. con_100.html
      １～１００までの合計を計算する実行ページです。
    2. con_sosu.html
      ５０以下の素数を印字する実行ページです。
    3. con_pai.html
      円に内接する正方形から始めて、円周率の近似値を求めて印字します。
    4. con_string.html
      String の定義と置き換えの実行ページです。
      ' と " はどちらも同じで、' の中で引用符を使うときは " で囲みます。
    5. con_split.html
      文字列の切り分けの実行ページです。
    6. con_gcm.html
      gcm() 関数(メソッド)を定義して、データをタイプ入力して GCM を印字します。
    7. con_array.html
      配列の基礎の実行ページです。
    8. con_sort.html
      Array クラスのソートメソッドで昇順に並べて印字します。
    9. con_input.html
      実数をタイプ入力して、func() 関数で降順にソートします。
    10. con_join.html
      二次元配列⇔文字列の相互変換です。
    11. con_rensou.html
      連想配列 ary を定義して、イニシャルと名前を格納します。
    12. con_rensoufunc.html
      GCM と LCM を計算して、連想配列でリターンします。
    13. con_class.html
      gcmlcm Class の実行ページです。
    14. con_TextFile.html
      Text File 入力の実行ページです。
    15. con_GetArray.html
      Text File から二次元データを入力して Array に格納します。
    変数
  7. Javascript の変数
    変数は var で宣言します。
    変数の宣言に、数値と文字列の区別はありません。
  8. prompt でタイプ入力
    prompt でタイプ入力した数値を素因数に分解して印字します。
  9. String
    JavaScript の String(文字列)の基礎です。
    文字列を切り分けて配列に格納します。
  10. String の反転
    String の置き換えと反転です。
  11. 文字の置き換え
    String の一文字を置き換えます。
  12. Lower/Upper
    func(str) 関数を呼び出して、文字列を Lower/Upper に変換します。
    ☆div の領域に id="lower" を設定して参照する方法です。
  13. [全角 ⇔ 半角] 関数
    全角の英数字を半角に変換します。
    半角の英数字を全角に変換します。
  14. Sleep 関数
    setTimeout() を使って sleep() 関数を作成します。
    配列
  15. Javascript の配列
    配列の定義と初期値の設定です。
  16. Date Time
    日付と時刻を表示します。
  17. Days of the week
    コンソールからタイプ入力して、曜日と通算日数を表示します。
  18. 配列のコピー
    配列のコピーには「参照とディープコピー」があります。
  19. 配列の追加と削除
    配列に要素を「追加／削除」します。
    console.log の実行画像を貼り付けています。
  20. 配列のソート
    文字列(数値)をソートして印字します。
  21. Javascript の二次元配列
    二次元配列の定義と初期値の設定です。
  22. 二次元配列のコピー
    Javascript の二次元配列のコピーです。
  23. 三次元配列
    Javascript の三次元配列です。
    連想配列
  24. Javascript の連想配列
    連想配列を使う。
  25. パラメータ文字列
    form から渡される形式の文字列を連想配列に記録します。
  26. GCM と LCM を返す関数
    配列(連想配列)で GCM と LCM を返す関数です。
    Image
  27. ３枚の画像を描画
    animation gif の画像を描画してみます。
    ３枚の画像を並べて描画します。
  28. 画像を並べる関数
    乱数で個数を決めて石の画像を並べます。
    disp(n) 関数で jewel.gif を n 個並べて表示します。
  29. マウスを重ねると画像が変わる
    onMouseover でマウスの重なりを検出して画像を変えます。
  30. カウンターを描画
    数字の画像を切り分けてカウンターを描画します。
  31. クリックで石を取り除く関数
    onClick=MouseClick(i番目) を呼び出して、以降の石を取り除きます。
  32. Image Size
    Image(画像)のサイズを調べます。
  33. Back Image
    ゲームの背景画像とスクロールの説明です。
    Table
  34. Table を描画
    テーブル(表)を描画します。
  35. Table にヘッダーを設定
    テーブル(表)にヘッダーを設定します。
  36. ソースコードを掲載
    Table pre でソースコードを掲載します。
  37. Style Sheet で Table を描画
    Style Sheet を使うとウインドウ上に自由に配置できます。
    form input
  38. Send
    Javascript でパラメータを設定してページを呼び出します。
  39. GET パラメータを取得
    GET リクエストパラメータ(?n1=1&n2=234&c1=A&c2=XYZ)を取得します。
  40. YES_NO を応答
    form から YES または NO を応答します。
  41. 選択ボックスから画像を選ぶ
    form の選択ボックスから画像を選択して表示します。
  42. form param
    form からタイプされたデータを引数にして action から HTML を呼び出します。
  43. Form GCM
    form から "data1" と "data2" をタイプ入力して GCM を計算します。
  44. 曜日の計算
    何曜日に生まれたの？
  45. Form Button
    form にボタンを並べて石の数を選択します。
  46. POST で送信
    Javascript を使って POST でメッセージを送信します。
  47. History API
    history は呼び出されたページの記録です。
    Mouse & Key
  48. Mouse Down を検出
    マウスをクリックすると window.alert() で知らせます。
  49. DIV のクリックを検出する
    DIV のクリックを検出して、関数を呼び出します。
    Button＆画像を並べてクリックで関数を呼び出します。
  50. Mouse Position
    マウスがクリックされた座標を知らせます。
  51. Mouse Move
    マウスの座標を表示します。
  52. 現在時刻を表示
    Interval Timer を設定して現在時刻を表示します。
    ボタンのクリックで[開始/停止]します。
  53. Key Code を調べる
    キーをタイプするとキーコードを１６進数で表示します。
    Recursive Function
  54. Recursive Function
    再起関数で「０～ｎ」までの合計を求めます。
  55. Recursive GCM
    再起関数で「n と m」の GCM(最大公約数)を求めます。
  56. 配列の中の最大値
    再起関数で配列の中から最大値を求めます。
  57. 配列をソートして印字
    配列に格納したデータを隣接交換法を使って、再起メソッドでソートします。
    Object & Class
  58. Javascript の Object
    JavaScript の Object です。
  59. Javascript の階層構造
    Object の階層構造です。
  60. Object の関数
    Object の関数(メソッド)です。
  61. Javascript の Class
    JavaScript の BMI(肥満度) Class です。
  62. jewel Class
    jewel Class です。
  63. Counter Class
    ヒットポイントなど汎用的な数字を表示するクラスです。
  64. Javascript の Class 領域
    Javascript の Class の領域です。
    JavaScript ファイル
  65. .js ファイルを使う
    JavaScript のソースコードをファイル(hello.js)から入力します。
  66. Class ファイル
    GCM, LCM Class を定義したファイルを使います。
  67. 記念日の曜日
    Calendar Class を定義して、記念日の曜日と経過日数を表示します。
    FILE 入出力
  68. Read Text
    JavaScript で TEXT FILE を入力します。
  69. Write Text
    JavaScript で TEXT FILE を出力します。
  70. Drag & Drop
    IMAGE FILE を Drag & Drop します。
  71. Blob
    Blob でデータを定義します。
  72. RequestFileSystem
    RequestFileSystem() 関数の実行を確認します。
  73. TEMPORARY I-O
    TEMPORARY FILE の出力(作成)と入力です。
  74. Write & Read & Delete
    PERSISTENT FILE の「出力／入力／削除」です。
  75. File Copy
    ファイルを選択してコピーします。
  76. Directory
    Directory を作成してファイルを格納します。
  77. TEMPORARY List
    Root Directory の TEMPORARY エントリの一覧を表示します。
  78. TEMPORARY Delete
    Root Directory の TEMPORARY File を全て削除します。
  79. File I-O
    ActiveX を使ったファイルの入出力です。
    ElementById
  80. Image Click
    クリックすると画像が変わります。
  81. Text chenge
    id でリソースを取得して、表示中の Text を書き換えます。
  82. Table chenge
    Table に DIV を登録して、Text を書き換えます。
    Canvas で図形を描画
  83. Canvas を定義
    Canvas を定義して枠を表示します。
  84. Canvas で矩形を描画
    Canvas を定義して矩形を描画します。
  85. 線を描画
    Canvas に直線を描画します。
  86. 折れ線を描画
    Canvas に折れ線を描画します。
  87. 円を描画
    Canvas に円を描画します。
  88. 画像をクリッピング
    画像をクリッピングして描画します。
    Window 操作
  89. サブウィンドウ
    ボタンで subWin 関数を呼び出し、window.open で HTML を開きます。
  90. 中央に表示
    サブウィンドウを画面中央に表示します。
  91. Dialog を表示
    サイズを指定して Dialog を開きます。
    マウスのクリックで Dialog を閉じます。
    Animation
  92. Javascript Animation
    1. Click Chenge
      マウスのクリックで Animation GIF を切り替えます。
    2. パラパラアニメーション
      少女のパラパラアニメーションです。
    3. Javascript で Click Anime
      クリックで "img/dog0.gif" ～ "img/dog4.gif" の画像を切り替えます。
    4. 画像の移動
      画像が左右に往復移動します。
    5. キーで移動
      Animation GIF を上下左右の矢印キーで移動します。
    6. setTimeout Animation
      画像をプレロードして、setTimeout で切り替えながらアニメーションします。
    7. Animation Start/Stop
      アニメーションの「開始／停止」ボタンを設定します。
    Cascading Style Sheets
  93. CSS Before
    CSS(Cascading Style Sheets) の説明です。
  94. CSS After
    css_before.html に CSS を適用します。
  95. Javascript CSS Sprite
    CSS Sprite の説明です。
    1. 画像を切り抜く
      CSS Sprite で画像を切り抜いて表示します。
    2. pos の位置から画像を切り抜く
      pos の位置から 100px 切り取って描画します。
    3. 画像を右端から左に向かって流す
      CSS ファイルを使わずに FFX-2 の画像を右端から左に向かって流します。
    4. Javascript CSS File
      CSS File(sample.css) を使います。
    5. CSS Mapchip
      Mapchip を並べて美人の画像を描画します。
    6. CSS Anime
      １６枚の Sprite を切り替えながら美人のアニメーションです。
  96. Game BackGround
    1. BG MAP
      Map Chip を組み合わせて BG(背景画像)を描画します。
    2. Map を配列で定義
      Map を配列で定義します。
    3. Map Editor を使う
      Map Editor を使うとプログラムは簡単です。
    Audio
  97. クリック音(mp3)を鳴らす
    マウスのクリックで mp3 を鳴らします。
  98. Audio(mp3)
    ページの起動で Audio(mp3) を再生します。
  99. Audio Control
    コントローラを表示して、Audio(mp3) を再生します。
  100. クリックで再生
    ボタンのクリックで Audio を再生・停止します。
jQuery
  1. jQuery サンプル
    jQuery は JavaScript を簡単に記述するためのライブラリです。
  2. jQuery CSS
    jQuery(ジェイクエリー)で CSS を利用します。
  3. jQuery DIV Click
    jQuery で <DIV>タグの Click を検出します。
  4. jQuery Mouse Click
    jQuery で Mouse の Click を検出します。
  5. jQuery Change
    jQuery で CSS の設定を切り替え(削除・追加)します。
  6. jQuery Get
    jQuery で HTML のテキストを取得します。
AngularJS

    AngularJS Guid
  1. AngularJS Guid
    AngularJS とは、グーグルとコミュニティによって開発が進められている JavaScript フレームワークです。
  2. AngularJS Source Code
    AngularJS の様々な書き方(Source Code)です。
  3. Log
    AngularJS で Debug 情報(Log)を収集します。

    AngularJS View
  4. Data Bind
    input のデータタイプ入力と div の表示をバインドします。
  5. Show_Hide
    メッセージの「表示/非表示」を切り替えます。
  6. Background_Color
    メッセージをタイプすると背景色が変わります。
  7. Lower/Upper
    文字列を大文字／小文字と変換するフィルターを利用します。
  8. Filter
    文字列表示にフィルター機能を使います。
  9. Expression
    {{ 式 }} の中に式(expression)を使う例です。

    AngularJS List
  10. Repeat
    <li> の中で ng-repeat を使って繰り返します。
  11. Repeat List
    ng-repeat を用いて、リスト操作を行います。
    簡単な検索機能も説明します。
  12. Search
    文字列サーチのプログラムです。
  13. List Add & Del
    リストに追加とリストからの削除です。
  14. Button Click
    Button Click のプログラムです。
  15. Event
    ボタンクリックで input からタイプした TEXT を表示します。
  16. 現在時刻
    １秒(1000 ミリ秒)毎に現在時刻を表示します。
  17. HTML Bind
    HTML 文を div の TEXT 表示に Bind します。

    AngularJS Check
  18. Form Check
    Form からタイプされた TEXT 文の長さを調べてメッセージを表示します。
  19. Input Check
    Form からタイプ入力された複数の項目をチェックします。
  20. 汎用関数
    AngularJS の関数(メソッド)を *.js に登録する方法を説明します。

    AngularJS XML Request
  21. XML Http
    非同期通信を受け持つ XMLHttpRequest(XHR) のプログラムです。
  22. XML POST
    非同期通信を受け持つ XMLHttpRequest(XHR) でパラメーターを POST で渡します。
JavaScript ゲーム
  1. イメージ画像を描画
    ボタンをクリックして、ダイアログボックスからタイプして下さい。

  2. 肥満度の計算
    身長と体重をタイプして肥満度を計算します。

  3. 平方根の計算
    左側のボックスに数字をタイプして [＝] ボタンをクリックして下さい。

  4. ハイ＆ロー
    カード(1～13)が７より大きいか小さいかを当てるゲームです。

  5. スロットマシン
    スロットマシンのゲームです。

  6. ジャンケンゲーム
    1. じゃんけんゲーム
      じゃんけんゲームのルールです。
    2. じゃんけん－１
      ゲームの開始ボタンでページが遷移します。
    3. じゃんけん－２
      ラジオボタンでプレイヤーが打つ手を選択します。
    4. じゃんけん－３
      勝負の判定をして得点を計算します。
    5. じゃんけんゲームβ版
      じゃんけんゲームβ版の完成です。

  7. 石取りゲーム
    1. 石取ゲーム
      石取ゲームのルールです。
    2. 石取ゲーム－１
      石を並べてラジオボタンでプレイします。
    3. 石取ゲーム－２
      クリックされた個数を取り除きます。
    4. 石取ゲームβ版
      石取ゲームβ版の完成です。

  8. 三山くずし
    1. 三山ゲームのルール
      三山ゲームのルールです。
    2. 三山ゲーム－１
      クリックで石を取り除きます。
    3. 三山ゲーム－２
      交互にプレイします。
    4. 三山ゲーム－３
      対戦出来ます。
    5. 三山ゲームβ版
      三山ゲームβ版の完成です。

  9. カードゲーム
    ☆カードゲームの説明
    カードゲームの説明です。この後に実行ページが続きます。
    1. カードを並べる
      カードをシャッフルして並べて描画します。
    2. 手札を重ねる
      ７枚の手札を重ねて描画します。
    3. カードのクリック
      カードをクリックして、カード番号を確認します。
    4. クリックで裏返す
      カードを並べて、クリックで裏返します。
    5. ページを変えずに裏返す
      新しいページを作らないで、現在のページでカードを裏返します。
    6. ペアーのカードを取り除く
      神経衰弱ゲームのように、ペアーのカードを取り除きます。

  10. 魔法陣ゲーム
    ☆魔法陣ゲームの作成
    魔法陣の説明です。この後に実行ページが続きます。
    1. 枠を表示する
      魔法陣の枠を Table を使って表示します。
    2. 数字を表示する
      魔法陣のマスに入れる数字をカードクラスを使って表示します。
    3. 数字のクリックを追加する
      魔法陣のクリックに加えて、数字のクリックも追加します。
    4. 数字の選択とキャンセル
      魔法陣に設定する数字の選択とキャンセルを制御します。
    5. 魔法陣ゲームのα版
      一応プレイが出来る魔法陣ゲームのα版です。
    6. 魔法陣ゲームのβ版
      魔法陣ゲームのβ版の完成です。

  11. ナンプレ(数独)ゲーム
    ナンプレ(数独)ゲームの作成
    誰でも簡単に遊べる「数独ゲーム」を楽しんで下さい。
    簡単に遊べると言っても超難問になると、一筋縄では解けません。
    1. Counter Class で数字を表示
    2. 盤と数字を描く
    3. α版の完成

  12. お絵描きゲーム
    すぐに遊べる「お絵描きゲームのページ」が続きます。
    パズルの枠の外(左,上)をクリックするとアシスタントが使えます。
    残念ながら「完成確認」は出来ません。 (完成確認は お絵描きパズルのファイル入力 やスマホゲームを参照して下さい)
    赤と緑の色は、数字の交差を調べるときなどに使用して下さい。
    パズルを一覧から選択する
    ６０個の問題(初心者レベルから難問まで)から選択してゲームを開始します。
    このプログラムでは、問題の解析をサポートします。
    1. 「黒 白 消」を選んでマスをクリックしながら問題を解くのが基本です。
    2. 「行の右・列の下」をクリックすると行・列を解析してマークしてくれます。
    3. 枠の外で右クリックするとステップ解析が実行されて局面が進展します。
    4. 初心者レベルの問題は、レベル０をクリックするだけで正解が表示されます。
    5. 中級レベルの問題は、レベル１をクリックするだけで正解が表示されます。
    6. 上級レベルの問題は、レベル２をクリックすると正解が表示されます。
    7. 難問の解析は時間がかかり、「のページは応答していません」が表示されたときはそのまま待って下さい。
      「解析中です」が表示されたときは、レベルを上げて下さい。
    8. レベル２でも解けない難問も掲載されています。
      ※キリンはレベル２で５分前後で解けました。
      ※犬はレベル２で５分少しで解けました。
      ※ねこはレベル２で２０分経過しても解けません。
      ※王子様はレベル２で２０分経過しても解けません。
    9. ←　→は自動解析の確認で、ステップごとの手順を後退・前進します。
      ゲームをクリアするときは←で戻してください。
    お絵描きパズルのファイル入力
    ローカルファイルからパズルを選択してゲームを開始します。
    事前に「☆お絵描きゲームのプログラム作成」から *.dot ファイルをダウンロードして下さい。
    データのサイズが大きい問題(圧縮結果が２５６バイト以上)は入力出来ません。
    「いちご, 恐竜, マリオ, ドラエモン, オランウータン」などは実行を確認しました。
    先頭行(パズル名)に空白があると起動出来ないので注意して下さい。
    パズルファイルは、一行目がパズル名で、２行目がサイズで、行の定義と列の定義が続きます。
    蛇.dot(縦のマス:15, 横のマス:10)の例です。
    //蛇
15 10
//行方向の定義
3 
2 2 
6 
2 5 
2 
3 
2 
3 
3 
2 
8 
10 
1 2 2 
1 7 
5 
//列方向の定義
1 3 
2 2 
2 2 
4 6 
1 2 8 
4 4 2 2 
7 2 2 
3 2 2 
5 
3
    ☆お絵描きゲームの作成
    お絵描きゲームのプログラムを作成する手順をステップアップで説明します。
    1. Canvas にマスを描く
    2. パズルの数字を表示
    3. クリックで塗りつぶす
    4. カラー＆消去を設定
    5. α版の完成

  13. オセロゲーム
    ☆オセロゲームの作成
    1. クリック
      盤をクリックしてオセロの座標に変換します。
    2. 盤と駒を表示
      tt[8][8] で駒を設定して、盤と駒を表示します。
    3. パラメータの設定
      パラメータが無いときは、最初の局面です。
    4. 駒の配置を渡す
      駒の配置を設定して渡します。
    5. 置けるかどうかをチェックする
      クリックされた位置に駒を置くことが出来るか否かを調べます。
    6. 交互に挟んだ駒を裏返す
      黒白交互に挟んだ駒を裏返します。
    7. コンピュータが乱数でプレイ
      乱数で選ぶだけですが、コンピュータを相手にプレイすることが出来ます。
    8. コンピュータが相手する
      初心者レベルですが、白番でコンピュータが相手します。

  14. ノベルゲーム
    ☆ノベルゲームの基本
    1. Novel Audio
      バックミュージックを流します。
    2. Novel Image
      Image と Text を自由に重ねて描画します。
    3. Novel JS
      シナリオを記述した novel.js を組み込んで、クリックでゲームを進行します。
    4. Novel Stage
      Stage-01 と Stage-02 を作成して、ステージを切り替えます。

  15. シューティングゲーム
    ☆シューティングゲームの基本
    1. 弾丸を発射
      JavaScript で弾丸を発射します。
      1. 弾丸を発射
      2. 弾丸を広がりながら発射
      3. 円状に発射
    2. シップから連射
    3. 爆発のアニメーション
    4. 敵にヒット

  16. ＲＰＧゲーム
    ☆ＲＰＧゲームに挑戦
    1. キーでキャラクターを操作
    2. 進行方向で画像を切り替える
    3. 大きな背景を描画する
    4. 背景をバックにキャラクターを動かす
    5. 背景をバックに進行方向で画像を切り替える
    6. BG Map 上をキャラクターが歩く
    7. BG Map でキャラクターを制御

前田稔の超初心者のプログラム入門

超初心者のスマホ・ゲーム