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;
}
}