Scratchを卒業して、別のことに挑戦してみたいニンジャの中に、JavaScriptをやってみたいというニンジャが少なからずいるのですが、どこから手をつけたらいいのかわからないことが多いので、既存のScratchの作品をJavaScriptへ書き換えたらどんな感じになるのか試してみました。
岡嶋さんのScratchの作品「はしに当たったらいけにゃいゲーム」(https://scratch.mit.edu/projects/182336476)のJavaScriptバージョンを作成しました。
勝手に歩くネコを、端にぶつからない様に[スペースキー]で方向転換します。ただし[スペースキー]を押すたびにネコがどんどん大きくなっていきます。ネコが端にぶつかったらゲーム終了です。
以下のリンクをクリックして、スタートします。
Play!!!
JavaScriptとCSSの知識が少し必要です。ネコの場所を座標で管理し、移動するには三角関数も使うのでかなり複雑になってしまいました。
大きさを50%にする
this.element.width = this.element.naturalWidth * size / 100;
this.element.height = this.element.naturalHeight * size / 100;
hashiniataruna.js
5歩動かす
// 現在の位置を取得します
let x = parseFloat(this.element.style.left);
let y = parseFloat(this.element.style.top);
// stepで指定された大きさだけ、現在のangleの方向へ移動します
x -= step * Math.cos(deg2rad(this.angle));
y -= step * Math.sin(deg2rad(this.angle));
// 移動後の位置を設定します
this.element.style.left = x + ‘px’;
this.element.style.top = y + ‘px’;
hashiniataruna.js
15度回す
this.angle = (this.angle + angle) % 360;
this.element.style.transform = ‘rotate(‘ + this.angle + ‘deg)’;
hashiniataruna.js
イベントは、document.addEventListener()を呼び出して設定してます。
このプロジェクトのソースファイルは、こちらにあります。
https://github.com/coderdojo-todakoen/HashiNiAtaruna-JS