Pesquisar na Comunidade
Mostrando resultados para as tags ''trackingjs''.
Encontrado 1 registro
-
Bom fiz um joguinho besta usando o Tracking.js. Para quem não conhece, tracking.js é uma biblioteca em javascript que oferece diversas funcionalidades. Desde detecção de cores em imagens/videos até detecção facial (rosto, boca, olhos, etc). O jogo que fiz é so para brincar um pouco com a biblioteca. E um joguinho de verdadeiro ou falso, onde o papelzinho rosa é falso e o papelzinho amarelo é verdadeiro. Eu usei papel (arranquei o papelao da caixa de remedio). Tambem usei a detecção das cores Magenta e Yellow porque é o padrão que eles oferecem. Se voce quiser dar uma olhada depois na documentação, voce pode registrar cores a partir do RGB. As regras do jogo são: Se voce acertar, ganha 1 ponto. Se errar, perde 2. Se não responder perde 1. Voce tem 2 segundos para levantar a cor rosa ou amarela para responder. Abaixo segue o print da minha pessoa jogando esse coco de jogo (obs ta com erro de charset, mas aqui eu já coloquei o codigo com o ajuste): Para rodar o jogo, voce precisa criar os arquivos game.html e o tracking.js no mesmo lugar do seu computador e se voce tiver o python 2.7 voce vai no CMD no local onde estao esses arquivos e digita: python -m SimpleHTTPServer Se for o python 3, voce digita: python -m http.server Com isso voce criar um servidor apache local pra rodar teu game. Ai voce acessa no teu browser localhost:8000 e seleciona o arquivo game.html Segue abaixo os códigos dos arquivos que voce precisa criar: game.html: <html> <head> <meta charset="utf-8"> <title>Verdadeiro ou Falso - Color Detect</title> <script src="tracking.js"></script> <script src="[Hidden Content]" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> </head> <body> <style> video, canvas { right: 20; top: 20; position: absolute; } .you-answer { color: red; } </style> <div class="demo-frame"> <div class="demo-container"> <video id="video" width="400" height="250" preload autoplay loop muted controls></video> <canvas id="canvas" width="400" height="250"></canvas> </div> <h4>VERDADEIRO OU FALSO? (Amarelo = Verdadeiro // Rosa = Falso)</h4> <div>Regras: Ao clicar em iniciar, voce tera 2 segundos para responder VERDADEIRO(amarelo) ou FALSO(rosa) para as afirmacoes. <br>Se acertar ganha 1 pontos, se errar perde 2. Se demorar, perde 1 ponto. <br>Se sua pontuacao for menor que zero, voce perde. </div> <br> <h5><b>AFIRMACAO:</b> <span id="afirmacao"></span></h5> <div><b>PONTUACAO:</b> <span id="score"></span></div> <div class="you-answer"></div> <br> <button onclick="startGame()">INICIAR</button> </div> <script> var perguntas = [ { title: "Neymar é goleiro", value: false }, { title: "webcheats é um forum de encontros de casais", value: false }, { title: "tenispé é desodorante pra pessoas com chulé", value: true }, { title: "Cr4cko é muito bonito", value: true }, ] var pergunta_selecionada = null; var pode_responder = false; var resposta_certa = null; var score = 0; function startGame() { resposta_certa = null; $(".you-answer").text(""); $("#afirmacao").text("....... proxima pergunta ......."); setTimeout(function () { var index = Math.floor((Math.random() * perguntas.length) + 0); pergunta_selecionada = perguntas[index]; pode_responder = true; $("#afirmacao").text(pergunta_selecionada.title); }, 1000); setTimeout(function () { if (resposta_certa == null){ score -= 1; $(".you-answer").text("demorou demais! -1 pontos") } else if (resposta_certa == pergunta_selecionada.value){ score += 1; $(".you-answer").text("sua resposta esta certa! +1 pontos") } else { score -= 2; $(".you-answer").text("sua resposta esta errada! -2 ponto") } $("#score").text(score); pergunta_selecionada = null; }, 2000); //2 segundos pra responder if(score < 0){ alert("VOCE PERDEU!"); score = 0; } else { setTimeout(function () { startGame() }, 3000); //reiniciando jogo em 3 segundos }; } window.onload = function() { var isqueiro = "#6fdb86"; var gravata = "#125bb0"; var video = document.getElementById('video'); var canvas = document.getElementById('canvas'); var context = canvas.getContext('2d'); var tracker = new tracking.ColorTracker(['yellow', 'magenta']); tracking.track('#video', tracker, { camera: true }); tracker.on('track', function(event) { context.clearRect(0, 0, canvas.width, canvas.height); event.data.forEach(function(rect) { if (pergunta_selecionada){ if (pode_responder){ if (rect.color == "magenta"){ //falso resposta_certa = false; } else if (rect.color == "yellow"){ resposta_certa = true; } console.log("pergunta:", pergunta_selecionada.title, " | sua resposta: ", resposta_certa) pode_responder = false; } } //Apenas context.strokeStyle = rect.color; context.strokeRect(rect.x, rect.y, rect.width, rect.height); }); }); }; </script> </body> </html> Já o arquivo tracking.js, voce copia e cola o que está nesse link: [Hidden Content] Qualquer dúvda é so comentar. Abs
- 1 resposta
-
- 2
-
-
- detecção de cor
- joguinho
- (e 2 mais)
