lovasoa/game.html

## game.html
<!doctype html>
<html>
<head>
  <meta charset="utf8">
  <title>Turfu</title>
  <style>
body{
  background-color:black;
}
svg{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
  </style>
</head>

<body>
<svg id="gameframe"></svg>
<script>
var svg = document.getElementById("gameframe");
var players = [];
var ennemies = [];

(function utils () {
  Array.prototype.add = function addArray(arr) {
    for (var i=0, l=this.length; i<l; i++) {
      this[i] += arr[i] || 0;
    }
  }
  Array.prototype.pickOne = function pickOne () {
    return this[Math.floor(Math.random()*this.length)];
  }
})();

var playField = (function (svg) {
    var w = svg.width.baseVal.value = window.innerWidth;
    var h = svg.height.baseVal.value = window.innerHeight;
    return {
      "dimensions": [w,h]
    };
})(svg);

function pickColor() {
  var choice = ["#7fdbff", "#2ecc40", "#ffdc00", "#ff851b", "#ff4136",
                "#f012be", "#b10dc9", "#aaa",    "#ddd",    "#85144b"];
  return choice.pickOne();
}

function renderBubble() {
  // Physics
  if (this.hasOwnProperty('boundingBox')) {
    var bb = this.boundingBox, pos = this.pos;
    if (pos[0] < bb[0]) pos[0] = bb[0];
    if (pos[1] < bb[1]) pos[1] = bb[1];
    if (pos[0] > bb[2]) pos[0] = bb[2];
    if (pos[1] > bb[3]) pos[1] = bb[3];
  }
  // Display
  this.svgCircle.cx.baseVal.value = this.pos[0];
  this.svgCircle.cy.baseVal.value = this.pos[1];
  this.svgCircle.r.baseVal.value = this.size;
  if (this.hasOwnProperty('color'))
    this.svgCircle.setAttribute("fill", this.color);
  if (this.hasOwnProperty('border'))
    this.svgCircle.setAttribute("stroke", this.border);
  if (this.hasOwnProperty('opacity'))
    this.svgCircle.setAttribute("fill-opacity", this.opacity);
}

function Player () {
  this.size = 10;
  this.pos = playField.dimensions.map(function(x){return x/2});
  this.color = pickColor();
  this.speed = 10;
  this.boundingBox = [0,0,playField.dimensions[0],playField.dimensions[1]];
  this.svgCircle = document.createElementNS(svg.namespaceURI, 'circle');
  svg.appendChild(this.svgCircle);
}
Player.prototype.render = renderBubble;

function Ennemy () {
  this.size = 25 + Math.random()*100;
  this.pos = [Math.random()*playField.dimensions[0], -this.size];
  this.color = pickColor();
  this.speed = [Math.random()*20-10, Math.random()*20];
  this.opacity = 0.5;
  this.border = "red";
  this.dead = false;
  this.svgCircle = document.createElementNS(svg.namespaceURI, 'circle');
  svg.appendChild(this.svgCircle);
}
Ennemy.prototype.render = renderBubble;
Ennemy.prototype.remove = function remove() {
  this.dead = true;
  if (this.svgCircle.parentElement !== null) svg.removeChild(this.svgCircle);
}

function frame(time) {
  // Controls
  var gamepads = navigator.getGamepads();
  for (var i=0; i<gamepads.length; i++) {
    var gp = gamepads[i];
    if (gp == null) continue;
    var player = players[i] || (players[i] = new Player);
    player.pos.add([gp.axes[0]*player.speed, gp.axes[1]*player.speed]);
    if (gp.buttons[0].pressed) player.color = pickColor();
    if (gp.axes[0] === 0 && gp.axes[1] === 0) {
      if (player.size < 60) player.size++;
      if (player.speed > 1) player.speed*=0.9;
    } else {
      if (player.size > 8) player.size--;
      if (player.speed < 17) player.speed*=1.1;
    }
    player.render();
  }

  // Game logic
  if (Math.random() < 0.05) ennemies.push(new Ennemy);
  var len = -1;
  for (var i=0, l=ennemies.length; i<l; i++) {
      var e = ennemies[i];
      if (e.pos[0] - e.size > playField.dimensions[0] ||
          e.pos[1] - e.size > playField.dimensions[1] ) {
          if (Math.random() < 0.1) e.remove();
          if (len === -1) len = i;
      } else {
        len = -1;
        e.pos.add(e.speed);
        e.render()
      }
  }
  if (len !== -1) ennemies.length = len;

  requestAnimationFrame(frame);
}
frame();
</script>
</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf8">
	<title>Turfu</title>
	<style>
	body{
	background-color:black;
	}
	svg{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	}
	</style>
	</head>

	<body>
	<svg id="gameframe"></svg>
	<script>
	var svg = document.getElementById("gameframe");
	var players = [];
	var ennemies = [];

	(function utils () {
	Array.prototype.add = function addArray(arr) {
	for (var i=0, l=this.length; i<l; i++) {
	this[i] += arr[i] \|\| 0;
	}
	}
	Array.prototype.pickOne = function pickOne () {
	return this[Math.floor(Math.random()*this.length)];
	}
	})();

	var playField = (function (svg) {
	var w = svg.width.baseVal.value = window.innerWidth;
	var h = svg.height.baseVal.value = window.innerHeight;
	return {
	"dimensions": [w,h]
	};
	})(svg);

	function pickColor() {
	var choice = ["#7fdbff", "#2ecc40", "#ffdc00", "#ff851b", "#ff4136",
	"#f012be", "#b10dc9", "#aaa", "#ddd", "#85144b"];
	return choice.pickOne();
	}

	function renderBubble() {
	// Physics
	if (this.hasOwnProperty('boundingBox')) {
	var bb = this.boundingBox, pos = this.pos;
	if (pos[0] < bb[0]) pos[0] = bb[0];
	if (pos[1] < bb[1]) pos[1] = bb[1];
	if (pos[0] > bb[2]) pos[0] = bb[2];
	if (pos[1] > bb[3]) pos[1] = bb[3];
	}
	// Display
	this.svgCircle.cx.baseVal.value = this.pos[0];
	this.svgCircle.cy.baseVal.value = this.pos[1];
	this.svgCircle.r.baseVal.value = this.size;
	if (this.hasOwnProperty('color'))
	this.svgCircle.setAttribute("fill", this.color);
	if (this.hasOwnProperty('border'))
	this.svgCircle.setAttribute("stroke", this.border);
	if (this.hasOwnProperty('opacity'))
	this.svgCircle.setAttribute("fill-opacity", this.opacity);
	}

	function Player () {
	this.size = 10;
	this.pos = playField.dimensions.map(function(x){return x/2});
	this.color = pickColor();
	this.speed = 10;
	this.boundingBox = [0,0,playField.dimensions[0],playField.dimensions[1]];
	this.svgCircle = document.createElementNS(svg.namespaceURI, 'circle');
	svg.appendChild(this.svgCircle);
	}
	Player.prototype.render = renderBubble;

	function Ennemy () {
	this.size = 25 + Math.random()*100;
	this.pos = [Math.random()*playField.dimensions[0], -this.size];
	this.color = pickColor();
	this.speed = [Math.random()20-10, Math.random()20];
	this.opacity = 0.5;
	this.border = "red";
	this.dead = false;
	this.svgCircle = document.createElementNS(svg.namespaceURI, 'circle');
	svg.appendChild(this.svgCircle);
	}
	Ennemy.prototype.render = renderBubble;
	Ennemy.prototype.remove = function remove() {
	this.dead = true;
	if (this.svgCircle.parentElement !== null) svg.removeChild(this.svgCircle);
	}

	function frame(time) {
	// Controls
	var gamepads = navigator.getGamepads();
	for (var i=0; i<gamepads.length; i++) {
	var gp = gamepads[i];
	if (gp == null) continue;
	var player = players[i] \|\| (players[i] = new Player);
	player.pos.add([gp.axes[0]player.speed, gp.axes[1]player.speed]);
	if (gp.buttons[0].pressed) player.color = pickColor();
	if (gp.axes[0] === 0 && gp.axes[1] === 0) {
	if (player.size < 60) player.size++;
	if (player.speed > 1) player.speed*=0.9;
	} else {
	if (player.size > 8) player.size--;
	if (player.speed < 17) player.speed*=1.1;
	}
	player.render();
	}

	// Game logic
	if (Math.random() < 0.05) ennemies.push(new Ennemy);
	var len = -1;
	for (var i=0, l=ennemies.length; i<l; i++) {
	var e = ennemies[i];
	if (e.pos[0] - e.size > playField.dimensions[0] \|\|
	e.pos[1] - e.size > playField.dimensions[1] ) {
	if (Math.random() < 0.1) e.remove();
	if (len === -1) len = i;
	} else {
	len = -1;
	e.pos.add(e.speed);
	e.render()
	}
	}
	if (len !== -1) ennemies.length = len;

	requestAnimationFrame(frame);
	}
	frame();
	</script>
	</body>
	</html>