Skip to content

Instantly share code, notes, and snippets.

@lovasoa
Last active July 27, 2016 17:57
Show Gist options
  • Save lovasoa/e4013391b4e2a32c5da4 to your computer and use it in GitHub Desktop.
Save lovasoa/e4013391b4e2a32c5da4 to your computer and use it in GitHub Desktop.
Unfinished HTML5 game that uses the Gamepad API. The whole game is rendered in an HTML5 <SVG> element.
<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment