#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
ところでJavaScriptゲームライブラリは何がいい？
JavaScriptは比較的簡単に始められるプログラミング言語だと思います。でもやはりゲーム作りとなるキャラクターを自由に動かしたり、衝突、ジャンプ、落ちるなど純粋なJavaScriptだと面倒なこともあります。
そこで活躍するのがゲームライブラリということになります。ライブラリを使うとパズルのように組み合わせでできるようになりますが、使い方は覚える必要があります。使い方などはそれぞれのライブラ
Hello! p5.js. - 動かしてみよう！
表示できたので次は動かします。
function setup() { createCanvas(400, 400);}function draw() { background(220); circle(100,200,50) }
これを実行すると真ん中左よりに丸が出てきます。
circle(x,200,50)
として、これを右側に動かすと擦れば、左右の座標はx座標を変化させれば動き
Hello! p5.js. - 使ってみよう！
JavaScriptはHTML,CSSと一緒に使われてます。もっと簡単にJavaScriptだけで簡単に面白いものができるように作られたものがp5.jsです。基本的にはJavaScriptです。
次のリンクをクリックするとコードを書くエリアとプレビューエリアのページが表示されます。
Start creating with the p5 Editor!
開いて左上の三角のスタートボタンを押すと
わかりやすいJavaScript！-6 もっと書こう
Canvasにはいろんな機能が盛り沢山です。上記サイトに詳しく説明がありますのでじっくりとやる場合は参考になります。
このサイトには大きくインスタンスプロパティ、インスタンスメソッドとして分けて書いてあります。
プロパティはいろんな要素、部品的なもの、例えば文字関連、色などのスタイル関係の指定する方法が書かれています。メソッドは例えば"円を描く"というような命令、一発で何かができる命令が書いて
わかりやすいJavaScript！-5 図形を書こう
JavaScriptで図形なんかを書くのに便利なものがあります。Canvasという便利なライブラリがあります。早速使ってみましょう！
<canvas id="canvas"></canvas>
まずはこれです。
そしてこの"id"を取得するべく、JavaScriptの命令を書いていきます。
const canvas = document.getElementById("canvas");c
わかりやすいJavaScript！-4 ずっと・・
前回で絵文字のりんごを動かしましたが、動きのもとになっているのが
です。
何かを繰り返してやりたい場合に使うsetIntervalとsetTimeoutを使うことができます。そのほかrequestAnimationFrameも使うことができます。
"setInterval"は繰り返しを続けます。止める命令がないと止まりません。
"setTimeout"は1回のみ実行します。(使い方により繰