p5.jsでゲームを作ろう！

参考サイトを見ながら実装していきます。

まずエディタは（ゲームを作る台本みたいなものを作りって実行することができます）

p5.js Web Editor

p5.js でゲーム制作

プレイヤーだけ実装

プレイヤーの実装。

function setup() {
createCanvas(800, 600);
rectMode(CENTER)
}

createCanvas(800, 600);
画面の大きさを決めます。

次に背景の色を決めます。今回は"0"黒を指定します。

function draw() {
background(0);
}

マウスを押した時の動きを決めます。

function mousePress(){
  
}

function　・・・　は動作する時につける御呪い。

実際に動かすものを作ります。ここでは"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;
}

これを実行するとクリックでジャンプなので上方向へ行きます。そして掘っておくと下方向へ。フロッピーバードのような動きと言えば分かりやすいでしょうか。