Skip to content

Commit

Permalink
Robot games
Browse files Browse the repository at this point in the history
  • Loading branch information
@ToonTalk
ToonTalk committed Dec 7, 2023
1 parent 13b79b4 commit 138d3ab
Show file tree
Hide file tree
Showing 25 changed files with 2,473 additions and 0 deletions.
79 changes: 79 additions & 0 deletions apps/Robot game/Robot_Assembly_Game.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@

<!DOCTYPE html>
<html>
<head>
<title>Robot Assembly Game</title>
<style>
#assemblyArea {
width: 600px;
height: 400px;
position: relative;
border: 1px solid black;
overflow: hidden;
}

#robotOutline {
width: 100px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px dashed grey;
}

.robot-part {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
border-radius: 10px;
}

@keyframes comeAlive {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.robot-assembled {
animation: comeAlive 1s infinite;
}
</style>
</head>
<body>
<div id="assemblyArea">
<div id="robotOutline"></div> <!-- Placeholder for the robot outline -->
<!-- Placeholders for robot parts -->
<div class="robot-part" id="part1" draggable="true" style="top: 10px; left: 10px;"></div>
<div class="robot-part" id="part2" draggable="true" style="top: 10px; left: 70px;"></div>
<!-- More parts can be added as needed -->
</div>

<script>
document.querySelectorAll('.robot-part').forEach(part => {
part.addEventListener('dragstart', dragStart);
part.addEventListener('dragend', dragEnd);
});

function dragStart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
}

function dragEnd(e) {
const robotOutline = document.getElementById('robotOutline');
const part = document.getElementById(e.dataTransfer.getData('text'));
const outlineRect = robotOutline.getBoundingClientRect();
const partRect = part.getBoundingClientRect();

// Simple check to see if part is within the robot outline
if (partRect.top > outlineRect.top && partRect.left > outlineRect.left &&
partRect.bottom < outlineRect.bottom && partRect.right < outlineRect.right) {
part.style.top = (outlineRect.top - partRect.height / 2) + 'px';
part.style.left = (outlineRect.left - partRect.width / 2) + 'px';
part.classList.add('robot-assembled');
}
}
</script>
</body>
</html>
111 changes: 111 additions & 0 deletions apps/Robot game/Robot_Assembly_Game_Accurate_Snapping.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,111 @@

<!DOCTYPE html>
<html>
<head>
<title>Robot Assembly Game</title>
<style>
#assemblyArea {
width: 600px;
height: 400px;
position: relative;
border: 1px solid black;
overflow: hidden;
}

.robot-part {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="assemblyArea">
<!-- Placeholders for robot parts -->
<div class="robot-part" id="part1" draggable="true" style="top: 10px; left: 10px;"></div>
<div class="robot-part" id="part2" draggable="true" style="top: 10px; left: 70px;"></div>
<!-- More parts can be added as needed -->
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
const assemblyArea = document.getElementById('assemblyArea');

document.querySelectorAll('.robot-part').forEach(part => {
part.addEventListener('dragstart', dragStartPart);
});

assemblyArea.addEventListener('dragover', (e) => e.preventDefault());
assemblyArea.addEventListener('drop', dropPart);

function dragStartPart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
}

function dropPart(e) {
e.preventDefault();
const partId = e.dataTransfer.getData('text');
const part = document.getElementById(partId);

const assemblyRect = assemblyArea.getBoundingClientRect();
const newLeft = e.clientX - assemblyRect.left - part.offsetWidth / 2;
const newTop = e.clientY - assemblyRect.top - part.offsetHeight / 2;

let isTouchingOtherPart = false;
document.querySelectorAll('.robot-part').forEach(otherPart => {
if (otherPart.id !== partId) {
const otherRect = otherPart.getBoundingClientRect();
if (rectsOverlap(newLeft, newTop, part.offsetWidth, part.offsetHeight, otherRect)) {
isTouchingOtherPart = true;
snapPartsTogether(part, otherPart);
}
}
});

if (!isTouchingOtherPart) {
part.style.left = newLeft + 'px';
part.style.top = newTop + 'px';
}
}

function rectsOverlap(x, y, width, height, otherRect) {
return (x < otherRect.right && x + width > otherRect.left &&
y < otherRect.bottom && y + height > otherRect.top);
}

function snapPartsTogether(part, otherPart) {
const otherRect = otherPart.getBoundingClientRect();
const partRect = part.getBoundingClientRect();

const topDiff = Math.abs(partRect.top - otherRect.bottom);
const bottomDiff = Math.abs(partRect.bottom - otherRect.top);
const leftDiff = Math.abs(partRect.left - otherRect.right);
const rightDiff = Math.abs(partRect.right - otherRect.left);

const minDiff = Math.min(topDiff, bottomDiff, leftDiff, rightDiff);

switch (minDiff) {
case topDiff:
part.style.top = otherRect.bottom + 'px';
part.style.left = otherRect.left + 'px';
break;
case bottomDiff:
part.style.top = (otherRect.top - part.offsetHeight) + 'px';
part.style.left = otherRect.left + 'px';
break;
case leftDiff:
part.style.left = otherRect.right + 'px';
part.style.top = otherRect.top + 'px';
break;
case rightDiff:
part.style.left = (otherRect.left - part.offsetWidth) + 'px';
part.style.top = otherRect.top + 'px';
break;
}
}
});
</script>
</body>
</html>
97 changes: 97 additions & 0 deletions apps/Robot game/Robot_Assembly_Game_Adjusted_Snapping.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@

<!DOCTYPE html>
<html>
<head>
<title>Robot Assembly Game</title>
<style>
#assemblyArea {
width: 600px;
height: 400px;
position: relative;
border: 1px solid black;
overflow: hidden;
}

.robot-part {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="assemblyArea">
<!-- Placeholders for robot parts -->
<div class="robot-part" id="part1" draggable="true" style="top: 10px; left: 10px;"></div>
<div class="robot-part" id="part2" draggable="true" style="top: 10px; left: 70px;"></div>
<!-- More parts can be added as needed -->
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
const assemblyArea = document.getElementById('assemblyArea');

document.querySelectorAll('.robot-part').forEach(part => {
part.addEventListener('dragstart', dragStartPart);
});

assemblyArea.addEventListener('dragover', (e) => e.preventDefault());
assemblyArea.addEventListener('drop', dropPart);

function dragStartPart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
}

function dropPart(e) {
e.preventDefault();
const partId = e.dataTransfer.getData('text');
const part = document.getElementById(partId);

const assemblyRect = assemblyArea.getBoundingClientRect();
const newLeft = e.clientX - assemblyRect.left - part.offsetWidth / 2;
const newTop = e.clientY - assemblyRect.top - part.offsetHeight / 2;

let isTouchingOtherPart = false;
document.querySelectorAll('.robot-part').forEach(otherPart => {
if (otherPart.id !== partId) {
const otherRect = otherPart.getBoundingClientRect();
if (rectsOverlap(newLeft, newTop, part.offsetWidth, part.offsetHeight, otherRect)) {
isTouchingOtherPart = true;
snapPartsTogether(part, otherPart);
}
}
});

if (!isTouchingOtherPart) {
part.style.left = newLeft + 'px';
part.style.top = newTop + 'px';
}
}

function rectsOverlap(x, y, width, height, otherRect) {
return (x < otherRect.right && x + width > otherRect.left &&
y < otherRect.bottom && y + height > otherRect.top);
}

function snapPartsTogether(part, otherPart) {
const otherRect = otherPart.getBoundingClientRect();
const partRect = part.getBoundingClientRect();

const deltaX = Math.abs(partRect.left - otherRect.right);
const deltaY = Math.abs(partRect.top - otherRect.bottom);
const snapThreshold = 30; // Pixels within which vertical snapping is preferred

if (deltaY <= snapThreshold && deltaY < deltaX) {
part.style.top = (partRect.top < otherRect.top) ? (otherRect.top - part.offsetHeight) + 'px' : otherRect.bottom + 'px';
part.style.left = otherRect.left + 'px';
} else {
part.style.left = (partRect.left < otherRect.left) ? (otherRect.left - part.offsetWidth) + 'px' : otherRect.right + 'px';
part.style.top = otherRect.top + 'px';
}
}
});
</script>
</body>
</html>
102 changes: 102 additions & 0 deletions apps/Robot game/Robot_Assembly_Game_Assembled_Robot.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@

<!DOCTYPE html>
<html>
<head>
<title>Robot Assembly Game</title>
<style>
#assemblyArea {
width: 600px;
height: 400px;
position: relative;
border: 1px solid black;
overflow: hidden;
}

#robotOutline {
width: 100px;
height: 200px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border: 2px dashed grey;
}

.robot-part {
width: 50px;
height: 50px;
position: absolute;
background-color: blue;
border-radius: 10px;
}

@keyframes comeAlive {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.robot-assembled {
animation: comeAlive 1s infinite;
}
</style>
</head>
<body>
<div id="assemblyArea">
<div id="robotOutline"></div> <!-- Placeholder for the robot outline -->
<!-- Placeholders for robot parts -->
<div class="robot-part" id="part1" draggable="true" style="top: 10px; left: 10px;"></div>
<div class="robot-part" id="part2" draggable="true" style="top: 10px; left: 70px;"></div>
<!-- More parts can be added as needed -->
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {
const assemblyArea = document.getElementById('assemblyArea');
const robotOutline = document.getElementById('robotOutline');
let partsAssembled = 0; // Counter for assembled parts
const totalParts = 2; // Total number of parts to be assembled

document.querySelectorAll('.robot-part').forEach(part => {
part.addEventListener('dragstart', dragStartPart);
});

assemblyArea.addEventListener('dragover', (e) => e.preventDefault());
assemblyArea.addEventListener('drop', dropPart);

robotOutline.addEventListener('dragstart', dragStartRobot);

function dragStartPart(e) {
e.dataTransfer.setData('text/plain', e.target.id);
}

function dropPart(e) {
e.preventDefault();
const partId = e.dataTransfer.getData('text');
const part = document.getElementById(partId);

// Simple logic to check if the part is placed near the outline
const outlineRect = robotOutline.getBoundingClientRect();
const dropRect = assemblyArea.getBoundingClientRect();
if (e.clientX > outlineRect.left + dropRect.left &&
e.clientX < outlineRect.right + dropRect.left &&
e.clientY > outlineRect.top + dropRect.top &&
e.clientY < outlineRect.bottom + dropRect.top) {
partsAssembled++;
part.style.display = 'none'; // Hide part after it's placed
if (partsAssembled === totalParts) {
robotOutline.setAttribute('draggable', true);
robotOutline.classList.add('robot-assembled');
}
}
}

function dragStartRobot(e) {
if (partsAssembled === totalParts) {
e.dataTransfer.setData('text/plain', robotOutline.id);
}
}
});
</script>
</body>
</html>
Loading

0 comments on commit 138d3ab

Please sign in to comment.