<!doctype html>
<html>
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="https://cdn.rawgit.com/daishihmr/bulletml.js/master/build/bulletml.min.js"></script>
</head>
<body>
<textarea id="src" rows="3" cols="60">
<bulletml>
<action label="top">
<repeat>
<times>22</times>
<action>
<fire>
<direction type="aim">-30</direction>
<bullet>
<action>
<changeDirection>
<direction type="sequence">0</direction>
<term>20</term>
</changeDirection>
</action>
</bullet>
</fire>
<repeat>
<times>4</times>
<action>
<fire>
<direction type="sequence">15</direction>
<bullet>
<action>
<changeDirection>
<direction type="sequence">0</direction>
<term>20</term>
</changeDirection>
</action>
</bullet>
</fire>
<wait>3</wait>
</action>
</repeat>
<wait>30</wait>
</action>
</repeat>
</action>
</bulletml>
</textarea>
<input type="submit" value="run" onclick="run()">
<script src="lib/script.js"></script>
</body>
</html>
/* Add your styles here */
var src = document.getElementById("src");
var danmaku0;
var SC_W = 200;
var SC_H = 200;
function run() {
danmaku0 = bulletml.buildXML(src.value);
var scene = new Scene();
var player = new Player().addTo(scene);
var danmakuConfig = {
target: player,
createNewBullet: function(runner, spec) {
var bullet = new Bullet(spec);
bullet.x = runner.x;
bullet.y = runner.y;
runner.onVanish = function() {
bullet.remove();
};
bullet.update = function() {
runner.update();
this.x = runner.x;
this.y = runner.y;
this.areaTest();
};
bullet.addTo(scene);
}
};
var enemyXML = new Hex(40, 30, 15, "hsl(290, 60%, 80%)").addTo(scene);
enemyXML.danmakuRunner = danmaku0.createRunner(danmakuConfig);
enemyXML.update = function(frame) {
this.x = SC_W * .5 - Math.cos(frame * 0.01) * SC_W * .4
this.y = SC_H * .3 - Math.sin(frame * 0.03) * SC_H * .2
this.danmakuRunner.x = this.x;
this.danmakuRunner.y = this.y;
this.danmakuRunner.update();
};
scene.start();
};
var Scene = function() {
var canvas = document.createElement("canvas");
document.body.appendChild(canvas);
canvas.width = SC_W;
canvas.height = SC_H;
canvas.fitWindow();
this.context = canvas.getContext("2d");
this.context.textAlign = "right";
this.context.textBaseline = "top";
this.frame = 0;
this.sceneObjects = [];
};
Scene.prototype.start = function() {
var renderFrame = function() {
this.context.fillStyle = "black";
this.context.globalCompositeOperation = "source-over";
this.context.fillRect(0, 0, SC_W, SC_H);
this.context.globalCompositeOperation = "lighter";
var copied = [].concat(this.sceneObjects);
for (var i = 0, end = copied.length; i < end; i++)
{
copied[i].update(this.frame);
copied[i].draw(this.context);
}
this.context.fillStyle = "white";
this.frame += 1;
requestAnimationFrame(renderFrame);
}.bind(this);
renderFrame();
};
Scene.prototype.addChild = function(obj) {
obj.parent = this;
this.sceneObjects.push(obj);
};
Scene.prototype.removeChild = function(obj) {
obj.parent = null;
this.sceneObjects.erase(obj);
};
var Hex = function(w, h, radius, color) {
this.radius = radius;
this.x = 0;
this.y = 0;
this.color = color || "hsl(0, 60%, 80%)";
this.canvas = document.createElement("canvas");
this.canvas.width = w*2;
this.canvas.height = h*2;
var context = this.canvas.getContext("2d");
context.globalCompositeOperation = "lighter";
context.fillStyle = this.color;
context.translate(w, h);
context.globalAlpha = 1.0;
context.fillHex(w, h);
this.parent = null;
};
Hex.prototype = {
constructor: Hex,
update: function() {
},
draw: function(context) {
context.fillStyle = this.color;
context.save();
context.translate(this.x, this.y);
context.drawImage(this.canvas, -this.canvas.width * .5, -this.canvas.height * .5);
context.restore();
},
addTo: function(parent) {
parent.addChild(this);
return this;
},
remove: function() {
if (this.parent) this.parent.removeChild(this);
return this;
}
};
var Bullet = function(spec) {
Hex.call(this, 8, 8, 2, spec.color);
};
Bullet.prototype = Object.create(Hex.prototype);
Bullet.prototype.areaTest = function() {
if (this.x < 0 || SC_W < this.x || this.y < 0 || SC_H < this.y)
{
this.remove();
return;
}
};
var Player = function() {
Hex.call(this, 10, 10, 5, "hsl(120, 60%, 80%)");
this.x = SC_W * 0.5;
this.y = SC_H * 0.9;
this.speed = 1.5;
};
Player.prototype = Object.create(Hex.prototype);
Player.prototype.update = function(frame) {
if (keyboard.left) this.x -= this.speed;
else if (keyboard.right) this.x += this.speed;
if (keyboard.up) this.y -= this.speed;
else if (keyboard.down) this.y += this.speed;
this.x = Math.max(0, Math.min(this.x, SC_W));
this.y = Math.max(0, Math.min(this.y, SC_H));
};
var keyboard = {
up: false,
down: false,
left: false,
right: false,
};
document.addEventListener("keydown", function(e) {
switch (e.keyCode)
{
case 37:
keyboard.left = true;
break;
case 38:
keyboard.up = true;
break;
case 39:
keyboard.right = true;
break;
case 40:
keyboard.down = true;
break;
}
}, false);
document.addEventListener("keyup", function(e) {
switch (e.keyCode)
{
case 37:
keyboard.left = false;
break;
case 38:
keyboard.up = false;
break;
case 39:
keyboard.right = false;
break;
case 40:
keyboard.down = false;
break;
}
}, false);
Array.prototype.erase = function(obj) {
var idx = this.indexOf(obj);
if (idx !== -1) this.splice(idx, 1);
};
CanvasRenderingContext2D.prototype.fillHex = function(w, h) {
this.beginPath();
this.moveTo(Math.sin(Math.PI / 3 * 0) * w * .5, Math.cos(Math.PI / 3 * 0) * h * .5);
for (var i = 1; i < 6; i++)
{
this.lineTo(Math.sin(Math.PI / 3 * i) * w * .5, Math.cos(Math.PI / 3 * i) * h * .5);
}
this.closePath();
this.fill();
};
HTMLCanvasElement.prototype.fitWindow = function() {
var resize = function() {
var rateWidth = this.width / window.innerWidth;
var rateHeight = this.height / window.innerHeight;
var rate = this.height / this.width;
if (rateWidth > rateHeight)
{
this.style.width = innerWidth + "px";
this.style.height = innerWidth * rate + "px";
}
else
{
this.style.width = innerHeight / rate + "px";
this.style.height = innerHeight + "px";
}
}.bind(this);
window.addEventListener("resize", resize, false);
resize();
};