HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<div id='container'>
<canvas id='c'></canvas>
<ul id='hud'>
<li class='score'>SCORE: <span id='score'>0</span></li>
<li>WEPON: <span id='wepon'>NORMAL BEAM</span></li>
</ul>
<div id='menu'>
<h2 id='title'></h2>
<div id='message'></div>
<a href='#' id='start'>START</a>
</div>
</div>
* {
padding: 0;
margin: 0;
}
body {
background-color: #000000;
color: #fff;
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
}
canvas {
cursor: crosshair;
position: absolute;
}
a {
color: #fff;
text-decoration: none;
cursor: pointer;
}
#menu {
position: absolute;
top: 50%;
margin-top: -45px;
text-align: center;
width: 100%;
}
#start {
font-size: 20px;
font-weight: bold;
}
#title {
font-size: 24px;
margin-bottom: 15px;
}
#message {
font-size: 14px;
margin-bottom: 30px;
}
a#tweet {
color: white;
font-size: 11px;
display: inline-block;
margin-top: 15px;
padding: 5px 10px;
background-color: transparent;
border: 1px solid white;
}
a#tweet:hover {
color: black;
background-color: white;
}
#hud {
position: absolute;
top: 10px;
left: 10px;
list-style: none;
}
#menu, #hud {
-moz-user-select: none;
-webkit-user-select: none;
-khtml-user-select: none;
}
#hud li.score {
width: 120px;
overflow: hidden;
}
#hud li {
float: left;
margin-right: 20px;
}
// Machine translation because I'm not good at English!
//------------------------------------
// CONFIG
//------------------------------------
// デフォルトの武器
// Default weapon
var WEPON_DEFAULT = {
// 武器の名前
// Weapon name
name: 'NORMAL BEAM',
// 与えるダメージ 0~1
// Damage dealt 0 ~ 1
power: 0.3,
// 弾のスピード
// Bullet speed
speed: 3,
// 弾の長さ
// Bullet length
length: 10,
// 弾の幅
// Bullet width
width: 1,
// 弾の色, 特殊武器の場合アイテムの色に反映される, CSS カラーで指定
// The color of the bullet, in the case of special weapons, reflected in the color of the item, specified by CSS color
color: 'white',
// 連射速度
// Fire rate
shootingInterval: 1000 * 0.35,
// 貫通弾か示す
// true の場合着弾しても消滅しない
// explosion を指定した場合はそちらが優先される
// Indicates whether the bullet
// If true, will not disappear even if it lands
// If explosion is specified, it takes precedence.
through: false,
// 爆発による着弾後の範囲攻撃
// 以下のプロパティを持つオブジェクトで指定する
// { range: 爆発範囲, speed: 爆発の速度 }
// * 範囲攻撃の威力は武器の基本威力の半分
// Range attack after landing due to explosion
// Specify with an object that has the following properties:
// { range: Explosion range, speed: Explosion speed }
// * The power of range attacks is half the basic power of weapons
explosion: false
};
// 特殊武器の配列, UFO を撃破するとランダムで出現する
// Special weapon array, Randomly appear when you destroy a UFO
var WEPON_SPECIAL = [
{
name: 'TINY BEAM',
power: 0.1,
speed: 10,
length: 5,
width: 1,
color: 'rgb(131, 224, 8)',
shootingInterval: 1000 * 0.1,
through: false,
explosion: false
},
{
name: 'BLASTER',
power: 1,
speed: 3,
length: 15,
width: 3,
color: 'rgb(244, 0, 122)',
shootingInterval: 1000 * 0.3,
through: false,
explosion: false
},
{
name: 'LASER',
power: 0.2,
speed: 35,
length: 200,
width: 2,
color: 'rgb(138, 227, 252)',
shootingInterval: 1000 * 0.6,
through: true,
explosion: false
},
{
name: 'EXPLOSION BEAM',
power: 0.15,
speed: 15,
length: 10,
width: 2,
color: 'rgb(255, 153, 0)',
shootingInterval: 1000 * 0.5,
through: false,
explosion: {
range: 100,
speed: 4.5
}
}/*
,{
name: 'INSANE BEAM',
power: 0.035,
speed: 7.5,
length: 5,
color: 'rgb(255, 246, 0)',
width: 2,
shootingInterval: 1000 * 0.015,
through: true,
explosion: false,
explosion: {
range: 75,
speed: 2
}
}//*/
];
var ASTEROID_MAX_SIZE = 80; // 小惑星の最大サイズ
var ASTEROID_MIN_SIZE = 5; // 小惑星の最小サイズ
var ASTEROID_MAX_NUM = 75; // 小惑星の最大数
var ASTEROID_SPAWN_TIME = 350; // 小惑星の復活時間
var SHIP_SPEED = 1.5; // 自機のスピード
var UFO_SPEED = 2; // UFO のスピード
var ITEM_SPEED = 0.5; // アイテムのスピード
// UFO の出現率 0~1
var UFO_INCIDENCE = 0.0035;
// 特殊武器の持続時間
var SPECIAL_WEPON_TIME = 1000 * 20;
// 各種スコア
var SCORE = {
ASTEROID_DAMAGE: 10,
ASTEROID_DESTROY: 50,
UFO_DAMAGE: 0,
UFO_DESTROY: 300
}
//------------------------------------
// CONSTANTS
//------------------------------------
var PI = Math.PI;
var TWO_PI = PI * 2;
var DEG_TO_RAD = PI / 180;
var FPS = 60;
//------------------------------------
// VARS
//------------------------------------
var canvas;
var canvasWidth;
var canvasHeight;
var context;
var mouse;
var isMouseDown = false;
var ship; // Ship
var beams; // Collection of Beam
var asteroids; // Collection of Asteroid
var splinters; // Collection of Splinter
var debris; // Collection of Debri
var ufo; // Ufo
var item; // Item
var asteroidLastSpawn = 0; // 小惑星が最後に復活した時間
var ufoLastSpawn = 0; // UFO が最後に復活した時間
var debriLastSpawn = 0; // 背景の星屑が最後に出現した時間
var fieldRange; // フィールドの範囲
var score = 0; // スコア
var isPlay = false; // ゲームが開始されているか示す
var dom = {
menu: null,
title: null,
message: null,
tweet: null,
start: null,
score: null,
wepon: null
}
//------------------------------------
// INITIALIZE
//------------------------------------
function init() {
canvas = document.getElementById('c');
fieldRange = new Range();
window.addEventListener('resize', resize, false);
resize();
mouse = new Point();
dom.menu = document.getElementById('menu');
dom.title = document.getElementById('title');
dom.message = document.getElementById('message');
dom.start = document.getElementById('start');
dom.score = document.getElementById('score');
dom.wepon = document.getElementById('wepon');
dom.start.addEventListener('click', start, false);
canvas.addEventListener('mousemove', mouseMove, false);
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('click', click, false);
canvas.addEventListener('touchmove', touchMove, false);
canvas.addEventListener('touchstart', mouseDown, false);
canvas.addEventListener('touchend', mouseUp, false);
debris = new Collection();
for (var i = 0; i < 30; i++) {
debris.push(new Debri(randInt(canvasWidth)));
}
setInterval(loop, 1000 / FPS);
}
//------------------------------------
// EVENT HANDLERS
//------------------------------------
function resize(e) {
canvas.width = canvasWidth = fieldRange.right = window.innerWidth;
canvas.height = canvasHeight = fieldRange.bottom = window.innerHeight;
context = canvas.getContext('2d');
context.fillStyle = 'white';
context.strokeStyle = 'white';
context.lineWidth = 1;
}
function start(e) {
play();
dom.menu.style.display = 'none';
e.preventDefault();
}
function mouseMove(e) { mouse.set(e.clientX, e.clientY); }
function touchMove(e) { mouse.set(e.touches[0].clientX, e.touches[0].clientY); console.log(e.touches[0].clientX, e.touches[0].clientY) }
function mouseDown(e) { isMouseDown = true; }
function mouseUp(e) { isMouseDown = false; }
function click(e) { if (ship) ship.fire(beams); }
//------------------------------------
// FRAME LOOP
//------------------------------------
function loop() {
context.clearRect(0, 0, canvasWidth, canvasHeight);
var now = new Date().getTime();
// Spawn Debri
if (now - debriLastSpawn > 300) {
debris.push(new Debri(canvasWidth));
debriLastSpawn = now;
}
// Debri update
debris.eachUpdate();
if (isPlay) {
// Spawn
if (now - asteroidLastSpawn > ASTEROID_SPAWN_TIME && asteroids.length < ASTEROID_MAX_NUM) {
asteroids.push(Asteroid.spawn());
asteroidLastSpawn = now;
}
if (!ufo && !item && Math.random() < UFO_INCIDENCE) {
ufo = Ufo.spawn();
}
// Update
if (ship) {
if (isMouseDown) ship.fire(beams);
ship.update(mouse);
}
if (ufo) {
ufo.update();
if (ufo.vanished) {
item = new Item(ufo.x, ufo.y);
ufo = null;
} else if (hitDetection(ufo, ship)) {
gameOver();
}
}
if (item) {
item.update();
if (item.vanished) {
item = null;
} else if (hitDetection(item, ship)) {
ship.setSpecialWepon(item.wepon);
item = null;
}
}
beams.eachUpdate(function(index, beam) {
for (var i = 0; i < asteroids.length; i++) {
asteroid = asteroids[i];
if (hitDetection(beam, asteroid)) {
score += asteroid.damage(beam.power, splinters);
beam.notifyHit();
}
}
if (ufo && hitDetection(beam, ufo)) {
score += ufo.damage(beam.power, splinters);
beam.notifyHit();
}
});
asteroids.eachUpdate(function(index, asteroid) {
if (hitDetection(asteroid, ship)) {
gameOver();
}
});
splinters.eachUpdate();
// Display
dom.wepon.innerHTML = ship.currentWepon.name;
dom.score.innerHTML = score;
}
// Draw
context.beginPath();
context.strokeStyle = 'rgb(255, 255, 255)';
context.lineWidth = 1;
if (ship) ship.draw(context);
if (ufo) ufo.draw(context);
if (asteroids) asteroids.eachDraw(context);
context.stroke();
// Beam は個別に描画
if (beams) beams.eachDraw(context);
if (item) {
context.beginPath();
context.strokeStyle = item.wepon.color;
context.lineWidth = 1;
item.draw(context);
context.stroke();
}
context.beginPath();
context.fillStyle = 'rgb(255, 255, 255)';
if (splinters) splinters.eachDraw(context);
if (debris) debris.eachDraw(context);
// Game over
if (ship && ship.died) {
ship.update();
ship.splinter.draw(context);
}
context.fill();
}
//------------------------------------
// FUNCTIONS
//------------------------------------
function play() {
ship = new Ship(canvasWidth / 2, canvasHeight / 2, 8);
mouse.set(ship.x, ship.y);
beams = new Collection();
asteroids = new Collection();
splinters = new Collection();
ufo = null;
item = null;
score = 0;
isMouseDown = false;
isPlay = true;
}
function gameOver() {
ship.destroy();
isPlay = false;
dom.title.innerHTML = 'GAME OVER!';
dom.message.innerHTML = 'YOUR SCORE ' + score + ' POINTS<br />';
dom.message.appendChild(tweetLink());
dom.menu.style.display = 'block';
}
function tweetLink() {
var exc = score < 1000 ? '...' : score > 3000 ? '!!!' : '!';
if (!dom.tweet) {
dom.tweet = document.createElement('a');
dom.tweet.id = 'tweet';
dom.tweet.innerHTML = 'TWEET YOUR SCORE';
}
dom.tweet.href = 'https://twitter.com/intent/tweet?url=https://codepen.io/akm2/pen/eYYyELr&text=SCORE ' + score + ' PTS' + exc + ' - ASTEROIDS';
dom.tweet.target = '_blank';
return dom.tweet;
}
// パスの衝突判定を行う
// 引数に指定するオブジェクトは path プロパティから Path オブジェクトが参照可能であること
// Perform path collision detection
// The object specified in the argument can be referenced from the path property.
function hitDetection(a, b) {
var ap = a.path, bp = b.path;
var as, bs; // Segments
var a1, a2, b1, b2; // Points
for (i = 0, ilen = ap.segmentNum(); i < ilen; i++) {
as = ap.segment(i);
a1 = as[0];
a2 = as[1];
for (j = 0, jlen = bp.segmentNum(); j < jlen; j++) {
bs = bp.segment(j);
b1 = bs[0];
b2 = bs[1];
if (intersection(a1, a2, b1, b2)) return true;
}
}
return false;
}
// hitDetection で使用される直線の交差判定
// 交差しているなら true
// Straight line intersection detection used in hitDetection
// True if they intersect
function intersection(a1, a2, b1, b2) {
var ax = a2.x - a1.x, ay = a2.y - a1.y;
var bx = b2.x - b1.x, by = b2.y - b1.y;
return (ax * (b1.y - a1.y) - ay * (b1.x - a1.x)) *
(ax * (b2.y - a1.y) - ay * (b2.x - a1.x)) <= 0 &&
(bx * (a1.y - b1.y) - by * (a1.x - b1.x)) *
(bx * (a2.y - b1.y) - by * (a2.x - b1.x)) <= 0;
}
//------------------------------------
// UTILS
//------------------------------------
function extend() {
var target = arguments[0] || {}, o, p;
for (var i = 1, len = arguments.length; i < len; i++) {
o = arguments[i];
if (!isObject(o) || isNull(o)) continue;
for (p in o) {
target[p] = o[p];
}
}
return target;
};
function randUniform(max, min) {
if (min === undefined) min = 0;
return Math.random() * (max - min) + min;
};
function randInt(max, min) {
if (min === undefined) min = 0;
return Math.floor(Math.random() * (max - min + 1) + min);
};
isObject = function(value) {
return typeof value === 'object' && value !== null;
};
isNumber = function(value) {
return typeof value === 'number';
};
isNumeric = function(value) {
return !isNaN(value) && isFinite(value);
};
isString = function(value) {
return typeof value === 'string';
};
isFunction = function(value) {
return typeof value === 'function';
};
isArray = function(value) {
return Object.prototype.toString.call(value) === '[object Array]';
};
isNull = function(value) {
return value === null;
};
isUndefined = function(value) {
return typeof value === 'undefined';
};
//------------------------------------
// CLASSES
//------------------------------------
/**
* Collection
*
* @super Array
*/
function Collection() {
for (var i = 0, len = arguments.length; i < len; i++) {
this.push(arguments[i]);
}
}
Collection.prototype = extend([], {
eachUpdate: function(callback) {
for (var i = 0, len = this.length, item; i < len; i++) {
item = this[i];
if (item.vanished) {
this.splice(i, 1);
len--;
i--;
continue;
}
item.update();
if (callback) callback.call(this, i, item);
}
},
eachDraw: function(ctx) {
for (var i = 0, len = this.length; i < len; i++) {
this[i].draw(ctx);
}
}
})
/**
* Path
*
* @super Array
*/
function Path(points, closed) {
if (isArray(points)) {
for (var i = 0, len = points.length; i < len; i++) {
this.push(points[i]);
}
}
this.closed = isUndefined(closed) ? true : closed;
}
Path.prototype = extend([], {
closed: true,
segment: function(index) {
if (index > this.segmentNum()) return null;
return [
this[index],
this[index === this.length - 1 ? 0 : index + 1]
];
},
segmentNum: function() {
return this.closed ? this.length : this.length - 1;
},
eachSegments: function(callback) {
for (var i = 0, len = this.segmentNum(); i < len; i++) {
if (callback.call(this, this.segment(i), i) === false) break;
}
},
eachPoints: function(callback) {
for (var i = 0, len = this.length; i < len; i++) {
if (callback.call(this, this[i], i) === false) break;
}
},
draw: function(ctx) {
this.eachPoints(function(p, i) {
ctx[i === 0 ? 'moveTo' : 'lineTo'](p.x, p.y);
});
if (this.closed && this.length > 2) {
var p = this[0];
ctx.lineTo(p.x, p.y);
}
}
});
/**
* Point
*/
function Point(x, y) {
this.set(x, y);
};
Point.interpolate = function(p1, p2, f) {
var dx = p2.x - p1.x,
dy = p2.y - p1.y;
return new Point(p1.x + dx * f, p1.y + dy * f);
};
Point.polar = function(length, angle) {
return new Point(length * Math.cos(angle), length * Math.sin(angle));
};
Point.prototype = {
set: function(x, y) {
if (isObject(x)) {
y = x.y;
x = x.x;
}
this.x = x || 0;
this.y = y || 0;
return this;
},
offset: function(x, y) {
this.x += x || 0;
this.y += y || 0;
return this;
},
add: function(p) {
this.x += p.x;
this.y += p.y;
return this;
},
sub: function(p) {
this.x -= p.x;
this.y -= p.y;
return this;
},
scale: function(scale) {
this.x *= scale;
this.y *= scale;
return this;
},
length: function() {
return Math.sqrt(this.x * this.x + this.y * this.y);
},
lengthSq: function() {
return this.x * this.x + this.y * this.y;
},
normalize: function(thickness) {
if (isUndefined(thickness)) thickness = 1;
var len = Math.sqrt(this.x * this.x + this.y * this.y);
var nx = 0, ny = 0;
if (len) {
nx = this.x / len;
ny = this.y / len;
}
this.x = nx * thickness;
this.y = ny * thickness;
return this;
},
angle: function() {
return Math.atan2(this.y, this.x);
},
angleTo: function(p) {
var dx = p.x - this.x,
dy = p.y - this.y;
return Math.atan2(dy, dx);
},
distanceTo: function(p) {
var dx = this.x - p.x,
dy = this.y - p.y;
return Math.sqrt(dx * dx + dy * dy);
},
distanceToSq: function(p) {
var dx = this.x - p.x,
dy = this.y - p.y;
return dx * dx + dy * dy;
},
negate: function() {
this.x *= -1;
this.y *= -1;
return this;
},
eq: function(p) {
return this.x === p.x && this.y === p.y;
},
isEmpty: function() {
return !this.x && !this.y;
},
clone: function() {
return new Point(this.x, this.y);
},
toArray: function() {
return [this.x, this.y];
},
toString: function() {
return '(x:' + this.x + ', y:' + this.y + ')';
}
};
/**
* Range
*/
function Range(left, right, top, bottom) {
this.left = left || 0;
this.right = right || 0;
this.top = top || 0;
this.bottom = bottom || 0;
}
Range.prototype = {
contains: function(x, y, inflate) {
if (!inflate) inflate = 0;
return x > this.left - inflate && x < this.right + inflate
&& y > this.top - inflate && y < this.bottom + inflate;
}
};
/**
* Ship
*
* @super Point
*/
function Ship(x, y, size) {
Point.call(this, x, y);
this.size = size; // 船のサイズ
this.currentWepon = WEPON_DEFAULT;
// 前回の位置, 弾の射出時にのせるスピードを算出する
// Calculate the speed at the time of the previous position and bullet firing
this.latest = this.clone();
this.path = new Path();
// 基準点を示すパス, path の回転の基準とする
// A path indicating a reference point, used as a reference for rotation of path
this._referencePath = new Path();
this.v = new Point(); // 移動ベクトル
// 船体の描画点を作成
// Create hull drawing points
var d = [0, 140, 180, 220], c, r, p;
for (var i = 0, len = d.length; i < len; i++) {
c = DEG_TO_RAD * d[i],
r = i === 2 ? this.size / 2 : this.size;
p = Point.polar(r, c).add(this);
this.path.push(p);
this._referencePath.push(p.clone());
}
}
Ship.prototype = extend(new Point(), {
angle: 0, // 自機の向き
possibleShooting: true, // ビームの射出が可能か示す
specialWeponSetTime: 0, // 特殊武器を設定した時間
died: false, // 自機が破壊されているか示す
splinter: null, // 自機の破片
// 特殊武器を設定する
setSpecialWepon: function(wepon) {
this.specialWeponSetTime = new Date().getTime();
this.currentWepon = wepon;
},
// 自機の破壊, died フラグをたてて自機破片用の Splinter を作成する
destroy: function() {
this.died = true;
this.splinter = new Splinter(this.x, this.y, 100, 100);
},
// ビームを射出, 射出が可能な場合は引数で渡された Collection に Beam を追加する
// Beam is emitted, and if injection is possible, Beam is added to the Collection passed as an argument
fire: function(beams) {
if (!this.possibleShooting) return false;
this.possibleShooting = false;
var p = Point.polar(this.size, this.angle).add(this);
var beam = new Beam(p.x, p.y, this.angle, this.currentWepon);
// 自機のスピードをのせる
// Put your own speed
var currentSpeed = this.latest.distanceTo(this);
if (currentSpeed > SHIP_SPEED) currentSpeed = SHIP_SPEED;
beam.speed += currentSpeed;
var self = this;
setTimeout(function() { self.possibleShooting = true; }, beam.shootingInterval);
beams.push(beam);
},
update: function(mouse) {
if (this.died) {
// 破壊されているなら破片を更新
this.splinter.update();
return;
}
this.latest.set(this);
var v = this.v.set(mouse).sub(this);
var vlen = v.length();
if (vlen > SHIP_SPEED) v.normalize(SHIP_SPEED);
// マウス直前まで移動
var i, len;
if (vlen > this.size + 10) {
this.add(v);
for (i = 0, len = this.path.length; i < len; i++) {
this._referencePath[i].add(v);
}
}
var angle = this.angle = v.angle();
var cos = Math.cos(angle);
var sin = Math.sin(angle);
var p, rp, dx, dy;
for (i = 0, len = this.path.length; i < len; i++) {
p = this.path[i];
rp = this._referencePath[i];
dx = rp.x - this.x;
dy = rp.y - this.y;
p.x = this.x + dx * cos - dy * sin;
p.y = this.y + dx * sin + dy * cos;
}
if (new Date().getTime() - this.specialWeponSetTime > SPECIAL_WEPON_TIME) {
this.currentWepon = WEPON_DEFAULT;
}
},
draw: function(ctx) {
if (!this.died) this.path.draw(ctx);
}
});
/**
* Beam
*
* @super Point
*/
function Beam(x, y, angle, wepon) {
Point.call(this, x, y);
this.angle = angle;
// 線が短かったり移動が速い場合に当たり判定がとれずにすり抜けてしまう問題を解決するため
// 当たり判定用の path は前回の後尾位置と現在の先頭位置をとり, 描画用のパスは renderPath とする
// In order to solve the problem that the hit judgment can not be taken when the line is short or the movement is fast
// The path for hit detection takes the last position and the current start position, and render path is renderPath
this.path = new Path([this, this.clone()], false);
this.renderPath = new Path([this, this.clone()], false);
extend(this, wepon || WEPON_DEFAULT);
}
Beam.prototype = extend(new Point(), {
releaseCompleted: false, // 射出完了フラグ
vanished: false, // 消失フラグ
exploding: false,
notifyHit: function() {
if (this.explosion) {
if (!this.exploding) {
this.power *= 0.5;
this.width = 1;
this.path = this.renderPath = new ExplosionPath(this.x, this.y, this.explosion);
this.exploding = true;
}
} else if (!this.through) {
this.vanished = true;
}
},
update: function() {
if (this.vanished) return;
if (this.exploding) {
this.path.update(); // Explosion update
if (this.path.complete) this.vanished = true;
return;
}
var v = Point.polar(this.speed, this.angle);
var renderTail = this.renderPath[1];
// 画面外に出たら消失
if (!fieldRange.contains(renderTail.x, renderTail.y)) {
this.vanished = true;
return;
}
// 前回の後尾位置をとる
this.path[1].set(renderTail);
// 先頭位置を移動
this.add(v);
// 射出の判定を行って描画用パスを更新する, 射出が完了するまでは後尾の座標は移動しない
// 射出の判定を行って描画用パスを更新する, 射出が完了するまでは後尾の座標は移動しない
if (this.releaseCompleted) {
// 射出が完了しているなら後尾を移動
renderTail.add(v);
} else {
// Update the drawing path by determining the injection, and the tail coordinate does not move until the injection is completed
this.releaseCompleted = this.distanceTo(renderTail) > this.length;
if (this.releaseCompleted) {
renderTail.set(Point.polar(this.length, this.angle - PI).add(this));
}
}
},
draw: function(ctx) {
ctx.beginPath();
ctx.strokeStyle = this.color;
ctx.lineWidth = this.width;
this.renderPath.draw(ctx);
ctx.stroke();
}
});
/**
* Explosion
*
* @super Path
*/
function ExplosionPath(x, y, options) {
this.x = x;
this.y = y;
extend(this, options);
}
ExplosionPath.prototype = extend(new Path(), {
currentRange: 0,
complete: false,
update: function() {
if (this.complete) return;
this.currentRange += this.speed * 2;
if (this.currentRange > this.range) {
this.currentRange = this.range;
this.complete = true;
}
for (var i = 0, p; i < 10; i++) {
p = Point.polar(this.currentRange / 2, TWO_PI / 10 * i).add(this);
// 配列を継承したクラスの場合番地を直接指定しての挿入では length がうまく反映されないので最初は push を使用する
// In the case of a class that inherits an array, the length is not reflected well in the insertion by specifying the address directly, so push is used first
if (!this[i]) {
this.push(p);
} else {
this[i] = p;
}
}
}
});
/**
* Asteroid
*
* @super Point
*/
function Asteroid(x, y, radius, angle) {
Point.call(this, x, y);
this.radius = radius; // 最大半径
this.angle = angle; // 進行方向の角度
this.make();
}
// ランダムなパラメータを与えられた新しい Asteroid オブジェクトを返す
// 出現場所は画面外で画面内へ侵入する進行角度を持つ
// Returns a new Asteroid object with random parameters
// Appearance location has a traveling angle to enter the screen outside the screen
Asteroid.spawn = function() {
var side = randInt(3); // 出現位置をランダムに決定
var angle = randUniform(PI * 0.5);
var x, y;
// 0: Left, 1: Right
if (side === 0 || side === 1) {
y = randUniform(canvasHeight + ASTEROID_MAX_SIZE, -ASTEROID_MAX_SIZE);
x = (side === 0) ? - ASTEROID_MAX_SIZE : canvasWidth + ASTEROID_MAX_SIZE;
angle = (side === 0) ? angle - PI * 0.25 : angle + PI * 0.75;
}
// 2: Top, 3: Bottom
else {
x = randUniform(canvasWidth + ASTEROID_MAX_SIZE, -ASTEROID_MAX_SIZE);
y = (side === 2) ? - ASTEROID_MAX_SIZE : canvasHeight + ASTEROID_MAX_SIZE;
angle = (side === 2) ? angle + PI * 0.25 : angle - PI * 0.75;
}
// Asteroid.MIN_SIZE ~ ASTEROID_MAX_SIZE の間でランダム
var radius = randUniform(ASTEROID_MAX_SIZE, ASTEROID_MIN_SIZE);
return new Asteroid(x, y, radius, angle);
};
Asteroid.prototype = extend(new Point(), {
vanished: false,
make: function() {
this.v = Point.polar(1, this.angle);
this.v.normalize((1 - this.radius / ASTEROID_MAX_SIZE) * 1.75 + 0.25);
this.path = new Path();
for (var i = 0, num = 12, radius; i < num; i++) {
radius = randUniform(this.radius, this.radius * 0.5);
this.path.push(Point.polar(radius, TWO_PI * i / num).add(this));
}
},
// 与えられた damage 分半径を小さくする, ASTEROID_MIN_SIZE を下回った場合消失
// damage は 1 までの割合で指定, ASTEROID_MAX_SIZE の係数としてダメージの割合を表現する
// 引数で渡された Collection に小惑星の大きさを反映した Splinter を追加する
// Decrease radius by given damage, disappear if it falls below ASTEROID_MIN_SIZE
// damage is specified as a ratio up to 1, and the damage ratio is expressed as a coefficient of ASTEROID_MAX_SIZE
// Add a Splinter that reflects the size of the asteroid to the Collection passed as an argument
damage: function(damage, splinters) {
if (damage <= 0) return;
if (damage > 1) damage = 1;
var radiusTemp = this.radius;
var debrisNum = Math.round(32 * damage);
var score = SCORE.ASTEROID_DAMAGE;
this.radius -= ASTEROID_MAX_SIZE * damage;
if (this.radius < ASTEROID_MIN_SIZE) {
// ASTEROID_MIN_SIZE を下回るなら消失
this.vanished = true;
score = SCORE.ASTEROID_DESTROY;
} else {
// 進行角度を最大 30 度ずらす
this.angle += DEG_TO_RAD * randUniform(30, -30);
this.make();
}
splinters.push(new Splinter(this.x, this.y, radiusTemp, debrisNum));
return score;
},
update: function() {
if (this.vanished) return;
// 画面外に出たら消失
if (!fieldRange.contains(this.x, this.y, ASTEROID_MAX_SIZE + 10)) {
this.vanished = true;
return;
}
var v = this.v;
this.add(v);
this.path.eachPoints(function(p, i) { p.add(v); });
},
draw: function(ctx) {
this.path.draw(ctx);
}
});
/**
* Ufo
*
* @super Point
*/
function Ufo(x, y) {
Point.call(this, x, y);
var P = function(px, py) {
return new Point(x + px, y + py);
};
this.path = new Path([
P(-4.5, -5),
P(4.5, -5),
P(7, 0), // 2
P(15, 4.5), // 3
P(7, 9),
P(-7, 9),
P(-15, 4.5), // 6
P(-7, 0) // 7
]);
this.destination = new Point(randUniform(canvasWidth), randUniform(canvasHeight));
this.v = new Point();
}
// ランダムなパラメータを与えられた新しい Ufo オブジェクトを返す
Ufo.spawn = function() {
var x, y, side = randInt(3); // 出現位置をランダムに決定
// 0: Left, 1: Right
if (side === 0 || side === 1) {
y = randUniform(canvasHeight + 30, -30);
x = (side === 0) ? - 30 : canvasWidth + 30;
}
// 2: Top, 3: Bottom
else {
x = randUniform(canvasWidth + 30, -30);
y = (side === 2) ? - 30 : canvasHeight + 30;
}
return new Ufo(x, y);
};
Ufo.prototype = extend(new Point(), {
vanished: false,
hp: 100, // UFO の HP
damagedBlink: 0, // ダメージ時の点滅表現のフレームカウント用
damage: function(damage, splinters) {
if (damage <= 0) return;
if (damage > 1) damage = 1;
var splinterRadius = 10;
var splinterNum = 5;
var score = SCORE.UFO_DAMAGE;
this.hp -= damage * 100;
if (this.hp <= 0) {
this.vanished = true;
splinterRadius = 25;
splinterNum = 20;
score = SCORE.UFO_DESTROY;
}
splinters.push(new Splinter(this.x, this.y, splinterRadius, splinterNum));
// 4 フレームごとに 1 回 で 10 回点滅
this.damagedBlink = 40;
return score;
},
update: function() {
var v = this.v;
var destination = this.destination;
v.set(destination).sub(this);
var dist = v.length();
if (dist > UFO_SPEED) {
v.normalize(UFO_SPEED);
} else if (dist < 0.1) {
destination.set(randUniform(canvasWidth), randUniform(canvasHeight));
}
this.add(v);
this.path.eachPoints(function(p, i) { p.add(v); });
},
draw: function(ctx) {
if (this.damagedBlink) {
var off = this.damagedBlink % 4 === 0;
this.damagedBlink--;
if (off) return;
}
var path = this.path;
path.draw(ctx);
// 内側のライン
var a1 = path[2], a2 = path[7];
ctx.moveTo(a1.x, a1.y);
ctx.lineTo(a2.x, a2.y);
var b1 = path[3], b2 = path[6];
ctx.moveTo(b1.x, b1.y);
ctx.lineTo(b2.x, b2.y);
}
});
/**
* Item
*
* @super Point
*/
function Item(x, y) {
Point.call(this, x, y);
var path = this.path = new Path();
var d = TWO_PI / 6;
for (var i = 0; i < 6; i++) {
path.push(Point.polar(10, d * i).add(this));
}
this.wepon = WEPON_SPECIAL[randInt(WEPON_SPECIAL.length - 1)];
this.v = Point.polar(ITEM_SPEED, randUniform(TWO_PI));
}
Item.prototype = extend(new Point(), {
update: function() {
var v = this.v;
this.add(v);
this.path.eachPoints(function(p, i) { p.add(v); });
// 画面外に出たら消失
if (!fieldRange.contains(this.x, this.y, 20)) {
this.vanished = true;
return;
}
},
draw: function(ctx) {
this.path.draw(ctx);
// 対角線を描画
this.path.eachPoints(function(p, i) {
if (i === 3) return false;
ctx.moveTo(p.x, p.y);
var p2 = this[i + 3];
ctx.lineTo(p2.x, p2.y);
});
}
});
/**
* Splinter
*
* @super Point
*/
function Splinter(x, y, radius, num) {
Point.call(this, x, y);
var values = this._values = [];
for (var i = 0; i < num; i++) {
values.push({
x: x, y: y,
angle: randUniform(TWO_PI),
radius: randUniform(radius),
dist: Math.random()
});
}
this._time = new Date().getTime();
}
Splinter.prototype = extend(new Point(), {
vanished: false,
update: function() {
var o, c, r, x, y;
for (var i = 0, len = this._values.length; i < len; i++) {
o = this._values[i];
c = o.angle;
r = o.radius;
x = o.x = Math.round(this.x + r * Math.cos(c));
y = o.y = Math.round(this.y + r * Math.sin(c));
// 画面外に出たら消失
if (!fieldRange.contains(x, y)) {
this._values.splice(i, 1);
len--;
i--;
continue;
}
this._values[i].radius += o.dist;
}
// 破片が全て画面外に消失しているか, 発生から指定時間が経過しているなら消失
this.vanished = this._values.length === 0 || new Date().getTime() - this._time > 1000 * 7;
},
draw: function(ctx) {
for (var i = 0, len = this._values.length, o; i < len; i++) {
o = this._values[i];
ctx.rect(o.x, o.y, 1, 1);
}
}
});
/**
* Debri
*
* @super Point
*/
function Debri(x) {
Point.call(this, x, randInt(canvasHeight));
this.speed = randUniform(2, 0.5);
}
Debri.prototype = extend(new Point(), {
vanished: false,
update: function() {
if (this.vanished) return;
// 画面外に出たら消失
if (this.x < 0) {
this.vanished = true;
return;
}
this.x = Math.round(this.x - this.speed);
},
draw: function(ctx) {
ctx.rect(this.x, this.y, 1, 1);
}
});
// Init
window.addEventListener('load', init, false);
Also see: Tab Triggers