Scratchで「ずっと」「もし〜なら」「変数」を使ってゲームを作れた人は、プログラミングの考え方をもう身につけています。JavaScriptに移るときに新しく覚えるのは、同じ考え方の「書き方」だけです。
このページでは、Scratchのブロックと、それに当たるJavaScriptを並べて見せます。ひなテックGamesには同じゲームのScratch版とJavaScript版が両方あるので、読み終えたら本物のコードで見くらべてみてください。
| Scratch | JavaScript | よぶ名前 |
|---|---|---|
| ずっと | while (true) { } | 繰り返し |
| 10回くりかえす | for (var i = 0; i < 10; i++) { } | 回数指定の繰り返し |
| もし〈 〉なら | if ( ) { } | 条件分岐 |
| スコア を 1 ずつ変える | score += 1; | 変数 |
| リスト に 3 を追加する | list.push(3); | 配列 |
| 1 から 10 までの乱数 | Math.floor(Math.random() * 10) + 1 | 乱数 |
| x座標を 10 ずつ変える | x += 10; | 座標 |
| スペースキーが押されたとき | addEventListener("keydown", …) | イベント |
| タイルをよせる（自作ブロック） | function slideRow() { } | 関数 |
ならべてみると、ブロック1つが、だいたいコード1行に対応しているのが分かります。むずかしくなったわけではなく、形が変わっただけです。
function loop() {
moveCharacter();
draw();
requestAnimationFrame(loop);
}
loop();requestAnimationFrame がその役目で、画面の書きかえに合わせて1秒に約60回呼んでくれます。自分自身をもう一度呼ぶことで「ずっと」を作っているのがポイントです。if (ball.x < 0 || ball.x > 400) {
ball.vx = ball.vx * -1;
}var score = 0;
score += 10;
var tiles = [];
tiles.push(2);
tiles[0];tiles[0] が最初の要素です。ここは多くの人がつまずくので、覚えておくと得をします。function slideRow(row) {
for (var i = 0; i < 4; i++) {
if (row[i] === row[i + 1]) {
row[i] = row[i] * 2;
}
}
return row;
}
slideRow(grid[0]);return で結果を返せることです。ここまでの話は、実物で見るのがいちばん早いです。下のゲームはScratch版とJavaScript版の両方が公開されていて、どちらも中身を読めます。同じ遊びが2通りの書き方で作られているのを、ぜひ見くらべてみてください。
| ゲーム | Scratchで中を見る | JavaScriptで読む |
|---|---|---|
| 2048 | Scratch版 → | ソースコード全文 → |
| スネークゲーム | Scratch版 → | ソースコード全文 → |
| ブロックくずし | Scratch版 → | ソースコード全文 → |
| 迷路ゲーム | Scratch版 → | ソースコード全文 → |
| 倉庫番 | Scratch版 → | ソースコード全文 → |
ソースコードのページには「このコードを書きかえて動かす」ボタンがあります。押すとその場で実行できるので、数字を1つ変えて、どう変わるかを試すのがおすすめです。Scratchでやっていたことと、まったく同じ学び方ができます。
ブロックからコードへ移るときは、最初のひと山を誰かと越えると一気に楽になります。ひなテックでは、Scratchで作った経験を活かしてHTML・CSS・JavaScriptへ進む道すじを用意しています。