Last active
January 2, 2017 10:56
-
-
Save spheppner/cb26c6d4b6ae3026f949559728dfb386 to your computer and use it in GitHub Desktop.
Javascript Flappy Rectangle
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Flappy Rectangle</title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
<style> | |
canvas { | |
border:1px solid #d3d3d3; | |
background-color: #f1f1f1; | |
} | |
</style> | |
</head> | |
<body onload="startGame()"> | |
<script> | |
var myGamePiece; | |
var myObstacles = []; | |
var myScore; | |
var t = document.createTextNode("Flappy Rectangle"); | |
var br = document.createElement("br"); | |
function makeRandomColor(){ | |
z = Math.random() | |
if (z < 0.2) { | |
return "green"; | |
} | |
else if (z < 0.4) { | |
return "blue"; | |
} | |
else if (z < 0.6) { | |
return "black" | |
} | |
else if (z < 0.8) { | |
return "pink" | |
} | |
else if (z < 1.0) { | |
return "#09E509" | |
} | |
else { | |
return "yellow" | |
} | |
} | |
function startGame() { | |
// doument.body.appendChild(t); | |
document.body.insertBefore(t, document.body.childNodes[0]); | |
document.body.insertBefore(br, document.body.childNodes[1]); | |
myGamePiece = new component(30, 30, makeRandomColor(), 20, 120); | |
myGamePiece.gravity = 0.05; | |
myScore = new component("30px", "Consolas", "black", 280, 40, "text"); | |
myGameArea.start(); | |
} | |
var myGameArea = { | |
canvas : document.createElement("canvas"), | |
start : function() { | |
this.canvas.width = 480; | |
this.canvas.height = 270; | |
this.context = this.canvas.getContext("2d"); | |
document.body.insertBefore(this.canvas, document.body.childNodes[2]); | |
this.frameNo = 0; | |
this.interval = setInterval(updateGameArea, 20); | |
}, | |
clear : function() { | |
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); | |
} | |
} | |
function component(width, height, color, x, y, type) { | |
this.type = type; | |
this.score = 0; | |
this.width = width; | |
this.height = height; | |
this.speedX = 0; | |
this.speedY = 0; | |
this.delta = -1 | |
this.x = x; | |
this.y = y; | |
this.gravity = 0; | |
this.gravitySpeed = 0; | |
this.update = function() { | |
ctx = myGameArea.context; | |
if (this.type == "text") { | |
ctx.font = this.width + " " + this.height; | |
ctx.fillStyle = color; | |
ctx.fillText(this.text, this.x, this.y); | |
} else { | |
ctx.fillStyle = color; | |
ctx.fillRect(this.x, this.y, this.width, this.height); | |
} | |
} | |
this.wobble = function() { | |
this.width += this.delta | |
this.height += this.delta | |
ctx.fillStyle = color; | |
ctx.fillRect(this.x, this.y, this.width, this.height); | |
if (this.width > 30) { | |
this.width = 30; | |
this.height = 30; | |
delta = -1 | |
} | |
if (this.width < 5) { | |
this.width = 5; | |
this.height = 5; | |
delta = 1; | |
} | |
} | |
this.newPos = function() { | |
this.gravitySpeed += this.gravity; | |
this.x += this.speedX; | |
this.y += this.speedY + this.gravitySpeed; | |
if (this.y < 0) { | |
this.y = 0 | |
} | |
this.hitBottom(); | |
} | |
this.hitBottom = function() { | |
var rockbottom = myGameArea.canvas.height - this.height; | |
if (this.y > rockbottom) { | |
this.y = rockbottom; | |
this.gravitySpeed = 0; | |
} | |
} | |
this.crashWith = function(otherobj) { | |
var myleft = this.x; | |
var myright = this.x + (this.width); | |
var mytop = this.y; | |
var mybottom = this.y + (this.height); | |
var otherright = otherobj.x + (otherobj.width); | |
var otherleft = otherobj.x; | |
var othertop = otherobj.y; | |
var otherbottom = otherobj.y + (otherobj.height); | |
var crash = true; | |
if ((mybottom < othertop) || (mytop > otherbottom) || (myright < otherleft) || (myleft > otherright)) { | |
crash = false; | |
} | |
return crash; | |
} | |
} | |
function updateGameArea() { | |
var x, height, gap, minHeight, maxHeight, minGap, maxGap; | |
for (i = 0; i < myObstacles.length; i += 1) { | |
if (myGamePiece.crashWith(myObstacles[i])) { | |
myScore.score -= 1000 | |
// alert("Hiiiii") | |
if (myScore.score < -10000) return; | |
} | |
} | |
myGameArea.clear(); | |
myGameArea.frameNo += 1; | |
if (myGameArea.frameNo == 1 || everyinterval(150)) { | |
x = myGameArea.canvas.width; | |
minHeight = 20; | |
maxHeight = 200; | |
height = Math.floor(Math.random()*(maxHeight-minHeight+1)+minHeight); | |
minGap = 50; | |
maxGap = 200; | |
gap = Math.floor(Math.random()*(maxGap-minGap+1)+minGap); | |
myObstacles.push(new component(10, height, makeRandomColor(), x, 0)); | |
myObstacles.push(new component(10, x - height - gap, makeRandomColor(), x, height + gap)); | |
} | |
for (i = 0; i < myObstacles.length; i += 1) { | |
myObstacles[i].x += -1; | |
myObstacles[i].update(); | |
} | |
myScore.text="SCORE: " + (myGameArea.frameNo + myScore.score); | |
myScore.update(); | |
//myGamePiece.wobble(); | |
myGamePiece.newPos(); | |
myGamePiece.update(); | |
} | |
function everyinterval(n) { | |
if ((myGameArea.frameNo / n) % 1 == 0) {return true;} | |
return false; | |
} | |
function accelerate(n) { | |
myGamePiece.gravity = n; | |
} | |
function restart() { | |
myScore.score = 0; | |
myGamePiece.x = 0; | |
myGamePiece.y = 100; | |
} | |
</script> | |
<br> | |
<button onmousedown="accelerate(-0.2)" onmouseup="accelerate(0.05)">Flapp flapp</button> | |
<button onmousedown="restart">Neustart</button> | |
<p>Benutze den "Flapp flapp"-Button um in der Luft zu bleiben!</p> | |
<p>Wie lange überlebst du?</p> | |
<small>taken from: http://www.w3schools.com/graphics/tryit.asp?filename=trygame_default_gravity</small> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment