Skip to content

Instantly share code, notes, and snippets.

@MacTanomsup

MacTanomsup/index.html

Created July 22, 2016 06:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save MacTanomsup/ce19661f56eb601db5d4870083f46aeb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save MacTanomsup/ce19661f56eb601db5d4870083f46aeb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Home Voice Control</title>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<center>
<a href="https://medium.com/@maccismyname">
<img src="logo.png"/>
</a>
</center>
<div class="container">
<br>
<center>
<h2 id="info_microphone">สวัสดี, วันนี้ต้องการให้ช่วยอะไร?</h2>
</center>
<br>
<center>
<button id="start_button" onclick="startButton(event)">
<img id="start_img" src="mic.gif" alt="Start"></button>
</center>
<br>
<div id="results">
<p>คำสั่ง : </p>
<p id="final_span" class="final"></p>
<br>
<p>ผลลัพธ์ : </p>
<p id="final_result"></p>
</div>
<p>ลองพูดคำสั่งต่อไปนี้สิ : สวัสดี, สบายดีไหม, เปิดไฟหน้าบ้าน, ปิดไฟทั้งหมด </p>
</div>
</body>
<script>
//Welcome sound !!
var msg = new SpeechSynthesisUtterance('สวัสดี, วันนี้ต้องการให้ช่วยอะไร?');
msg.lang = 'th-TH';
window.speechSynthesis.speak(msg);
var final_transcript = '';
var recognizing = false;
var ignore_onend;
if (!('webkitSpeechRecognition' in window)) {
//if don't have a webkitSpeechRecognition
} else {
var recognition = new webkitSpeechRecognition();
recognition.lang = "th-TH";
recognition.onstart = function() {
recognizing = true;
start_img.src = 'mic-animate.gif';
};
recognition.onresult = function(event) {
console.log(event)
var interim_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
} else {
interim_transcript += event.results[i][0].transcript;
}
}
final_span.innerHTML = final_transcript;
speak(final_transcript);
}
}
function startButton(event) {
if (recognizing) {
recognition.stop();
return;
}
final_transcript = '';
recognition.start();
ignore_onend = false;
start_img.src = 'mic-slash.gif';
}
recognition.onend = function() {
recognizing = false;
if (ignore_onend) {
return;
}
start_img.src = 'mic.gif';
};
// ignore //
// var first_char = /\S/;
// function capitalize(s) {
// return s.replace(first_char, function(m) { return m.toUpperCase(); });
// }
//
// var two_line = /\n\n/g;
// var one_line = /\n/g;
// function linebreak(s) {
// return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
// }
// ignore //
function speak(text) {
//Hardcode becuz it's a tutorial. Got it?
var msg_light = 'เปิดไฟหน้าบ้าน';
var turnoffAllLight = 'ปิดไฟทั้งหมด'
var whatsup = 'สบายดีไหม';
var sawasdee = 'สวัสดี';
//Text to speech
var speechSynthesis = new SpeechSynthesisUtterance();
speechSynthesis.voiceURI = 'native';
speechSynthesis.volume = 1; // 0 to 1
speechSynthesis.rate = 1; // 0.1 to 10
speechSynthesis.pitch = 2; //0 to 2
speechSynthesis.lang = 'th-TH';
var msg = '';
//Do whatever you want.
if(text.search(msg_light) != -1 || text.search(turnoffAllLight) != -1 ) {
msg = "ทำการ" + text + "เรียบร้อยแล้วค่ะ";
speechSynthesis.text = msg;
} else if(text.search(whatsup) != -1) {
msg = 'สบายดีค่ะ, แล้วคุณหล่ะคะ ';
speechSynthesis.text = msg;
} else if(text.search(sawasdee) != -1) {
msg = 'สวัสดีค่ะ หนีฮ่าว สบายดี ฮัลโหล';
speechSynthesis.text = msg;
} else {
msg = 'คำสั่งดังกล่าวยังไม่มีในฐานข้อมูลค่ะ';
speechSynthesis.text = msg;
}
window.speechSynthesis.speak(speechSynthesis);
final_result.innerHTML = msg;
}
</script>
</html>
@to3251-beep
Copy link

to3251-beep commented Sep 29, 2025

<title>Mini Retro Bowl</title> <style> body { background: #222; color: #eee; font-family: 'Courier New', Courier, monospace; display: flex; flex-direction: column; align-items: center; padding: 20px; height: 100vh; margin: 0; } h1 { margin-bottom: 10px; } .game-container { background: #111; border: 2px solid #55ff55; border-radius: 8px; padding: 20px; width: 320px; text-align: center; } button { background: #55ff55; border: none; color: #111; padding: 12px 24px; font-size: 16px; margin: 10px; border-radius: 6px; cursor: pointer; transition: background 0.3s ease; } button:hover { background: #33cc33; } .status { margin: 15px 0; min-height: 60px; } .scoreboard { margin-top: 20px; font-size: 18px; } </style>

Mini Retro Bowl

Choose your play:
Run Pass 
<div class="status" id="status">Make your first play!</div>

<div class="scoreboard">
  <div>Yards Gained: <span id="yards">0</span></div>
  <div>Score: <span id="score">0</span></div>
  <div>Down: <span id="down">1</span></div>
  <div>Distance to First Down: <span id="distance">10</span></div>
</div>
<script> const runBtn = document.getElementById('run-btn'); const passBtn = document.getElementById('pass-btn'); const statusDiv = document.getElementById('status'); const yardsSpan = document.getElementById('yards'); const scoreSpan = document.getElementById('score'); const downSpan = document.getElementById('down'); const distanceSpan = document.getElementById('distance'); let totalYards = 0; let score = 0; let down = 1; let distance = 10; let plays = 0; const maxPlays = 10; function playRun() { // Run plays are safer but shorter gains // 70% chance of success, 1-7 yards gained const success = Math.random() < 0.7; if(success) { const gained = Math.floor(Math.random() * 7) + 1; return gained; } else { return 0; // no gain or loss on fail } } function playPass() { // Pass plays riskier: 50% chance of success // Success: 3-15 yards, Fail: interception (game over) const success = Math.random() < 0.5; if(success) { const gained = Math.floor(Math.random() * 13) + 3; return gained; } else { return -1; // interception } } function updateDisplay() { yardsSpan.textContent = totalYards; scoreSpan.textContent = score; downSpan.textContent = down; distanceSpan.textContent = distance; } function resetGame() { totalYards = 0; score = 0; down = 1; distance = 10; plays = 0; statusDiv.textContent = 'Make your first play!'; updateDisplay(); } function endGame(message) { statusDiv.textContent = message + " Game Over! Your final score: " + score; runBtn.disabled = true; passBtn.disabled = true; } function play(playType) { if(plays >= maxPlays) { endGame("Max plays reached."); return; } let yardsGained; if(playType === 'run') { yardsGained = playRun(); } else { yardsGained = playPass(); if(yardsGained === -1) { endGame("Interception! You lost the ball."); return; } } plays++; if(yardsGained > 0) { statusDiv.textContent = `Good play! You gained ${yardsGained} yards.`; totalYards += yardsGained; distance -= yardsGained; if(distance <= 0) { // First down! down = 1; distance = 10; score += 7; // Touchdown bonus simplified statusDiv.textContent += " First down! Touchdown! +7 points!"; } else { down++; } } else { statusDiv.textContent = `No gain on the play.`; down++; } if(down > 4) { endGame("Turnover on downs."); return; } updateDisplay(); if(plays >= maxPlays) { endGame("Max plays reached."); } } runBtn.addEventListener('click', () => play('run')); passBtn.addEventListener('click', () => play('pass')); resetGame(); </script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment