p5.jsでゲームを作ろう!
参考サイトを見ながら実装していきます。
まずエディタは(ゲームを作る台本みたいなものを作りって実行することができます)
p5.js でゲーム制作
プレイヤーの実装。
function setup() {
createCanvas(800, 600);
rectMode(CENTER)
}
次に背景の色を決めます。今回は"0"黒を指定します。
function draw() {
background(0);
}
マウスを押した時の動きを決めます。
function mousePress(){
}
実際に動かすものを作ります。ここでは"player"を作ります。作り方は
let player
と宣言するだけ。これにいろんな機能をつけていくこになります。
プレイヤーは位置と速度を持っているので、次のようなデータがあることにすると
四角が表示された
全体。
let player;
function setup() {
createCanvas(800, 600);
rectMode(CENTER)
player = createPlayer()
}
function draw() {
background(0);
drawPlayer(player)
}
function mousePress(){
}
function createPlayer(){
return{
x:200,
y:300,
vx:0,
vy:0
}
}
function drawPlayer(entity){
square(entity.x,entity.y,40)
}
次は重力とジャンプする、あと縦横に動く命令。
縦横
function updatePosition(entity){
entity.x += entity.vx;
entity.y += entity.vy;
}
重力
function applyGravity(entity){
entity.vx += -5;
}
ジャンプ
function applyJump(entity){
entity.vy += -5;
}
ここまで
let player;
function setup() {
createCanvas(800, 600);
rectMode(CENTER)
player = createPlayer()
}
function draw() {
background(0);
drawPlayer(player)
updatePosition(player)
applyGravity(player)
}
function mousePressed(){
applyJump(player);
}
function createPlayer(){
return{
x:200,
y:300,
vx:0,
vy:0
}
}
function drawPlayer(entity){
square(entity.x,entity.y,40)
}
function updatePosition(entity){
entity.x += entity.vx;
entity.y += entity.vy;
}
function applyGravity(entity){
entity.vy += 0.15;
}
function applyJump(entity){
entity.vy += -5;
}
これを実行するとクリックでジャンプなので上方向へ行きます。そして掘っておくと下方向へ。フロッピーバードのような動きと言えば分かりやすいでしょうか。
この記事が気に入ったらサポートをしてみませんか?