I am working on a Tetris game and right now im trying to get the boxes to stack on top of each other. Like i said this is a Tetris game so i need to deactivate the shape once its done, so i push each shapes attributes to an array, then at the beginning of the down() function i iterate through the comp array, compare my current attributes to the attributes of the dead shapes within the array, if there is no match, the shape moves down. otherwise, the shape gets deactivated. This works, however the second shape overlaps the first shape by 50pxs but the rest line up perfect. HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris(test)</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src="js/jquery.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div id="container" style="height: 650px; width: 500px; background: black; position: relative">
<div class="grid">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
</html>
CSS:
.grid {
background-image: repeating-linear-gradient(0deg, transparent, transparent 49px, #88F 49px, #88F 50px),
repeating-linear-gradient(-90deg, transparent, transparent 49px, #88F 49px, #88F 50px);
background-size: 50px 50px;
top: 0px;
height: 651px;
position: absolute;
width: 501px;
}
#left {
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
#right {
left: 250px;
top: 0px;
width: 250px;
height: 650px;
position: absolute;
background: transparent;
}
JS:
var svgNS = "http://www.w3.org/2000/svg";
var endR = 500;
var endL = 0;
var endT = 0;
var endB = 650;
var x = 0;
countO = 1;
count1 = 0;
count2 = 1000000;
var comp = [{
id: 0,
yPos: "650px"
}];
function createShape1() {
var endR1 = 500;
var endL1 = 0;
var endT1 = 0;
var endB1 = 650;
var newEndR = endR1; //used to set boundaries right
var endR10a = endR1 - 50; //used to set boundaries right
var endR10b = endR1 + 50; //used to set boundaries right
var newEndL = endL1; //used to set boundaries left
var endL10a = endL1 - 50; //used to set boundaries left
var endL10b = endL1 + 50; //used to set boundaries left
var newEndB = endB1; //used to set boundaries bottom
var endB10a = endB - 50; //used to set boundaries bottom
var rotEndR = endR1 + 50; //used to set right boundaries for rotation
var rotEndRa = endR1; //used to set right boundaries for rotation
var rotEndL = endL1; //used to set left boundaries for rotation
var rotEndT = endT1; //used to set top boundaries for rotation
var rotEndB = endB1; //used to set bottom boundaries for rotation
var elem = document.getElementById("container");
var outer = document.createElementNS(svgNS, "svg"); //creates full transparent shape
countO++;
var leftG = document.getElementById("left");
var rightG = document.getElementById("right");
elem.append(outer);
outer.id = "outer" + countO;
outer.style.background = "grey";
outer.style.height = "100px";
outer.style.width = "150px";
outer.style.left = "150px";
outer.style.top = "0px";
outer.style.position = "absolute";
outer.style.transform = "rotate(0deg)"
var t = setInterval(down, 1000); // calls down() function every second
var xPos = parseInt(outer.style.left);
var yPos = parseInt(outer.style.top);
var w = parseInt(outer.style.width);
var h = parseInt(outer.style.height);
var ymath = yPos + h;
function down() { // moves shape down by 50px
for (let shape of comp) {
var shapeX = parseInt(shape.xPos);
var shapeW = parseInt(shape.width);
var shapeY = parseInt(shape.yPos);
var shapeH = parseInt(shape.h);
console.log(shape)
console.log(shapeY);
console.log(ymath);
if (ymath === shapeY) {
clearInterval(t);
console.log("STOP");
comp.push({
id: countO,
xPos: outer.style.left,
w: outer.style.width,
yPos: outer.style.top,
h: outer.style.height
})
console.log(comp)
randShape();
}
}
if (ymath < newEndB) {
yPos += 50;
ymath = yPos + h;
outer.style.top = yPos + 'px';
} else {
clearInterval(t);
}
}
};
var shapes = [createShape1];
function randShape() {
shapes[0]();
};
window.addEventListener("click", startGame, { once: true })
function startGame() {
randShape()
}
Aucun commentaire:
Enregistrer un commentaire