wbrawner/hextris
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added blocks

Browse source
This commit is contained in:
lengstrom 2014-05-17 12:29:46 -04:00
parent ad62664bfc
commit 3851284032
2 changed files with 42 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
index.html
View file

@ -5,11 +5,11 @@
</head>
<body>
<center>
<canvas id="canvas" style = 'width:1200px;height:700px;background-color:yellow;'></canvas>
<canvas id="canvas" width = '700' height = '700' style='background-color:rgba(23,23,23, 1)'></canvas>
</center>
<script src="entities.js"></script>
<script src="main.js"></script>
<script src="math.js"></script>
<script src="main.js"></script>
</body>
</html>

58
main.js
View file

@ -13,38 +13,60 @@ window.requestAnimFrame = (function(){
var blocks = [];
for (var i = 0; i < 6; i++) {
for (var i = 0; i < 12; i++) {
blocks.push(new Block(i, 'green'));
}
Render();
function Render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
blocks.forEach(function(o){
o.draw();
o.distFromHex -= 1/100;
});
requestAnimFrame(Render);
}
function Block(lane, color, time) {
(function animloop(){
requestAnimFrame(animloop);
Render();
})();
function Block(lane, color, distFromHex) {
this.height = 20;
this.width = 65;
this.lane = lane;
this.angle = 15 * (Math.PI / 180) + 30 * (Math.PI / 180) * lane;
this.angle = 90 - (30 + 60 * lane);
if (this.angle < 0) {
this.angle += 360;
}
this.color = color;
this.draw = function() {
ctx.translate(canvas.width / 2, canvas.height / 2);
ctx.rotate(this.angle);
ctx.fillStyle = '#000';
ctx.fillRect(canvas.width/2 + Math.cos(this.angle) * time, canvas.height/2 + Math.sin(this.angle) * time, 30, 30);
ctx.restore();
ctx.fillRect(200, 200, 200, 200);
};
if (!time) {
this.time = time;
if (distFromHex) {
this.distFromHex = distFromHex;
}
else {
time = 200;
this.distFromHex = 300;
}
this.draw = function() {
var p1 = rotatePoint(-this.width/2, this.height/2, this.angle);
var p2 = rotatePoint(this.width/2, this.height/2, this.angle);
var p3 = rotatePoint(this.width/2, -this.height/2, this.angle);
var p4 = rotatePoint(-this.width/2, -this.height/2, this.angle);
ctx.fillStyle="#FF0000";
var baseX = canvas.width/2 + Math.sin((this.angle) * (Math.PI/180)) * (this.distFromHex);
var baseY = canvas.height/2 - Math.cos((this.angle) * (Math.PI/180)) * (this.distFromHex);
ctx.beginPath();
ctx.moveTo(baseX + p1.x, baseY + p1.y);
ctx.lineTo(baseX + p2.x, baseY + p2.y);
ctx.lineTo(baseX + p3.x, baseY + p3.y);
ctx.lineTo(baseX + p4.x, baseY + p4.y);
ctx.lineTo(baseX + p1.x, baseY + p1.y);
ctx.closePath();
ctx.fill();
};
}