i have a question with my project and i am brought to a stand still. within the rotateRight function, x increases by 90 which represents the amount of degrees the shape should rotate. because each of the four positions has specific attributes and i need x to reset to 0 when it hits 360 so the if statements within the down function work properly. my HTML:
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<link rel="stylesheet" href="styleSheets/main.css">
<script src = "https://code.jquery.com/jquery-3.4.1.js"></script>
<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;
function createShape1() {
var newEndR = endR - 50;
var newEndR2 = endR + 50;
var newEndL = endL - 50;
var newEndL2 = endL + 50;
var newEndT = endT - 50;
var newEndT2 = endT + 50;
var newEndB = endB - 50;
var newEndB2 = endB + 50;
var elem = document.getElementById("container");
var outer = document.createElementNS(svgNS, "svg");
var leftG = document.getElementById("left");
var rightG = document.getElementById("right");
leftG.onclick = moveLeft;
rightG.onclick = moveRight;
elem.append(outer);
outer.id = "outer";
outer.style.background = "transparent";
outer.style.height = "100px";
outer.style.width = "150px";
outer.style.left = "150px";
outer.style.top = "0px";
outer.style.position = "relative";
var shape = document.createElementNS(svgNS, "rect");
shape.id = "shape";
shape.style.width = "50px";
shape.style.x = "50px";
shape.style.y = "0px"
shape.style.height = "51px";
shape.style.fill = "purple";
shape.style.position = "relative"
outer.append(shape);
var shape2 = document.createElementNS(svgNS, "rect");
shape2.id = "shape2"
shape2.style.fill = "purple";
shape2.style.x = "0%";
shape2.style.y = "50px";
shape2.style.width = "100%";
shape2.style.height = "50%";
outer.append(shape2);
var t = setInterval(down, 1000);
var xPos = parseInt(outer.style.width);
var yPos = parseInt(outer.style.top);
var w = parseInt(outer.style.width);
var h = parseInt(outer.style.height);
var ymath = yPos + h;
var ymath = yPos + h;
elem.addEventListener('contextmenu', rotateRight);
function down() {
if (ymath < endB) {
yPos += 50;
ymath = yPos + h;
outer.style.top = yPos +'px';
if (outer.style.transform === "rotate(90deg)") {
endL = newEndL;
}
if (outer.style.transform === "rotate(180deg)") {
endL = newEndL;
endR = newEndR;
console.log(endB);
}
if (outer.style.transform === "rotate(270deg)") {
endR = newEndR2;
endL = newEndL;
endB = newEndB;
}
} else {
clearInterval(t);
}
}
function rotateRight(e) {
e.preventDefault();
var outer = document.getElementById("outer");
var xPos = parseInt(outer.style.left);
var w = parseInt(outer.style.width);
var yPos = parseInt(outer.style.top);
var h = parseInt(outer.style.height);
var xmath = xPos + w;
var xmath2 = xPos - w;
var ymath = yPos + h;
if (xmath < newEndR2) {
if (ymath < endB && yPos > endT) {
x += 90
outer.style.transform = "rotate(" + x + "deg)";
outer.style.transformOrigin = "100px 50px";
}
}
}
function moveLeft() {
var outer = document.getElementById("outer");
var xPos = parseInt(outer.style.left);
var w = parseInt(outer.style.width);
var yPos = parseInt(outer.style.top);
var h = parseInt(outer.style.height);
var xmath = xPos;
var ymath = yPos + h;
if (xmath > endL && ymath < endB) {
xPos -= 50;
xmath += w;
outer.style.left = xPos + "px";
}
}
function moveRight() {
var outer = document.getElementById("outer");
var xPos = parseInt(outer.style.left);
var w = parseInt(outer.style.width);
var yPos = parseInt(outer.style.top);
var h = parseInt(outer.style.height);
var ymath = yPos + h;
var xmath = xPos + w;
if (xmath < endR && ymath < endB) {
xPos += 50;
outer.style.left = xPos + "px";
ymath += h;
xmath += w;
}
}
};
var shapes = [createShape1, createShape2];
function randShape() {
var x = Math.floor(Math.random() * 5);
shapes[0]();
};
window.onload = randShape;
Aucun commentaire:
Enregistrer un commentaire