懐かしきツインビーを再現してみた
ナビゲーションに移動
検索に移動
詳細
ファイル:Desktop 2021.07.23 - 03.16.08.04-small.mp4
- ボス戦は無いです。
コード
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>シューティングゲーム</title>
<link rel="shortcut icon" href="#!">
<style>
#button:hover{
opacity:0.6
}
canvas{
background-image:url("assets/bac.png");
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
color: #7fffd4;
}
</style>
</head>
<body style="background-color: rgb(35, 35, 65);color: white;">
<div id="log" style="display: block;border-radius: 30px;border-style: solid;border-color: rgba(255, 0, 0, 0.776);border-width: 3px;position:absolute;margin: 15% 10% 15% 10%;width: 50%;text-align: center;min-height: 150px;">
<p>ボタンを押すと始まるよ</p>
<button onclick="startInit()" id="button" style="background-color: orange;border-radius: 30px;border-width: 3px;
border-style: solid;width: 150px;font-size: 40px;color: white;cursor:pointer;">開始!!</button>
<p>雲を打つとアイテムで得点増加！！さらにベルコンボでパワーアップアイテムに！！<br>青(5HIT)：500、赤(10HIT):パワーアップ</p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.3.10/pixi.min.js"></script>
<script src="https://cdn.rawgit.com/sbfkcel/pixi-apngAndGif/master/dist/PixiApngAndGif.js"></script>
<script>
//先読込 Chormエラー回避
let useMusic;
var backgroundMusic1 = new Audio("sounds/bac2.mp3");
var Nomalmusic = new Audio('sounds/01.mp3');
var Powermusic = new Audio('sounds/04.mp3');
var Hitmusic = new Audio('sounds/02.mp3');
var Initmusics = new Audio("sounds/start1.mp3");
var backgroundMusic2 = new Audio("sounds/power1.mp3");
var Overmusic = new Audio('sounds/over.mp3');
var KillsMusic = new Audio('sounds/out.mp3');
var BELLmusic = new Audio('sounds/BELL.mp3');
function startInit(){
document.getElementById("button").disabled = true;
var music = new Audio("sounds/button0.mp3");
music.volume = 0.5;
music.play();
setTimeout(function(){
start();
},1500);
}
function start(){
const app = new PIXI.Application({transparent : true,
width: 960, height: window.innerHeight -20 });//backgroundColor: 0x0000ff window.innerWidth width: 960, height: 540 width: window.innerWidth, height: window.innerHeight
document.getElementById("log").style.display = "none";
document.body.appendChild(app.view);
backsounds(backgroundMusic1,0);
const pumpkins = [];
const balls = [];
const ballsL = [];
const ballsR = [];
let count = 0;
let score = 0;
const STAGE_W = app.screen.width;
const STAGE_H = app.screen.height;
const SIZE = 20;
const SIZE2 = 2 * SIZE;
const texture = PIXI.Texture.from('assets/pumpkin.png');
let powerUpIs = false;
const witch = PIXI.Sprite.from('assets/player.gif');
const cloudimg = PIXI.Texture.from('assets/cloud.png');
const itemImg = PIXI.Texture.from('assets/tbee_007.gif');
witch.anchor.set(0.5);
witch.x = STAGE_W - (SIZE + 10);
witch.y = STAGE_H / 2;
app.stage.addChild(witch);
const style = new PIXI.TextStyle({fontSize: 34,fill:0xffffff});
const scoreT = new PIXI.Text('', style);
app.stage.addChild(scoreT);
var musics;
//icons = ["big.png","mikan.png","pumpkin.png","ringo.png","witchB.png"];
icons = ["storm.gif","been.gif","bimacc.gif","dakkon.gif","houtyo.gif","kyupa.gif","fock.gif","takoran.gif",
"donbei.gif","nabekko.gif","nappi.gif"];
let speed = [];
let ySpeed = [];
function rondomsIcon(){
var textured = PIXI.Texture.from(`assets/${icons[ Math.floor( Math.random() * icons.length ) ]}`);
return textured;
}
function backsounds(val,isSound){
useMusic = val;
stopsounds();
switch(isSound){
case (0):
Initmusics.volume = 0.5;
Initmusics.play();
setTimeout(function(){
if(!GameOverIs){
val.loop = true;
val.volume = 0.5;
val.play();
}else{
stopsounds();
}
},7000);
break;
case (1):
val.loop = true;
val.volume = 0.5;
val.play();
break;
default: break;
}
}
function stopsounds(){
try{
useMusic.pause();
useMusic.currentTime = 0;
}catch{
;
}
}
let clickCount = 0;
app.stage.interactive = true;
app.stage.on('pointertap', () => {
const ball = new PIXI.Graphics();
ball.lineStyle(0);
ball.beginFill(0xff99ff);//666666
ball.drawRect(0, 0, 8,8);
ball.rotation = 0.75;
ball.x = witch.x ;
ball.y = witch.y - SIZE;
if(!powerUpIs){
Nomalmusic.volume = 0.5;
Nomalmusic.play();
}else{
Powermusic.volume = 0.5;
Powermusic.play();
}
app.stage.addChild(ball);
balls.push(ball);
const ball2 = new PIXI.Graphics();
ball2.lineStyle(0);
ball2.beginFill(0xff99ff);//666666
ball2.drawRect(0, 0, 8,8);
ball2.rotation = 0.75;
ball2.x = witch.x;
ball2.y = witch.y - SIZE;
const ball3 = new PIXI.Graphics();
ball3.lineStyle(0);
ball3.beginFill(0xff99ff);//666666
ball3.drawRect(0, 0, 8,8);
ball3.rotation = 0.75;
ball3.x = witch.x;
ball3.y = witch.y - SIZE;
clickCount++;
if(powerUpIs && (clickCount%2 == 0)){
clickCount=0;
//右
app.stage.addChild(ball2);
ballsL.push(ball2);
//左
app.stage.addChild(ball3);
ballsR.push(ball3);
}
});
function addItem(cloudP){
const item = new PIXI.Sprite(itemImg);
item.y = cloudP.y;
item.x = cloudP.x;
app.stage.addChild(item);
items.push(item);
itemSpeed.push(3);
itemHits.push(0);
}
function belltype(i){
try{
if((itemHits[i] >= 5) && (itemHits[i] <= 7)){
itemHits[i] = 0;
score += 500;
scoreT.text = String(score);
}else if((itemHits[i] >= 10) && (itemHits[i] <= 13)){
itemHits[i] = 0;
powerUp(1);
}else{
itemHits[i] = 0;
score += 200;
scoreT.text = String(score);
}
}catch{
itemHits[i] = 0;
score += 200;
scoreT.text = String(score);
}
}
function bellIcons(i){
//console.log(itemHits[i]);
try{
if((itemHits[i] >= 5) && (itemHits[i] <= 7)){
const bellI = PIXI.Texture.from('assets/tbee_008.gif');
const item = new PIXI.Sprite(bellI);
item.y = items[i].y;
item.x = items[i].x;
app.stage.addChild(item);
app.stage.removeChild(items[i]);
items[i] = item;
}else if((itemHits[i] >= 10) && (itemHits[i] <= 13)){
const bellI = PIXI.Texture.from('assets/tbee_010.gif');
const item = new PIXI.Sprite(bellI);
item.y = items[i].y;
item.x = items[i].x;
app.stage.addChild(item);
app.stage.removeChild(items[i]);
items[i] = item;
}else if((itemHits[i] >= 14)){
const bellI = PIXI.Texture.from('assets/tbee_007.gif');
const item = new PIXI.Sprite(bellI);
item.y = items[i].y;
item.x = items[i].x;
app.stage.addChild(item);
app.stage.removeChild(items[i]);
items[i] = item;
itemHits[i] = 0;
}
}catch{
;
}
}
/* ITEM 制御 */
let items = [];
let itemSpeed = [];
let itemHits = [];
app.ticker.add(Items);
function Items(delta) {
for (let i = 0; i < items.length; i++) {
const itemP = items[i];
try{
if (items[i].y > STAGE_H - SIZE2 +50) {
//showGameOver();
app.stage.removeChild(itemP);
items.splice(i, 1);
itemSpeed.splice(i, 1);
//return;
}else{
if (items[i].x > STAGE_W - 35){
itemSpeed[i] *= -1;
}
if (items[i].x < 0){ //+ SIZE2
itemSpeed[i] *= -1;
}
items[i].y += 3;
items[i].x += itemSpeed[i];
if(hitTest(witch,itemP)){
app.stage.removeChild(itemP);
items.splice(i, 1);
itemSpeed.splice(i, 1);
belltype(i);
}
}
}catch(er){
console.log(er);
}
}
}
let clouds = [];
/* cloud */
app.ticker.add(cloud);
function cloud(){
for (let i = 0; i < clouds.length; i++) {
const cloudP = clouds[i];
if (clouds[i].y > STAGE_H - SIZE2 +50) {
app.stage.removeChild(cloudP);
clouds.splice(i, 1);
}else{
clouds[i].y += 2;
}
if(GameOverIs){
break;
}
}
}
app.ticker.add(cloudSettingPower);
function cloudSettingPower(){
for (let j = 0; j < clouds.length; j++) {
if(powerUpIs){
for (let i = 0; i < ballsR.length; i++) {
try{
const ball = ballsR[i];
const ball2 = ballsL[i];
const cloudP = clouds[j];
if (hitTest(ball, cloudP)) {
app.stage.removeChild(ball);
ballsR.splice(i, 1);
app.stage.removeChild(cloudP);
clouds.splice(j, 1);
// Item Drop
addItem(cloudP);
break;
}
if (hitTest(ball2, cloudP)) {
app.stage.removeChild(ball2);
ballsL.splice(i, 1);
app.stage.removeChild(cloudP);
clouds.splice(j, 1);
// Item Drop
addItem(cloudP);
break;
}
}catch(e){
console.log(e);
}
}
}
}
}
function ballPowerL(){
if(powerUpIs){
for (let i = 0; i < ballsL.length; i++) {
try{
ballsL[i].y -= 10;
ballsL[i].x -= 10;
if (ballsL[i].y < 0) {
app.stage.removeChild(ballsL[i]);
ballsL.splice(i, 1);
}
}catch{
;
}
}
}
}
function ballPowerR(){
if(powerUpIs){
for (let i = 0; i < ballsR.length; i++) {
try{
ballsR[i].y -= 10;
ballsR[i].x += 10;
if (ballsR[i].y < 0) {
app.stage.removeChild(ballsR[i]);
ballsR.splice(i, 1);
}
}catch{
;
}
}
}
}
/* E N D */
function hitsPowerR(){
if(powerUpIs){
for (let j = 0; j < pumpkins.length; j++) {
for (let i = 0; i < ballsR.length; i++) {
try{
const ball = ballsR[i];
const pumpkin = pumpkins[j];
if (hitTest(ball, pumpkin)) {
app.stage.removeChild(ball);
Hitmusic.volume = 0.5;
Hitmusic.play();
ballsR.splice(i, 1);
app.stage.removeChild(pumpkin);
EnemyCrush(pumpkins,j);
speed.splice(j, 1);
ySpeed.splice(j,1);
pumpkins.splice(j, 1);
score += 100;
scoreT.text = String(score);
break;
}
}catch{
;
}
}
}
}
}
function hitsPowerL(){
if(powerUpIs){
for (let j = 0; j < pumpkins.length; j++) {
for (let i = 0; i < ballsL.length; i++) {
try{
const ball = ballsL[i];
const pumpkin = pumpkins[j];
if (hitTest(ball, pumpkin)) {
app.stage.removeChild(ball);
Hitmusic.volume = 0.5;
Hitmusic.play();
ballsL.splice(i, 1);
app.stage.removeChild(pumpkin);
EnemyCrush(pumpkins,j);
speed.splice(j, 1);
ySpeed.splice(j,1);
pumpkins.splice(j, 1);
score += 100;
scoreT.text = String(score);
break;
}
}catch{
;
}
}
}
}
}
function EnemyCrush(mob,val){
try{
const effectE = PIXI.Texture.from('assets/down.png');
const effect = new PIXI.Sprite(effectE);
effect.x = mob[val].x;
effect.y = mob[val].y;
app.stage.addChild(effect);
setTimeout(function(){
app.stage.removeChild(effect);
},200);
}catch{
;
}
}
/* E N D */
/* cloud 制御 */
app.ticker.add(cloudSetting);
function cloudSetting(){
for (let j = 0; j < clouds.length; j++) {
for (let i = 0; i < balls.length; i++) {
try{
const ball = balls[i];
const cloudP = clouds[j];
if (hitTest(ball, cloudP)) {
app.stage.removeChild(ball);
balls.splice(i, 1);
app.stage.removeChild(cloudP);
clouds.splice(j, 1);
// Item Drop
addItem(cloudP);
break;
}
}catch{
;
}
}
}
}
/* E N D */
app.ticker.add(ItemSetting);
function ItemSetting(){
/* Item 制御 */
for (let j = 0; j < items.length; j++) {
for (let i = 0; i < balls.length; i++) {
try{
const ball = balls[i];
const itemP = items[j];
if (hitTest(ball, itemP)) {
BELLmusic.volume = 0.5;
BELLmusic.play();
itemHits[j] += 1;
items[j].x += 20;
//items[j].y += ((0-(items[j].x)**2)+items[j].x)+items[j].y;
items[j].y -= 150;
bellIcons(j);
}
}catch{
;
}
}
if(powerUpIs){
for (let i = 0; i < ballsR.length; i++) {
try{
const ball = ballsR[i];
const ball2 = ballsL[i];
const itemP = items[j];
if (hitTest(ball, itemP)) {
BELLmusic.volume = 0.5;
BELLmusic.play();
itemHits[j] += 1;
items[j].x += 20;
items[j].y -= 150;
bellIcons(j);
}
if (hitTest(ball2, itemP)) {
BELLmusic.volume = 0.5;
BELLmusic.play();
itemHits[j] += 1;
items[j].x -= 20;
items[j].y -= 150;
bellIcons(j);
}
}catch{
;
}
}
}
}
}
app.ticker.add(animate);
function animate(delta) {
for (let i = 0; i < pumpkins.length; i++) {
try{
const pumpkinP = pumpkins[i];
if (pumpkins[i].y > STAGE_H - SIZE2 +50) {
//showGameOver();
app.stage.removeChild(pumpkinP);
speed.splice(i, 1);
ySpeed.splice(i,1);
pumpkins.splice(i, 1);
//return;
}
if (pumpkins[i].x > STAGE_W - 35){
ySpeed[i] *= -1;
}
if (pumpkins[i].x < 0){
ySpeed[i] *= -1;
}
speeds = speed[i];
if(speeds){
pumpkins[i].y += speeds;
yspeeds = ySpeed[i];
if(yspeeds){
pumpkins[i].x += yspeeds;
}
}else{
pumpkins[i].y += 2;
}
if(hitTest(witch,pumpkinP)){
stopsounds();
KillsMusic.volume = 0.5;
KillsMusic.play();
showGameOver();
return;
}
}catch{
;
}
}
const position = app.renderer.plugins.interaction.mouse.getLocalPosition(app.stage);
if (position.y != -999999) {
witch.x += (position.x - witch.x) * 0.1;
witch.y += (position.y - witch.y) * 0.1;
}
count += delta;
if (count >= 60) {
count = 0;
const pumpkin = new PIXI.Sprite(rondomsIcon());
pumpkin.y = 0 - SIZE2;
pumpkin.x = (STAGE_W - SIZE2) * Math.random();
app.stage.addChild(pumpkin);
pumpkins.push(pumpkin);
speed.push(Math.floor( Math.random() * (3 + 1 - 1) ) + 1 );
//speed.push(2);
ySpeed.push(Math.floor( Math.random() * (5 + 1 - 0) ) + 0 * 0.1);
if((Math.floor( Math.random() * (3 + 1 - 0) ) + 0 == 2) && score >= 500){
const cloudPs = new PIXI.Sprite(cloudimg);
cloudPs.y = 0 - SIZE2;
cloudPs.x = (STAGE_W - 50) * Math.random();
app.stage.addChild(cloudPs);
clouds.push(cloudPs);
}
}
//####################
//
//
// BALL 制御
//
//
//####################
/* 範囲外はボールは消える */
for (let i = 0; i < balls.length; i++) {
balls[i].y -= 30;
if (balls[i].y < 0) {
app.stage.removeChild(balls[i]);
balls.splice(i, 1);
}
}
/* 雑魚敵制御 */
for (let j = 0; j < pumpkins.length; j++) {
for (let i = 0; i < balls.length; i++) {
try{
const ball = balls[i];
const pumpkin = pumpkins[j];
if (hitTest(ball, pumpkin)) {
app.stage.removeChild(ball);
Hitmusic.volume = 0.5;
Hitmusic.play();
balls.splice(i, 1);
app.stage.removeChild(pumpkin);
EnemyCrush(pumpkins,j);
speed.splice(j, 1);
ySpeed.splice(j,1);
pumpkins.splice(j, 1);
score += 100;
scoreT.text = String(score);
scoreT.x = 500;
scoreT.y = 10;
break;
}
}catch{
;
}
}
}
};
powerUpCount = 0;
function powerUp(val){
stopsounds();
switch(val){
case(0):powerUpIs = false;
powerUpCount = 0;
backsounds(backgroundMusic1,0);
break;
case(1):
powerUpIs = true;
if(powerUpCount == 0){
app.ticker.add(hitsPowerL);
app.ticker.add(hitsPowerR);
app.ticker.add(ballPowerL);
app.ticker.add(ballPowerR);
}
powerUpCount += 1;
//console.log(`PowerUP!!${powerUpIs}`)
backsounds(backgroundMusic2,1);
break;
}
}
function hitTest(ball, pumpkin) {
try{
if (ball.x > pumpkin.x && ball.x < pumpkin.x + SIZE2
&& ball.y > pumpkin.y && ball.y < pumpkin.y + SIZE2) {
return true;
} else {
return false;
}
}catch{
return false;
}
}
let GameOverIs = false;
function showGameOver() {
GameOverIs = true;
stopsounds();
Overmusic.volume = 0.5;
Overmusic.play();
message(`ゲームオーバー！ あなたのスコアは ${score} でした。<button onclick="location.href=''">リセット</button>`,"pink");
app.ticker.remove(animate);
if(powerUpIs){
app.ticker.remove(hitsPowerL);
app.ticker.remove(hitsPowerR);
app.ticker.remove(ballPowerL);
app.ticker.remove(ballPowerR);
}
app.ticker.remove(cloud);
app.ticker.remove(Items);
app.ticker.remove(cloudSetting);
app.ticker.remove(ItemSetting);
app.stage.off('pointertap');
app.stage.off('pointertap2');
}
function message(msg,color){
var logs = document.getElementById("log");
logs.style.display = "block";
logs.style.backgroundColor = color;
logs.innerHTML = msg;
}
}
</script>
</body>
</html>