#JavaScript
やっぱりJavaScript - ml5.js で機械学習
p5.js web editorを使ってJavaScriptで機械学習(ml5.js)を試すことができます。
何はともあれ上記サイトで紹介されている
を開いて実行した結果
左下のコンソールの三角印（矢印）をクリックすると推論された結果が出ています。
この場合は
が一番可能性が高いと出てきています。
p5.jsエディタの中身はというとindex.htmlとsketch.jsが重要です。
setTimeoutとsetIntervalを理解しとこ。
setInterval の仕組みが、指定された関数の処理時間に関係なく指定されたインターバルで実行されるようになっているからです。これの何が問題かといいますと、サーバからのレスポンス待ちのときに次々とリクエストされてしまいサーバへの負荷に繋がってしまいます。
タイマーの繰り返しとして使う場合は
処理の開始までに要する時間が異なります。setIntervalは1回分の動作にかかる時間がインターバ
やっぱりJavaScript - タートルグラフィックを自分で作ってみよう！-2
前回ではスクリプトを書いて自作して動かすことができました。JSBinを使って手軽にやりましたが、自分のパソコンでネット環境なしで作ることもできるのでその紹介もしておきます。どんなパソコンでもパソコンの中に入っているものでできますので覚えてしまえば簡単です。
Macだとテキストエディット
Windowsだとメモ帳
このエディタを使って文字を書いて使えるようにします。文字は決まりごとを守って書い
やっぱりJavaScript - タートルグラフィックを自分で作ってみよう！。
JavaScriptでタートルグラフィックをやってみましょう！
JavaScriptのグラフィックライブラリのCanvasを使ってそれっぽいものを作って実行してみます。欲しい機能を参考資料のコードに追加をして試してみます。
JSBinでJavaScriptの場所に以下を書きます。
まずCanvasを使ってグラフィックを領域を作っています。
var canvas = document.crea
JavaScriptでもっと簡単にゲームを作る方法。
簡単にJavaScriptでゲームを作るにはフレームワークを使うのが一番簡単です。いろんなものがありますが今使いやすくwebエディタも用意されているのがp5jsです。
さらにいろんなことができるp5playというのがあります。
このp5playをp5jsのwebエディタでも使えるようにしたいと思います。
ライブラリは
ここから
p5play.js p5play.min.js plan
JavaScriptでゲームを作る方法。
JavaScriptはホームページを便利に、ある時は面白い仕組みを作ることができるものです。ホームページの表示はHTMLという言葉で作り上げることができ、動きをJavaScriptが担います。
JavaScriptにはフレームワークもありますが、基本の動かし方を知っておくと他の方法にも繋げて考えられると思います。
参考サイトです。
ゲームを作る時に大事なのはゲームはスタートした時点から何かし
JavaScriptでじゃんけん！
サンプルコードをお借りして実行します。
HTMLは
<!DOCTYPE html><html lang="ja"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-widt
JavaScriptで簡単ゲーム！
このサイトで紹介されているコードがほんとちょうど分かりやすくて短くまとまっていて理解しやすいと思うのでご紹介。
全体は以下。これだけで全てです。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <form name="form"> Q1)
p5.jsでゲームを作ろう！
参考サイトを見ながら実装していきます。
まずエディタは（ゲームを作る台本みたいなものを作りって実行することができます）
p5.js でゲーム制作
プレイヤーの実装。
function setup() {createCanvas(800, 600);rectMode(CENTER)}
次に背景の色を決めます。今回は"0"黒を指定します。
function draw() {backgrou
Hello! p5.js. - p5playで2つの物体。
前回作ったキーボードの矢印で動く四角にもう一つ四角を追加し、２つの物体を表示してみます。
let sprite;let sprite2;
と変数も追加し、
sprite = new Sprite(width/2-100, height/2); sprite.width = 50; sprite.height = 50; sprite.color = 'orange'
Hello! p5.js. - p5playで表示する。
p5.jsのみの場合との違いも少し入れながらライブラリp5playを使ってみます。
このサイトを使って、indexhtmlを以下に置き換えて
<!DOCTYPE html><html lang="en"> <head> <script src="https://cdn.jsdelivr.net/npm/p5@latest/lib/p5.min.js"></script> <scr
Hello! p5.js. - p5playを使う準備。
p5playはp5.jsをベースにしたライブラリでp5.jsをさらに使いやすくゲームなどが簡単に作れるようになっています。
まず使う方法ですが、p5.jsであればwebエディタが用意されていますが、p5Playも同じようにwebエディタで使うことができます。
使い方一つ目は
右上のCREATESKETCHボタンよりエディタを起動して使うことができます。
赤丸の部分をそれぞれ有効にして、最後
わかりやすいJavaScript！-7 動かそう！
ライブラリを使話ない普通のJavaScriptで動かす命令としとよくt飼われているのが、
があります。そして別の方法として
があります。その違いなどを見ていきます。
setInterval
通常は一定時間ごと実行。この場合だと1000mm秒後(1秒後)ごとに連続してcountUp()を実行します。
<script> let count = 0; function countUp(){
Hello! p5.js. - 自由に動かす！
まず動かす準備です四角の位置と動くスピードを変数にします。
あとはdraw()関数中で四角を変数を使って作って、スピードも更新するたびにスピード分を加算するようにします。
let x = 100let y = 200let speed = 1function setup() { createCanvas(400, 400);}function draw() { background(220