<!DOCTYPE html>
<html lang="ja">
<head>
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/p5@1/lib/addons/p5.sound.min.js"></script>
<!-- Version 3 of p5play -->
<script src="https://p5play.org/v3/planck.min.js"></script>
<script src="https://p5play.org/v3/p5play.js"></script>
<link rel="stylesheet" type="text/css" href="./style.css" />
<meta charset="utf-8" />
</head>
<body>
<main>
<script>
let sp1, sp2;
let ww = 600;
let hh = 300;
let ii = 1;
function setup() {
new Canvas(ww, hh);
sp1 = new Sprite(ww + 80, (hh * 2) / 3 - 20, 50, 50);
sp2 = new Sprite((ww * 2) / 3 + 100, hh / 3, 50, 50);
sp1.image = "./img/iwana1.png";
sp2.image = "./img/kebari01.png";
sp2.rotation = -90;
sp2.scale = 0.5;
sp2.vel.y = 3;
}
function draw() {
background(100);
sp1.vel.x = -1;
if (sp1.x < -80) {
sp1.x = ww + 100;
sp2.opacity = 1;
sp2.x = ww + 100 - 50;
}
if ((sp1.x < 450) & (sp1.x > 300)) {
sp1.rotation = 40;
if (sp1.x < 350) {
sp2.opacity = 0;
if (sp1.x < 310) {
sp1.rotation = 0;
}
}
}
if ((sp1.x < 250) & (sp1.x > 100)) {
sp2.opacity = 1;
sp1.rotation = 40;
if (sp1.x < 160) {
sp2.opacity = 0;
if (sp1.x < 150) {
sp1.rotation = 0;
}
}
}
if (sp2.y > 110) {
world.timeScale = 0.5;
sp2.vel.y = -5;
sp2.vel.x = -0.2;
} else if (sp2.y < 70) {
sp2.vel.y = 2;
}
if (sp1.x < sp2.x + 80) {
sp2.x = sp1.x - 80;
}
}
</script>
</main>
</body>
</html>