mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-22 13:57:50 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add touch support :3

Browse source
This commit is contained in:
Ashley 2024-01-08 16:04:09 +00:00
parent 64ec936fe2
commit 11b3f678d2
1 changed files with 82 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

88
html/gamehub.ejs
View file

@ -15,7 +15,7 @@
<style> <style>
body { body {
margin: 0; margin: 0;
font-family: 'Arial', sans-serif; font-family: 'PokeTube flex', sans-serif;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -28,9 +28,14 @@
text-align: center; text-align: center;
padding: 20px; padding: 20px;
} }
h1 { h1 {
margin-top: 0; margin-top: 0;
font-weight: 1000;
font-stretch: ultra-expanded;
font-family: "Poketube flex";
font-style: italic;
color: #ffabcc;
} }
.game-container { .game-container {
@ -40,6 +45,14 @@
flex-wrap: wrap; flex-wrap: wrap;
} }
@font-face {
font-family: "PokeTube Flex";
src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
font-style: normal;
font-stretch: 1% 800%;
font-display: swap;
}
.game { .game {
flex: 0 0 300px; flex: 0 0 300px;
padding: 20px; padding: 20px;
@ -270,6 +283,38 @@ function resetGame() {
} }
}); });
// Set up touch controls
let touchStartX, touchStartY;
canvas.addEventListener("touchstart", function(event) {
touchStartX = event.touches[0].clientX;
touchStartY = event.touches[0].clientY;
});
canvas.addEventListener("touchmove", function(event) {
const touchEndX = event.touches[0].clientX;
const touchEndY = event.touches[0].clientY;
const dx = touchEndX - touchStartX;
const dy = touchEndY - touchStartY;
if (Math.abs(dx) > Math.abs(dy)) {
// Horizontal swipe
if (dx > 0 && direction !== "left") {
direction = "right";
} else if (dx < 0 && direction !== "right") {
direction = "left";
}
} else {
// Vertical swipe
if (dy > 0 && direction !== "up") {
direction = "down";
} else if (dy < 0 && direction !== "down") {
direction = "up";
}
}
});
// Set up the game loop // Set up the game loop
setInterval(gameLoop, 100); setInterval(gameLoop, 100);
</script> </script>
@ -286,7 +331,7 @@ function resetGame() {
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: "Poketube flex", sans-serif;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
@ -314,6 +359,19 @@ function resetGame() {
font-size: 2em; font-size: 2em;
cursor: pointer; cursor: pointer;
} }
@font-face {
font-family: "PokeTube Flex";
src: url("https://p.poketube.fun/https://cdn.glitch.global/43b6691a-c8db-41d4-921c-8cf6aa0d9108/robotoflex.ttf?v=1668343428681");
font-style: normal;
font-stretch: 1% 800%;
font-display: swap;
}
.container > h1 {
font-weight: 1000;
font-stretch: ultra-expanded;
font-style: italic;
}
</style> </style>
<title>Tic-Tac-Toe</title> <title>Tic-Tac-Toe</title>
</head> </head>
@ -568,7 +626,7 @@ function resetGame() {
//--><!]]> //--><!]]>
</script> </script>
<script> <script>
const canvas = document.getElementById("pongCanvas"); const canvas = document.getElementById("pongCanvas");
const ctx = canvas.getContext("2d"); const ctx = canvas.getContext("2d");
const paddleWidth = 10; const paddleWidth = 10;
@ -710,7 +768,7 @@ function resetGame() {
ballSpeedX = Math.random() > 0.5 ? 5 : -5; ballSpeedX = Math.random() > 0.5 ? 5 : -5;
ballSpeedY = Math.random() > 0.5 ? 5 : -5; ballSpeedY = Math.random() > 0.5 ? 5 : -5;
gameActive = true; gameActive = true;
}, 1000); }, 100);
} }
function update() { function update() {
@ -740,6 +798,23 @@ function resetGame() {
} }
}); });
// Touch controls
canvas.addEventListener("touchstart", function(event) {
if (!gameActive) {
resetGame();
ballSpeedX = Math.random() > 0.5 ? 5 : -5;
ballSpeedY = Math.random() > 0.5 ? 5 : -5;
gameActive = true;
}
});
canvas.addEventListener("touchmove", function(event) {
const touchY = event.touches[0].clientY - canvas.offsetTop;
if (touchY > leftPaddleY && touchY < leftPaddleY + paddleHeight) {
leftPaddleY = touchY - paddleHeight / 2;
}
});
update(); update();
</script> </script>
</body> </body>
@ -1016,3 +1091,4 @@ function resetGame() {
</html> </html>
<% } %> <% } %>