ゲーム制作ラボGAME LAB
はじめてのプログラミング

CODE IT. PLAY IT.

つくる、うごく。

コードを変えると、ゲームが変わる。
自分だけのブロック崩しをつくろう。

01
ブロック崩しをつくろう

HTML / CSS / JavaScript ・ 30〜40分

STEP 01 · まずは体験

コードエディタ

index.html
ブラウザに自動保存
15px
行 1, 列 1Tab：字下げ　Esc：編集欄から移動

プレビュー

実行結果
実行できます
←→で移動画面をクリックしてプレイ

コードを変えたら「実行する」で反映。
小さな変更から、試してみよう。

YOUR MISSION

ヒントを見る ＋

HTML画面の構造CSS色・大きさJavaScript動き・ルール小さなルールが、ゲームになる。

HOW TO USE

まずは、小さく変えてみよう。

  1. ステップを選ぶ

    最初は完成したゲームで遊び、次に空欄をコーディングしてしくみを一つずつ作ります。

  2. コードを編集する

    「課題のコードへ」で空欄に移動。「入力ヒント」のコードを見ながら入力し、困ったときはコピーして貼り付けられます。 「A＋」で文字を大きく、「拡大」で編集欄を広くできます。変更を戻したいときは「元に戻す」を使います。

  3. 「実行する」を押す

    プレビューに結果が表示されます。ゲーム画面をクリックしてから矢印キーで操作。マウスやタッチでも移動できます。

コードと完了状態は、この端末・ブラウザに保存されます。「保存」でHTMLを持ち帰れます。ネット接続やアカウント登録は不要です。

先生向けガイドへ →

RESET CODE

このステップを最初に戻す？

このステップの編集内容と完了マークがリセットされます。他のステップのコードは残ります。