JavaScript、p5.js プログラム このページの左下の窓で動きます

跳ねる: マウスで剣が動きます。右のゴールに当たると終了。

// index.html ファイル

<html><head> <meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script src="http://p5play.molleindustria.org/lib/p5.play.js"></script>
<script language="javascript" type="text/javascript" src="Bounce.js"></script>
</head><body></body></html>

 

// Bounce.js ファイル

var x = 20, y = 20, vx = 10, vy = 0, ay = 0;
function setup() { createCanvas(500, 300);  fill(0); }
function draw() {
    background(0); ballMove(); fill(255,255,0)
    ellipse(x, y, 30, 30); rect(width-20,150,10,40);
    fill(120,75,50); ellipse(mouseX-10, 150, 10, 250);
    ellipse(mouseX-10, 240, 30, 10); rect(250,0,2,300);
}
function ballMove() {
 ay = 1; vy = vy + ay;
 y = y + vy; x = x + vx;
   if(x>width-30 && y>150 && y <180){
     vx=0; 
    }
 // Bounce when touch the edge of the canvas
 if (x < mouseX && mouseX<250) {
  x = mouseX;  vx = -vx;
 }
 if (x < 0) {
   x = 0; vx = -vx;
  }
  if (y < 0) {
   y = 0; ay = -ay; vy = -vy;
  }
  if (x > width - 20) {
   x = width - 20; vx = -vx;
  }
  if (y > height - 20) {
   y = height - 20; ay = -ay; vy = -vy;
  } 
}

このページを再読み込みでスタートします。