Hugging Face's logo

Spaces:
jordonpeter01
/
sf-f52
Running

App Files Community
jordonpeter01 commited on
Commit
cfe778b
·
verified ·
1 Parent(s): 29f2934

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +110 -121
index.html CHANGED
@@ -1,140 +1,129 @@
1
  <!DOCTYPE html>
2
- <html lang="pt-br">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Calculadora Flutuante</title>
7
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
8
  <style>
9
- .calculator {
10
- position: fixed;
11
- bottom: 0;
12
- right: 0;
13
- width: 300px;
14
- height: 400px;
 
 
 
 
 
 
15
  background-color: #fff;
16
- border: 1px solid #ccc;
17
- padding: 10px;
 
 
 
 
18
  }
19
  </style>
20
  </head>
21
  <body>
22
- <div class="container">
23
- <h1>Calculadora Flutuante com Bootstrap</h1>
24
- <p>Esta é uma calculadora foda que fica flutuando na sua tela, pronto para fazer algumas contas fodas quando você precisar.</p>
25
- <div class="calculator">
26
- <div class="row">
27
- <div class="col">
28
- <input type="text" id="display" class="form-control" placeholder="0" readonly>
29
- </div>
30
- </div>
31
- <div class="row">
32
- <div class="col-3">
33
- <button type="button" class="btn btn-light">1</button>
34
- </div>
35
- <div class="col-3">
36
- <button type="button" class="btn btn-light">2</button>
37
- </div>
38
- <div class="col-3">
39
- <button type="button" class="btn btn-light">3</button>
40
- </div>
41
- <div class="col-3">
42
- <button type="button" class="btn btn-primary">+</button>
43
- </div>
44
- </div>
45
- <div class="row">
46
- <div class="col-3">
47
- <button type="button" class="btn btn-light">4</button>
48
- </div>
49
- <div class="col-3">
50
- <button type="button" class="btn btn-light">5</button>
51
- </div>
52
- <div class="col-3">
53
- <button type="button" class="btn btn-light">6</button>
54
- </div>
55
- <div class="col-3">
56
- <button type="button" class="btn btn-primary">-</button>
57
- </div>
58
- </div>
59
- <div class="row">
60
- <div class="col-3">
61
- <button type="button" class="btn btn-light">7</button>
62
- </div>
63
- <div class="col-3">
64
- <button type="button" class="btn btn-light">8</button>
65
- </div>
66
- <div class="col-3">
67
- <button type="button" class="btn btn-light">9</button>
68
- </div>
69
- <div class="col-3">
70
- <button type="button" class="btn btn-primary">x</button>
71
- </div>
72
- </div>
73
- <div class="row">
74
- <div class="col-3">
75
- <button type="button" class="btn btn-light">0</button>
76
- </div>
77
- <div class="col-3">
78
- <button type="button" class="btn btn-primary">=</button>
79
- </div>
80
- <div class="col-3">
81
- <button type="button" class="btn btn-light">.</button>
82
- </div>
83
- <div class="col-3">
84
- <button type="button" class="btn btn-primary">/</button>
85
- </div>
86
- </div>
87
- </div>
88
- </div>
89
- <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
90
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
91
  <script>
92
- $(document).ready(function() {
93
- let display = $('#display');
94
- let num1, num2, operator;
95
-
96
- $('.btn').click(function() {
97
- if ($(this).text() == '=') {
98
- num2 = parseFloat(display.val());
99
- display.val((num1 || 0) + operator + num2 + ' = ' + calculate(num1, num2, operator));
100
- num1 = null;
101
- operator = null;
102
- } else if ($(this).text() == 'C') {
103
- display.val('0');
104
- num1 = null;
105
- num2 = null;
106
- operator = null;
107
- } else {
108
- display.val(display.val() + $(this).text());
109
- num1 = parseFloat(display.val());
110
- }
111
 
112
- if ($(this).text() == '+' || $(this).text() == '-' || $(this).text() == 'x' || $(this).text() == '/') {
113
- operator = $(this).text();
114
- num1 = parseFloat(display.val());
115
- display.val('0');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  }
117
  });
 
118
 
119
- function calculate(n1, n2, op) {
120
- let result;
121
- switch (op) {
122
- case '+':
123
- result = n1 + n2;
124
- break;
125
- case '-':
126
- result = n1 - n2;
127
- break;
128
- case 'x':
129
- result = n1 * n2;
130
- break;
131
- case '/':
132
- result = n1 / n2;
133
- break;
134
  }
135
- return result;
136
- }
137
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
138
  </script>
139
  </body>
140
  </html>
 
1
  <!DOCTYPE html>
2
+ <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Snack Catching Game</title>
 
7
  <style>
8
+ body {
9
+ display: flex;
10
+ flex-direction: column;
11
+ align-items: center;
12
+ margin: 0;
13
+ padding: 0;
14
+ background-color: #f0f0f0;
15
+ font-family: Arial, sans-serif;
16
+ }
17
+
18
+ canvas {
19
+ border: 1px solid black;
20
  background-color: #fff;
21
+ }
22
+
23
+ button {
24
+ padding: 10px 20px;
25
+ font-size: 16px;
26
+ cursor: pointer;
27
  }
28
  </style>
29
  </head>
30
  <body>
31
+ <canvas id="gameCanvas" width="400" height="600"></canvas>
32
+ <button id="startButton">Start Game</button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
33
  <script>
34
+ const canvas = document.getElementById("gameCanvas");
35
+ const ctx = canvas.getContext("2d");
36
+ const startButton = document.getElementById("startButton");
37
+
38
+ let isGameStarted = false;
39
+ let basketX = canvas.width / 2;
40
+ let snackInterval;
41
+ let score = 0;
42
+
43
+ const basket = {
44
+ width: 100,
45
+ height: 20,
46
+ color: "green",
47
+ };
48
+
49
+ const snacks = [];
 
 
 
50
 
51
+ function drawBasket() {
52
+ ctx.fillStyle = basket.color;
53
+ ctx.fillRect(basketX, canvas.height - basket.height, basket.width, basket.height);
54
+ }
55
+
56
+ function moveBasket(event) {
57
+ basketX = event.clientX - canvas.getBoundingClientRect().left;
58
+ basketX = Math.max(basketX, 0);
59
+ basketX = Math.min(basketX, canvas.width - basket.width);
60
+ }
61
+
62
+ function drawSnacks() {
63
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
64
+ drawBasket();
65
+
66
+ snacks.forEach((snack) => {
67
+ ctx.fillStyle = snack.type === "good" ? "yellow" : "red";
68
+ ctx.fillRect(snack.x, snack.y, 20, 20);
69
+ });
70
+ }
71
+
72
+ function updateSnacks() {
73
+ snacks.forEach((snack) => {
74
+ snack.y += snack.speed;
75
+
76
+ if (snack.y > canvas.height) {
77
+ snacks.splice(snacks.indexOf(snack), 1);
78
  }
79
  });
80
+ }
81
 
82
+ function checkCollisions() {
83
+ snacks.forEach((snack) => {
84
+ if (
85
+ basketX < snack.x + 20 &&
86
+ basketX + basket.width > snack.x &&
87
+ canvas.height - basket.height < snack.y + 20 &&
88
+ canvas.height - basket.height + basket.height > snack.y
89
+ ) {
90
+ if (snack.type === "good") {
91
+ score++;
92
+ }
93
+ snacks.splice(snacks.indexOf(snack), 1);
 
 
 
94
  }
95
+ });
96
+ }
97
+
98
+ function generateSnack() {
99
+ const snackType = Math.random() < 0.8 ? "good" : "rotten";
100
+ const snackX = Math.random() * (canvas.width - 20);
101
+ const snackSpeed = Math.random() * 5 + 3;
102
+
103
+ snacks.push({
104
+ type: snackType,
105
+ x: snackX,
106
+ y: -20,
107
+ speed: snackSpeed,
108
+ });
109
+ }
110
+
111
+ function gameLoop() {
112
+ updateSnacks();
113
+ drawSnacks();
114
+ checkCollisions();
115
+ generateSnack();
116
+ }
117
+
118
+ function startGame() {
119
+ isGameStarted = true;
120
+ startButton.disabled = true;
121
+ drawBasket();
122
+ snackInterval = setInterval(gameLoop, 30);
123
+ }
124
+
125
+ canvas.addEventListener("mousemove", moveBasket);
126
+ startButton.addEventListener("click", startGame);
127
  </script>
128
  </body>
129
  </html>