Asteroids
How do I make an asteroids?
The classic asteroids. What is a asteroids? How do you make a asteroids? This script and codes were developed by Aitor on 16 September 2022, Friday.
Asteroids - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Asteroids</title> <link href='https://fonts.googleapis.com/css?family=Stalinist+One' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas width="400" height="400"></canvas> <script src="js/index.js"></script>
</body>
</html>
Asteroids - Script Codes CSS Codes
html,
body { background: #000; color: #fff; padding: 0; margin: 0; overflow: hidden;
}
Asteroids - Script Codes JS Codes
"use strict";
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var canvas = document.querySelector("canvas"), context = canvas.getContext("2d"), entities = [];
var QuadNode = function () { function QuadNode(rect) { var level = arguments.length <= 1 || arguments[1] === undefined ? 0 : arguments[1]; _classCallCheck(this, QuadNode); this.rect = rect; this.level = level; this.objects = []; this.topLeft = null; this.topRight = null; this.bottomLeft = null; this.bottomRight = null; } QuadNode.prototype.subdivide = function subdivide() { return this.createTopLeft().createTopRight().createBottomLeft().createBottomRight(); }; QuadNode.prototype.createTopLeft = function createTopLeft() { if (!this.topLeft) { var rect = this.rect.clone(); this.topLeft = new QuadNode(rect.scale(0.5, 0.5), this.level + 1); } return this; }; QuadNode.prototype.createTopRight = function createTopRight() { if (!this.topRight) { var rect = this.rect.clone(); this.topRight = new QuadNode(rect.scale(0.5, 0.5).translateX(rect.width), this.level + 1); } return this; }; QuadNode.prototype.createBottomLeft = function createBottomLeft() { if (!this.bottomLeft) { var rect = this.rect.clone(); this.bottomLeft = new QuadNode(rect.scale(0.5, 0.5).translateY(rect.height), this.level + 1); } return this; }; QuadNode.prototype.createBottomRight = function createBottomRight() { if (!this.bottomRight) { var rect = this.rect.clone(); this.bottomRight = new QuadNode(rect.scale(0.5, 0.5).translate(rect.width, rect.height), this.level + 1); } return this; }; return QuadNode;
}();
var Key = function () { var keys = new Array(256); function handleKey(e) { keys[e.keyCode] = e.type === "keydown"; } window.addEventListener("keyup", handleKey); window.addEventListener("keydown", handleKey); return { SPACE: 32, LEFT: 37, UP: 38, RIGHT: 39, DOWN: 40, isDown: function isDown(key) { return keys[key]; }, isUp: function isUp(key) { return !this.isDown(key); } };
}();
var Random = function () { var MULTIPLIER = 1103515245, INCREMENT = 12345, MODULUS = Math.pow(2, 31); function lcg(value) { var multiplier = arguments.length <= 1 || arguments[1] === undefined ? MULTIPLIER : arguments[1]; var increment = arguments.length <= 2 || arguments[2] === undefined ? INCREMENT : arguments[2]; var modulus = arguments.length <= 3 || arguments[3] === undefined ? MODULUS : arguments[3]; return (value * multiplier + increment) % modulus; } var _value = 0; return { value: function value() { _value = lcg(_value);return _value / MODULUS; }, float: function float(min, max) { return min + this.value() * (max - min); }, int: function int(min, max) { return Math.round(this.float(min, max)); }, unit: function unit(v) { return this.float(-v, v); } };
}();
var Time = function () { function Time(now, duration) { _classCallCheck(this, Time); this.reset(now); this.duration = duration; } Time.prototype.reset = function reset(now) { this.start = this.current = now; }; Time.prototype.update = function update(now) { this.current = now; return this.current - this.start > this.duration; }; return Time;
}();
var Line = function () { Line.sideOf = function sideOf(start, end, point) { return (end.x - start.x) * (point.y - start.y) - (end.y - start.y) * (point.x - start.x); }; function Line(start, end) { _classCallCheck(this, Line); this.start = start; this.end = end; } return Line;
}();
var Rect = function () { Rect.isIn = function isIn(x, y, l, t, r, b) { return x > l && y > t && x < r && y < b; }; function Rect(x, y, width, height) { _classCallCheck(this, Rect); this.x = x; this.y = y; this.width = width; this.height = height; } Rect.prototype.translateX = function translateX(v) { this.x += v;return this; }; Rect.prototype.translateY = function translateY(v) { this.y += v;return this; }; Rect.prototype.translate = function translate(x, y) { return this.translateX(x).translateY(y); }; Rect.prototype.position = function position(x, y) { this.x = x; this.y = y; return this; }; Rect.prototype.size = function size(x, y) { this.width = x; this.height = y; return this; }; Rect.prototype.set = function set(x, y, width, height) { this.x = x; this.y = y; this.width = width; this.height = height; return this; }; Rect.prototype.scaleX = function scaleX(v) { this.width *= v;return this; }; Rect.prototype.scaleY = function scaleY(v) { this.height *= v;return this; }; Rect.prototype.scale = function scale(x, y) { return this.scaleX(x).scaleY(y); }; Rect.prototype.clone = function clone() { return new Rect(this.x, this.y, this.width, this.height); }; _createClass(Rect, [{ key: "top", get: function get() { return this.y; } }, { key: "bottom", get: function get() { return this.y + this.height; } }, { key: "left", get: function get() { return this.x; } }, { key: "right", get: function get() { return this.x + this.width; } }, { key: "lengthSquared", get: function get() { return this.width * this.width + this.height * this.height; } }, { key: "length", get: function get() { return Math.sqrt(this.lengthSquared); } }]); return Rect;
}();
var Vector = function () { Vector.isVector = function isVector(v) { return v instanceof Vector; }; Vector.isLikeVector = function isLikeVector(v) { return typeof v.x === "number" && typeof v.y === "number"; }; Vector.createRandom = function createRandom(xmin, xmax, ymin, ymax) { return new Vector(Random.float(xmin, xmax), Random.float(ymin, ymax)); }; Vector.createPolar = function createPolar(rotation) { var length = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1]; return new Vector().polar(rotation, length); }; Vector.polarX = function polarX(rotation) { var length = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1]; return Math.cos(rotation) * length; }; Vector.polarY = function polarY(rotation) { var length = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1]; return Math.sin(rotation) * length; }; function Vector() { var x = arguments.length <= 0 || arguments[0] === undefined ? 0.0 : arguments[0]; var y = arguments.length <= 1 || arguments[1] === undefined ? 0.0 : arguments[1]; _classCallCheck(this, Vector); this.x = x; this.y = y; } Vector.prototype.operation = function operation(name, args) { var ops = this[name + "s"], opv = this[name + "v"], opn = this[name + "n"]; if (args.length === 1 && typeof args[0] === "number") { return ops(args[0]); } else if (args.length === 1 && Vector.isLikeVector(args[0])) { return opv(args[0]); } else if (args.length === 2 && typeof args[0] === "number" && typeof args[1] === "number") { return opn(args[0], args[1]); } else { throw new Error(); } }; Vector.prototype.set = function set(x, y) { this.x = x;this.y = y;return this; }; Vector.prototype.add = function add() { return this.operation("add", arguments); }; Vector.prototype.addn = function addn(x, y) { return this.set(this.x + x, this.y + y); }; Vector.prototype.addv = function addv(v) { return this.addn(v.x, v.y); }; Vector.prototype.adds = function adds(s) { return this.addn(s, s); }; Vector.prototype.sub = function sub() { return this.operation("sub", arguments); }; Vector.prototype.subn = function subn(x, y) { return this.set(this.x - x, this.y - y); }; Vector.prototype.subv = function subv(v) { return this.subn(v.x, v.y); }; Vector.prototype.subs = function subs(s) { return this.subn(s, s); }; Vector.prototype.mul = function mul() { return this.operation("mul", arguments); }; Vector.prototype.muln = function muln(x, y) { return this.set(this.x * x, this.y * y); }; Vector.prototype.mulv = function mulv(v) { return this.muln(v.x, v.y); }; Vector.prototype.muls = function muls(s) { return this.muln(s, s); }; Vector.prototype.div = function div() { return this.operation("div", arguments); }; Vector.prototype.divn = function divn(x, y) { return this.set(this.x / x, this.y / y); }; Vector.prototype.divv = function divv(v) { return this.divn(v.x, v.y); }; Vector.prototype.divs = function divs(s) { return this.divn(s, s); }; Vector.prototype.polar = function polar(rotation) { var length = arguments.length <= 1 || arguments[1] === undefined ? 1 : arguments[1]; return this.set(Vector.polarX(rotation, length), Vector.polarY(rotation, length)); }; Vector.prototype.normalize = function normalize() { var length = this.length;return this.divs(length); }; Vector.prototype.clone = function clone() { return new Vector(this.x, this.y); }; Vector.prototype.randomize = function randomize(x, y) { return this.set(this.x + Random.unit(x), this.y + Random.unit(y)); }; _createClass(Vector, [{ key: "lengthSquared", get: function get() { return this.x * this.x + this.y * this.y; } }, { key: "length", get: function get() { return Math.sqrt(this.lengthSquared); } }]); return Vector;
}();
var Entity = function () { function Entity() { var opts = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; _classCallCheck(this, Entity); var options = Object.assign({ x: 0, y: 0, rotation: 0, started: 0 }, opts); this.started = options.started; this.position = new Vector(options.x, options.y); this.velocity = new Vector(0.0, 0.0); this.acceleration = new Vector(0.0, 0.0); this.friction = new Vector(1.0, 1.0); this.scale = new Vector(1.0, 1.0); this.rotation = options.rotation; this.alpha = 1.0; this.compositeOperation = "source-over"; this.collisions = []; } Entity.prototype.clearCollisions = function clearCollisions() { while (this.collisions.length > 0) { this.collisions.pop(); } return this; }; Entity.prototype.addCollision = function addCollision(entity) { if (this.collisions.indexOf(entity) < 0) { this.collisions.push(entity); } return this; }; Entity.prototype.hasCollidedWith = function hasCollidedWith(type) { for (var index = 0; index < this.collisions.length; index++) { var collision = this.collisions[index]; if (collision instanceof type) { return true; } } return false; }; Entity.prototype.collides = function collides(entity) { throw new Error("You need to implement this method"); }; Entity.prototype.render = function render(now) { context.save(); context.translate(this.position.x, this.position.y); context.rotate(this.rotation); context.scale(this.scale.x, this.scale.y); context.globalAlpha = this.alpha; context.globalCompositeOperation = this.compositeOperation; this.draw(now); context.restore(); }; Entity.prototype.update = function update(now) { this.velocity.addv(this.acceleration); this.position.addv(this.velocity); this.velocity.mulv(this.friction); }; Entity.prototype.clone = function clone() { var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; var clonedObject = new this.constructor(options); clonedObject.position = this.position.clone(); clonedObject.velocity = this.velocity.clone(); clonedObject.acceleration = this.acceleration.clone(); clonedObject.friction = this.friction.clone(); clonedObject.scale = this.scale.clone(); clonedObject.rotation = this.rotation; clonedObject.alpha = this.alpha; clonedObject.compositeOperation = this.compositeOperation; clonedObject.collisions = []; return clonedObject; }; return Entity;
}();
var TextEntity = function (_Entity) { _inherits(TextEntity, _Entity); function TextEntity() { var options = arguments.length <= 0 || arguments[0] === undefined ? { text: "", textAlign: "left", textBaseline: "top", fontName: "monospace", fontSize: 20, fontSizeUnit: "px", fontWeight: "normal", fontVariant: "normal" } : arguments[0]; _classCallCheck(this, TextEntity); var _this = _possibleConstructorReturn(this, _Entity.call(this, options)); _this.text = options.text; _this.textAlign = options.textAlign || "left"; _this.textBaseline = options.textBaseline || "top"; _this.fontVariant = options.fontVariant || "normal"; _this.fontWeight = options.fontWeight || "normal"; _this.fontName = options.fontName || "monospace"; _this.fontSize = options.fontSize || 20; _this.fontSizeUnit = options.fontSizeUnit || "px"; return _this; } TextEntity.prototype.collides = function collides(entity) { return false; }; TextEntity.prototype.draw = function draw(now) { context.font = this.fontVariant + " " + this.fontWeight + " " + this.fontSize + this.fontSizeUnit + " " + this.fontName; context.textAlign = this.textAlign; context.textBaseline = this.textBaseline; }; return TextEntity;
}(Entity);
var TimerText = function (_TextEntity) { _inherits(TimerText, _TextEntity); function TimerText(options) { _classCallCheck(this, TimerText); var _this2 = _possibleConstructorReturn(this, _TextEntity.call(this, options)); _this2.time = 0; _this2.isRunning = false; return _this2; } TimerText.prototype.reset = function reset() { this.time = 0; this.started = null; this.isRunning = true; return this; }; TimerText.prototype.stop = function stop() { this.isRunning = false; return this; }; TimerText.prototype.update = function update(now) { if (this.isRunning) { if (this.started === null) { this.started = now; } this.time = now - this.started; this.text = Math.round(this.time / 1000).toString(); } return _TextEntity.prototype.update.call(this, now); }; TimerText.prototype.draw = function draw(now) { _TextEntity.prototype.draw.call(this, now); context.strokeStyle = "#fff"; context.strokeText("TIME", 0, -this.fontSize); context.strokeText(this.text, 0, 0); }; return TimerText;
}(TextEntity);
var SinText = function (_TextEntity2) { _inherits(SinText, _TextEntity2); function SinText(options) { _classCallCheck(this, SinText); return _possibleConstructorReturn(this, _TextEntity2.call(this, options)); } SinText.prototype.draw = function draw(now) { _TextEntity2.prototype.draw.call(this, now); var timePerLetter = 200; var x = 0; var midX = context.measureText(this.text).width * 0.5; context.save(); context.translate(-midX, 0); for (var index = 0; index < this.text.length; index++) { var progress = (now - index * timePerLetter) / timePerLetter; var alpha = Math.max(0.5, Math.min(1, Math.sin(progress))); context.globalAlpha = alpha; context.strokeStyle = "#fff"; context.strokeText(this.text.substr(index, 1), x, 0); var measure = context.measureText(this.text.substr(index, 1)); x += measure.width; } context.restore(); }; return SinText;
}(TextEntity);
var FadeText = function (_TextEntity3) { _inherits(FadeText, _TextEntity3); function FadeText(options) { _classCallCheck(this, FadeText); return _possibleConstructorReturn(this, _TextEntity3.call(this, options)); } FadeText.prototype.reset = function reset(now) { this.started = now; return this; }; FadeText.prototype.draw = function draw(now) { _TextEntity3.prototype.draw.call(this, now); var time = now - this.started; var timePerLetter = 200; var x = 0; var midX = context.measureText(this.text).width * 0.5; context.save(); context.translate(-midX, 0); for (var index = 0; index < this.text.length; index++) { var alpha = Math.max(0, Math.min(1, (time - index * timePerLetter) / timePerLetter)); context.globalAlpha = alpha; context.strokeStyle = "#f0c"; context.strokeText(this.text.substr(index, 1), x, 0); var measure = context.measureText(this.text.substr(index, 1)); x += measure.width; } context.restore(); }; return FadeText;
}(TextEntity);
var Fire = function (_Entity2) { _inherits(Fire, _Entity2); function Fire() { var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; _classCallCheck(this, Fire); var _this5 = _possibleConstructorReturn(this, _Entity2.call(this, options)); _this5.velocity.polar(_this5.rotation, 5); return _this5; } Fire.prototype.collides = function collides(entity) { if (entity instanceof Asteroid) { return entity.collides(this); } return false; }; Fire.prototype.draw = function draw(now) { context.fillStyle = "#f00"; context.fillRect(-4, -2, 8, 4); }; return Fire;
}(Entity);
var Asteroid = function (_Entity3) { _inherits(Asteroid, _Entity3); function Asteroid() { var options = arguments.length <= 0 || arguments[0] === undefined ? { size: 50 } : arguments[0]; _classCallCheck(this, Asteroid); var _this6 = _possibleConstructorReturn(this, _Entity3.call(this, options)); _this6.points = []; _this6.size = options.size; var length = Random.int(9, 13); for (var index = 0; index < length; index++) { _this6.points.push(Vector.createPolar(index / length * Math.PI * 2, Random.int(_this6.size - 5, _this6.size + 5))); } return _this6; } Asteroid.prototype.collides = function collides(entity) { for (var index = 0; index <= this.points.length; index++) { var start = this.points[index % this.points.length], end = this.points[(index + 1) % this.points.length]; if (Line.sideOf(start, end, entity.position.clone().subv(this.position)) < 0) { return false; } } return true; }; Asteroid.prototype.draw = function draw(now) { context.beginPath(); for (var index = 0; index < this.points.length; index++) { var point = this.points[index]; if (index === 0) { context.moveTo(point.x, point.y); } else { context.lineTo(point.x, point.y); } } context.closePath(); context.strokeStyle = "#fff"; context.stroke(); }; return Asteroid;
}(Entity);
var Explosion = function (_Entity4) { _inherits(Explosion, _Entity4); function Explosion() { var opts = arguments.length <= 0 || arguments[0] === undefined ? { duration: 1000 } : arguments[0]; _classCallCheck(this, Explosion); var _this7 = _possibleConstructorReturn(this, _Entity4.call(this, opts)); var options = Object.assign({ duration: 1000 }, opts); _this7.duration = options.duration; return _this7; } Explosion.prototype.hasExpired = function hasExpired() { return this.time >= this.duration; }; Explosion.prototype.collides = function collides(entity) { return false; }; Explosion.prototype.update = function update(now) { _Entity4.prototype.update.call(this, now); this.time = now - this.started; this.alpha = Math.min(1, Math.max(0, 1.0 - this.time / this.duration)); this.rotation = (now - this.started) / (this.duration * 5) * Math.PI * 2; }; Explosion.prototype.draw = function draw(now) { context.beginPath(); var time = Math.max(0, (now - this.started) / (this.duration * 0.01)); var points = 12; for (var i = 0; i < points; i++) { var progress = i / points * Math.PI * 2; context.moveTo(Vector.polarX(progress, time * 0.5), Vector.polarY(progress, time * 0.5)); context.lineTo(Vector.polarX(progress, time), Vector.polarY(progress, time)); } context.strokeStyle = "#0ff"; context.stroke(); }; return Explosion;
}(Entity);
var Player = function (_Entity5) { _inherits(Player, _Entity5); function Player() { var options = arguments.length <= 0 || arguments[0] === undefined ? {} : arguments[0]; _classCallCheck(this, Player); return _possibleConstructorReturn(this, _Entity5.call(this, options)); } Player.prototype.reset = function reset() { this.velocity.set(0, 0); this.acceleration.set(0, 0); this.position.set(canvas.width * 0.5, canvas.height * 0.5); this.clearCollisions(); return this; }; Player.prototype.collides = function collides(entity) { if (entity instanceof Asteroid) { return entity.collides(this); } return false; }; Player.prototype.draw = function draw(now) { context.beginPath(); context.moveTo(-10, -10); context.lineTo(10, 0); context.lineTo(-10, 10); context.lineTo(-5, 0); context.closePath(); context.strokeStyle = "#0cf"; context.stroke(); }; return Player;
}(Entity);
var State = { TITLE: "title", GAME_OVER: "game_over", GAME: "game"
};
var state = State.TITLE;
var player = new Player({ started: 0, x: canvas.width * 0.5, y: canvas.height * 0.5
});
var gameOver = new FadeText({ started: 0, fontName: "Stalinist One", fontSize: 40, textBaseline: "middle", text: "Game Over", x: canvas.width * 0.5, y: canvas.height * 0.5
});
var title = new SinText({ started: 0, fontName: "Stalinist One", fontSize: 80, textBaseline: "middle", text: "ASTEROIDS", x: canvas.width * 0.5, y: canvas.height * 0.5
});
var subtitle = new SinText({ started: 0, fontName: "Stalinist One", fontSize: 20, textBaseline: "middle", text: "Click here to start", x: canvas.width * 0.5, y: canvas.height * 0.8
});
var time = new TimerText({ fontName: "Stalinist One", fontSize: 20, textAlign: "center", textBaseline: "middle", x: canvas.width * 0.5, y: canvas.height * 0.1
});
//entities.push(player);
entities.push(title);
entities.push(subtitle);
var fireCadence = new Time(0, 200);
function render(now) { context.clearRect(0, 0, canvas.width, canvas.height); for (var index = 0; index < entities.length; index++) { var entity = entities[index]; entity.render(now); } /*context.font = "normal normal 12px monospace"; context.textAlign = "left"; context.textBaseline = "top"; context.fillStyle = "#fff"; context.fillText("Entities: " + entities.length, 0, 0);*/
}
function update(now) { for (var index = 0; index < entities.length; index++) { var entity = entities[index]; entity.update(now); }
}
function preupdate(now) { if (entities.length < 5) { var asteroid = new Asteroid(); asteroid.velocity.randomize(2, 2); entities.push(asteroid); } // este método realiza el chequeo entre todas // las entidades para comprobar si han colisionado o no. for (var i = 0; i < entities.length; i++) { var a = entities[i]; a.clearCollisions(); for (var j = 0; j < entities.length; j++) { var b = entities[j]; if (a.collides(b)) { a.addCollision(b); b.addCollision(a); } } } if (Key.isDown(Key.SPACE)) { if (fireCadence.update(now) && entities.indexOf(player) >= 0) { fireCadence.reset(now); var fire = new Fire({ started: now, x: player.position.x, y: player.position.y, rotation: player.rotation }); entities.push(fire); } } if (Key.isDown(Key.LEFT)) { player.rotation -= 0.1; } else if (Key.isDown(Key.RIGHT)) { player.rotation += 0.1; } if (Key.isDown(Key.UP)) { player.acceleration.polar(player.rotation, 0.1); } else { player.acceleration.muls(0.5); }
}
function createExplosions(now, entity) { for (var index = 0; index < 5; index++) { entities.push(new Explosion({ started: now + index * 200, x: entity.position.x + Random.unit(20), y: entity.position.y + Random.unit(20) })); }
}
function postupdate(now) { for (var index = entities.length - 1; index >= 0; index--) { var entity = entities[index]; if (entity.position.x < 0) { entity.position.x = canvas.width; } if (entity.position.y < 0) { entity.position.y = canvas.height; } if (entity.position.x > canvas.width) { entity.position.x = canvas.width - entity.position.x; } if (entity.position.y > canvas.height) { entity.position.y = canvas.height - entity.position.y; } if (entity instanceof Fire) { if (now - entity.started >= 1000 || entity.hasCollidedWith(Asteroid)) { entities.splice(index, 1); } } else if (entity instanceof Asteroid) { if (entity.hasCollidedWith(Fire)) { if (entity.size > 20) { var a = entity.clone({ size: entity.size * 0.5 }); var b = entity.clone({ size: entity.size * 0.5 }); a.velocity.randomize(entity.velocity.length, entity.velocity.length); b.velocity.randomize(entity.velocity.length, entity.velocity.length); entities.push(a, b); } entities.splice(index, 1); createExplosions(now, entity); } } else if (entity instanceof Player) { if (entity.hasCollidedWith(Asteroid)) { state = State.GAME_OVER; entities.splice(index, 1); entities.push(gameOver.reset(now)); entities.push(subtitle); createExplosions(now, entity); time.stop(); return; } } else if (entity instanceof Explosion) { if (entity.hasExpired()) { entities.splice(index, 1); } } }
}
function frame(now) { preupdate(now); update(now); postupdate(now); render(now); window.requestAnimationFrame(frame);
}
function handleClick(e) { e.preventDefault(); if (state === State.GAME_OVER || state === State.TITLE) { var gameOverIndex = entities.indexOf(gameOver); if (gameOverIndex >= 0) { entities.splice(gameOverIndex, 1); } var titleIndex = entities.indexOf(title); if (titleIndex >= 0) { entities.splice(titleIndex, 1); } var subtitleIndex = entities.indexOf(subtitle); if (subtitleIndex >= 0) { entities.splice(subtitleIndex, 1); } entities.push(player.reset()); if (entities.indexOf(time) >= 0) { time.reset(); } else { entities.push(time.reset()); } state = State.GAME; }
}
function handleResize(e) { canvas.width = window.innerWidth; canvas.height = window.innerHeight; title.position.set(canvas.width * 0.5, canvas.height * 0.5); subtitle.position.set(canvas.width * 0.5, canvas.height * 0.8); time.position.set(canvas.width * 0.5, canvas.height * 0.1); gameOver.position.set(canvas.width * 0.5, canvas.height * 0.5); player.position.set(canvas.width * 0.5, canvas.height * 0.5);
}
window.requestAnimationFrame(frame);
window.addEventListener("click", handleClick);
window.addEventListener("resize", handleResize);
window.dispatchEvent(new Event("resize"));
Developer | Aitor |
Username | AzazelN28 |
Uploaded | September 16, 2022 |
Rating | 4 |
Size | 13,025 Kb |
Views | 34,408 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Follow the lines | 2,645 Kb |
Circuitry | 2,541 Kb |
Multiple CSS Backgrounds | 2,980 Kb |
Blending Experiment 29 | 7,996 Kb |
Worm | 5,062 Kb |
Fire | 3,542 Kb |
WebGL Point Sprites | 4,816 Kb |
Shadowing without intersecting | 4,645 Kb |
Galaxy Preview | 4,802 Kb |
Dancing Text | 3,761 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Fullscreen Parallax | Bassta | 3,313 Kb |
Parallax scrolling scene | Iharosi | 2,485 Kb |
Fading Navigation Bar | J-w-v | 2,805 Kb |
Google Maps API Ground Overlay | Boycetrus | 2,961 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
Sticky menu on scroll | Senff | 2,869 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Filtre ile Arama Kutusu - Search Box with Filter | AyhanALTINOK | 3,448 Kb |
Print element on a page | Mrs_snow | 2,081 Kb |
Drag and Drop Quiz | Cgspicer | 3,837 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!