JavaScriptでもっと簡単にゲームを作る方法。
簡単にJavaScriptでゲームを作るにはフレームワークを使うのが一番簡単です。いろんなものがありますが今使いやすくwebエディタも用意されているのがp5jsです。
さらにいろんなことができるp5playというのがあります。
このp5playをp5jsのwebエディタでも使えるようにしたいと思います。
ここからはライブラリなどのデータをアップロードする必要があるのでログインして使う必要があります。ログインすると、今の状態を保存することもできるようになります。
ライブラリは
ここから
p5play.js p5play.min.js planck.min.js
<script src="p5play.min.js"></script>
<script src="planck.min.js"></script>
<script src="p5play.js"></script>全体は
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.3/addons/p5.sound.min.js"></script>
<script src="p5play.min.js"></script>
<script src="planck.min.js"></script>
<script src="p5play.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="sketch.js"></script>
</body>
</html>p5jsのwebエディタの赤丸の部分をクリックすると左側のファイルの置き場が出てきます。そこにGithubでダウンロードしたファイルをプラスボタンを押すことでアップロードできます。
エディタの準備ができたらいろいろ試してみましょう。
まず、スプライト。画面上で動くもの、丸、三角、四角、画像などを使っていろんな表現することができます。
例えばこのサイトで紹介されているものをコピペして動かしてみます。
let sprite;
function setup() {
new Canvas(238, 100);
sprite = new Sprite();
sprite.width = 50;
sprite.height = 50;
}
function draw() {
background('#FFFFFF');
}これを実行すると画面上に幅50、高さ50の四角が表示されます。
他にもいろんな形などが例示、コードが書いてあるので試してみましよう。物理暗算などを使ってアニメーションなどもできるようになり便利に、できることの幅が広がって使えるようになります。
この記事が気に入ったらサポートをしてみませんか？