Tetris with Triangles
Play the classic game of Tetris with triangles instead of rectangles.
AI
Get This App On Your Website
2. Paste the code into your website.
3. Resize the iframe to fit your website.
Play the classic game of Tetris with triangles instead of rectangles.
<html>
<head>
<script type="text/javascript"> window.addEventListener('error', function(event) { var message = JSON.parse(JSON.stringify(event.message)); var source = event.filename; var lineno = event.lineno; var colno = event.colno; var error = event.error; window.parent.postMessage({ type: 'iframeError', details: { message: message, source: source, lineno: lineno, colno: colno, error: error ? error.stack : '' } }, '*'); }); window.addEventListener('unhandledrejection', function(event) { window.parent.postMessage({ type: 'iframePromiseRejection', details: { reason: event.reason } }, '*'); }); </script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Tetris with Triangles</title>
<meta name="description" content="Play the classic game of Tetris with triangles instead of rectangles.">
<meta name="keywords" content="tetris, game, triangles">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Built-In Functions for Apps -->
<script type="text/javascript">
var localStoragePrefix = "ct-169292608878361";
var lastSave = 0;
// save to localstorage
function saveLocal(data) {
if (Date.now() - lastSave < 1000) {
return;
}
// save to cookie
let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict";
cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString();
document.cookie = cookie;
lastSave = Date.now();
}
// load from localstorage
function loadLocal() {
var cookiePrefix = localStoragePrefix + "=";
var cookieStart = document.cookie.indexOf(cookiePrefix);
if (cookieStart > -1) {
let cookieEnd = document.cookie.indexOf(";", cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd);
return JSON.parse(cookieData);
}
}
</script>
<style>
body {
background-color: #f6f6f6;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.tetris-container {
position: relative;
width: 300px;
height: 600px;
background-color: #f2f2f2;
border-radius: 10px;
overflow: hidden;
}
.tetris-row {
display: flex;
justify-content: center;
align-items: center;
height: 30px;
}
.tetris-triangle {
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
}
.tetris-triangle-up {
border-bottom: 30px solid #ff5722;
}
.tetris-triangle-down {
border-top: 30px solid #ff5722;
}
.tetris-shape {
position: absolute;
}
.tetris-shape.active {
animation: moveDown 1s linear infinite;
}
.tetris-shape.stopped {
animation: none;
}
.tetris-shape .tetris-triangle {
position: absolute;
bottom: 0;
left: 0;
transition: transform 0.2s;
}
.tetris-shape.rotated .tetris-triangle {
transform: rotate(180deg);
}
.tetris-shape.left {
left: -30px;
}
.tetris-shape.right {
right: -30px;
}
@keyframes moveDown {
0% {
transform: translateY(0);
}
100% {
transform: translateY(30px);
}
}
</style>
<link rel="canonical" href="https://calculator.tools/prompt/4925/">
<meta charset="utf-8">
</head>
<body>
<div id="main-container" class="container">
<div class="tetris-container">
<div id="tetris-grid" class="tetris-grid"></div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function () {
const tetrisGrid = $("#tetris-grid");
let grid = [];
let shape = null;
let intervalId = null;
const rows = 20;
const columns = 10;
// Create the empty grid
for (let i = 0; i < rows; i++) {
let row = [];
for (let j = 0; j < columns; j++) {
row.push(0);
}
grid.push(row);
}
// Create a new shape
function createShape() {
const shapes = [
// Triangle Up
[
[0, 1, 0],
[1, 1, 1]
],
// Triangle Down
[
[1, 1, 1],
[0, 1, 0]
],
// Triangle Left
[
[1, 0],
[1, 1],
[1, 0]
],
// Triangle Right
[
[0, 1],
[1, 1],
[0, 1]
]
];
const randomIndex = Math.floor(Math.random() * shapes.length);
shape = shapes[randomIndex];
const shapeElement = $("<div></div>").addClass("tetris-shape active");
for (let i = 0; i < shape.length; i++) {
for (let j = 0; j < shape[i].length; j++) {
if (shape[i][j] === 1) {
const triangleElement = $("<div></div>").addClass("tetris-triangle tetris-triangle-up");
triangleElement.css("left", j * 30 + "px");
triangleElement.css("bottom", i * 30 + "px");
shapeElement.append(triangleElement);
}
}
}
tetrisGrid.append(shapeElement);
moveShapeDown();
}
// Move the shape down
function moveShapeDown() {
const shapeElement = $(".tetris-shape.active");
const shapeBottom = parseInt(shapeElement.css("bottom"));
if (shapeBottom + 30 < tetrisGrid.height()) {
shapeElement.css("bottom", shapeBottom + 30 + "px");
} else {
stopShape();
}
}
// Stop the shape
function stopShape() {
const shapeElement = $(".tetris-shape.active");
shapeElement.removeClass("active").addClass("stopped");
const shapeBottom = parseInt(shapeElement.css("bottom"));
const shapeLeft = parseInt(shapeElement.css("left"));
const triangles = shapeElement.find(".tetris-triangle");
triangles.each(function () {
const triangle = $(this);
const triangleBottom = parseInt(triangle.css("bottom")) + shapeBottom;
const triangleLeft = parseInt(triangle.css("left")) + shapeLeft;
const row = Math.floor(triangleBottom / 30);
const column = Math.floor(triangleLeft / 30);
grid[row][column] = 1;
});
checkRows();
createShape();
}
// Check for completed rows
function checkRows() {
for (let i = rows - 1; i >= 0; i--) {
let rowComplete = true;
for (let j = 0; j < columns; j++) {
if (grid[i][j] === 0) {
rowComplete = false;
break;
}
}
if (rowComplete) {
grid.splice(i, 1);
const newRow = [];
for (let j = 0; j < columns; j++) {
newRow.push(0);
}
grid.unshift(newRow);
}
}
}
// Move the shape left
function moveShapeLeft() {
const shapeElement = $(".tetris-shape.active");
const shapeLeft = parseInt(shapeElement.css("left"));
if (shapeLeft > 0) {
shapeElement.css("left", shapeLeft - 30 + "px");
}
}
// Move the shape right
function moveShapeRight() {
const shapeElement = $(".tetris-shape.active");
const shapeLeft = parseInt(shapeElement.css("left"));
if (shapeLeft + 30 < tetrisGrid.width()) {
shapeElement.css("left", shapeLeft + 30 + "px");
}
}
// Rotate the shape
function rotateShape() {
const shapeElement = $(".tetris-shape.active");
shapeElement.toggleClass("rotated");
}
// Handle keyboard events
$(document).on("keydown", function (event) {
if (event.keyCode === 37) {
moveShapeLeft();
} else if (event.keyCode === 39) {
moveShapeRight();
} else if (event.keyCode === 38) {
rotateShape();
}
});
// Start the game
function startGame() {
createShape();
intervalId = setInterval(moveShapeDown, 1000);
}
// Stop the game
function stopGame() {
clearInterval(intervalId);
}
startGame();
});
</script>
<script type="text/javascript"> var localStoragePrefix = "ct-{{ cachebreaker }}"; var lastSave = 0; function saveLocal(data) { if (Date.now() - lastSave < 1000) { return; } let cookie = localStoragePrefix + "=" + JSON.stringify(data) + "; path=" + window.location.pathname + "'; SameSite=Strict"; cookie += "; expires=" + new Date(Date.now() + 1000 * 60 * 60 * 24 * 365 * 1000).toUTCString(); document.cookie = cookie; lastSave = Date.now(); } function loadLocal() { var cookiePrefix = localStoragePrefix + "="; var cookieStart = document.cookie.indexOf(cookiePrefix); if (cookieStart > -1) { let cookieEnd = document.cookie.indexOf(";", cookieStart); if (cookieEnd == -1) { cookieEnd = document.cookie.length; } var cookieData = document.cookie.substring(cookieStart + cookiePrefix.length, cookieEnd); return JSON.parse(cookieData); } } </script>
<script type="text/javascript"> window.addEventListener('load', function() { var observer = new MutationObserver(function() { window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); observer.observe(document.body, {attributes: true, childList: true, subtree: true}); window.parent.postMessage({height: document.documentElement.scrollHeight || document.body.scrollHeight},"*"); }); </script>
</body>
</html>
Calculator Tools allows you to instantly create and generate any simple one page web app for
free and immediately have it online to use and share. This means anything! Mini apps,
calculators, trackers, tools, games, puzzles, screensavers... anything you can think of that the
AI can handle.
The AI uses Javacript, HTML, and CSS programming to code your app up in moments. This currently
uses GPT-4 the latest and most powerful version of the OpenAI GPT language model.
Have you ever just wanted a simple app but didn't want to learn programming or pay someone to
make it for you? Calculator Tools is the solution! Just type in your prompt and the AI will
generate a simple app for you in seconds. You can then customize it to your liking and share it
with your friends.
AI has become so powerful it is that simple these days.
It uses GPT-4 which is the most powerful model for ChatGPT.
Calculator Tools does not remember things from prompt to prompt, each image is a unique image
that does not reference any of the images or prompts previously supplied.