動画を背景にシューティングゲーム(JavaScript, p5.js)
PCのBrouser(Edge, IE)で動きます。Chromeでは背景動画が出ません。
↓こちらは静止画を背景にIBM Cloud (bluemix)のサイトで動かしています。
なぜか動画が出ないので静止画にしました？
https://midosujishootgame.mybluemix.net/
このサイトを開くとスマホでもなんとか動きます。遅い場合は再読み込みしてください。
以下はPCのIE, Edgeで動画が動くプログラムです。動画は自前のものを使ってください。
-----------------
htmlファイル
-----------------
<html><head> <meta charset="UTF-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.2/p5.js"></script>
<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.5/addons/p5.dom.js"></script>
<script language="javascript" type="text/javascript" src="Video2.js"></script>
</head><body></body></html>
-----------------
Video2.jsファイル
-----------------
var k=999; var S=1; var SW1=1; var SW2=1;
var x, Px, PxE, P1x, P1xE, P2x, P2xE, L, L1, L2, Shoot;
function setup() {
createCanvas(2000, 800);
Shoot = createVideo("./midosuji.mp4"); // 自前の動画を使ってください。
Shoot.loop(); Shoot.hide();
}
function draw() {
background(150); image(Shoot,400,40,1200,800);
if (k>PI/2-0.1){SW1=1; SW2=1; k=0.5; Px=700; PxE=random(500)+200; // 赤玉の終了位置
L=(PxE-Px); P1x=random(1000)+250; P1xE=random(1000)+250; // 三角の出現と消える位置
L1=(P1xE-P1x); P2x=random(2000)+150; P2xE=random(1000)+150; L2=(P2xE-P2x);
};
x=Px+L*sin(k)^2+S; y=(800+20)*cos(k)^2; // 赤玉の位置
noStroke(); fill(255,50,50);
ellipse(x-0.5*(x-mouseX), y, y/8, y/8);
k=k+0.01; fill(0);
stroke('yellow'); strokeWeight(10);
x1=P1x+L1*sin(k)^2; y1=(800-20)*cos(k)^2;
if(SW1==1){triangle(x1+y1/6,y1+y1/6,x1,y1-y1/4,x1+y1/6,y1-y1/8);};
x2=P2x+L2*sin(k)^2; y2=(800+30)*cos(k)^2;
if(SW2==1){triangle(x2,y2-y2/6,x2-y2/6,y2+y2/6,x2+y2/6,y2-y2/4);};
if (abs(x-0.5*(x-mouseX)-x1-50)<20){
SW1=0;
for (var r = 0; r < 3; r++) {
fill(255,255,0); noStroke();
ellipse(x1-random(200)+150, y1-random(200)+50, 40, 20);
}
}
if (abs(x-0.5*(x-mouseX)-x2-50)<20){
SW2=0;
for (var r = 0; r < 3; r++) {
fill(255,255,0); noStroke();
ellipse(x2-random(200)+150, y2-random(200)+50, 40, 20);
}
}
}