メニュー 閉じる

030. p5.jsで中心から全方向に弾を発射する砲台を作ってみる

ちょっとしたシューティングゲームを作ろうと思って、全方向に自動的に弾を発射し続ける砲台を作って見ました。砲台の中心付近でドラッグして引っ張ると大きい弾が出ます。

http://www.velvet-number.com/p5_test/test021/

var offsetx;
var offsety;

var rifle;

var riflex;
var rifley;
var riflew;
var rifleh;
var rifled;
var rifler;

var riflein;

var bullets;

var press;

function setup () {

	pixelDensity (displayDensity ());
	createCanvas (windowWidth, windowHeight);
	colorMode (RGB, 256);
	background (255);

	riflex = width / 2.0;
	rifley = height / 2.0;
	riflew = 11.0;
	rifleh = 40.0;

	riflein = false;

	rifle = new RifleBase ();

	bullets = [];

	press = false;

}

function draw () {

	background (255);

	rifle.update ();
	rifle.render ();
	if (press == false) {
		rifle.mousein (color (255, 0, 0));
	}

	bullets.push (new BulletBase (random (min (width, height) / 8.0, min (width, height) / 4.0), rifler - PI / 2.0, false));

	for (var i = bullets.length-1; i >= 0; i--) {
		bullets[i].update ();
		bullets[i].render ();
		bullets[i].border ();
		if (bullets[i].velocity.mag () < 0.1) {
			bullets.splice (i, 1);
		}
	}

}

function RifleBase () {

	this.update = function () {

		rifler = atan2 (mouseY - rifley, mouseX - riflex) - PI / 2.0;
	}

	this.render = function () {

		push ();
		fill (230);
		stroke (0);
		strokeWeight (4);
		translate (riflex, rifley);
		rect (0.0, -2.0, 60.0, 60.0);
		pop ();

		stroke (0);
		strokeWeight (2);
		rectMode (CENTER);
		push ();
		translate (riflex, rifley);
		rotate (rifler);
		rect (0.0, 0.0, riflew, rifleh);
		rect (0.0, -20.0, 5.0, 10.0);
		pop ();

		if (press == true && riflein == true) {
			push ();
			translate (riflex, rifley);
			line (0.0, 0.0, mouseX - riflex, mouseY - rifley);
			translate (mouseX - riflex, mouseY - rifley);
			rotate (rifler);
			line (-10.0, 0.0, 10.0, 0.0);
			pop ();
			push ();
			translate (riflex, rifley);
			rotate (rifler);
			stroke (0);
			strokeWeight (0.1);
			line (0.0, -25.0, 0.0, -2000.0);
			pop ();
		}

	}

	this.mousein = function (col) {

		if (mouseX > riflex - 30.0 && mouseX < riflex + 30.0) {
			if (mouseY > rifley - 32.0 && mouseY < rifley + 28.0) {
				fill (col);
				riflein = true;
			} else {
				fill (180);
				riflein = false;
			}
		} else {
			fill (180);
			riflein = false;
		}

	}

}

function BulletBase (b_force, b_rad, b_flag) {

	this.location = new p5.Vector (riflex, rifley);
	this.velocity = new p5.Vector (0.0, 0.0);
	this.acceleration = new p5.Vector (0.0, 0.0);
	this.init_force = new p5.Vector (cos (b_rad), sin (b_rad));
	this.init_force.mult (b_force);

	this.update = function () {

		this.init_force.mult (0.2);
		this.acceleration.add (this.init_force);
		this.velocity.add (this.acceleration);
		if (b_flag == true) {
			this.velocity.mult (0.98);
		} else {
			this.velocity.mult (0.92);
		}
		this.location.add (this.velocity);
		this.acceleration.mult (0.0);

	}

	this.render = function () {

		push ();
		translate (this.location.x, this.location.y);
		rotate (b_rad + PI / 2.0);
		noStroke ()
		rectMode (CENTER);
		if (b_flag == true) {
			fill (0);
			rect (0.0, -25.0, b_force / 8.0, b_force / 8.0);
			fill (255, 0, 0);
			rect (0.0, -25.0, b_force / 10.0, b_force / 10.0);
		} else {
			fill (0);
			rect (0.0, -25.0, 10.0, 10.0);
			fill (200);
			rect (0.0, -25.0, 5.0, 5.0);
		}
		pop ();

	}

	this.border = function () {

		if (this.location.x < 0.0) {
			this.location.x = 0.0;
			this.velocity.x *= -1.0;
		}
		if (this.location.y < 0.0) {
			this.location.y = 0.0;
			this.velocity.y *= -1.0;
		}
		if (this.location.x > width) {
			this.location.x = width;
			this.velocity.x *= -1.0;
		}
		if (this.location.y > height) {
			this.location.y = height;
			this.velocity.y *= -1.0;
		}

	}

}

function mousePressed () {

	press = true;

	rifle.mousein (color (255, 0, 0));

}

function mouseReleased () {

	if (press == true && riflein == true) {
		var force = dist (mouseX, mouseY, riflex, rifley);
		var f_rad = rifler - PI / 2.0;
		for (var i = 0; i < int (force); i++) {
			bullets.push (new BulletBase (force, f_rad, true));
		}
	}

	press = false;

	rifle.mousein (color (255));

}

 

Posted in p5.js , processing