AS2 in JavaScript add score 1 press button A and B clicked id null
<!DOCTYPE html>
<html>
<body>
<button id="btnA">Button A</button>
<button id="btnB">Button B</button>
<p>Score: <span id="score">0</span></p>
<script>
// Simple AS2-style button click handling
var score = 0;
var aPressed = false;
var bPressed = false;
// Create button objects like in AS2
btnA = document.getElementById("btnA");
btnB = document.getElementById("btnB");
// AS2-style onPress functions
btnA.onPress = function() {
aPressed = true;
checkScore();
};
btnB.onPress = function() {
bPressed = true;
checkScore();
};
function checkScore() {
if (aPressed && bPressed) {
score++;
document.getElementById("score").textContent = score;
aPressed = bPressed = false; // Reset
}
}
// Add click listeners to simulate AS2 onPress
btnA.addEventListener("click", btnA.onPress);
btnB.addEventListener("click", btnB.onPress);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<style>
button {
padding: 10px;
margin: 5px;
font-size: 16px;
}
#traceBox {
margin-top: 20px;
font-size: 16px;
padding: 10px;
border: 1px solid #ccc;
width: 300px;
}
#result {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
Other code
<!-- Buttons -->
<button id="btnA">A</button>
<button id="btnB">B</button>
<button id="btnC">C</button>
<!-- Trace Display -->
<div id="traceBox">Clicked Buttons: </div>
<div id="result"></div>
<script>
let clickedId1 = null;
let clickedId2 = null;
function handleClick(event) {
if (clickedId1 === null) {
clickedId1 = event.target.id;
document.getElementById('traceBox').textContent = "First Click: " + clickedId1;
} else {
clickedId2 = event.target.id;
document.getElementById('traceBox').textContent = "First Click: " + clickedId1 + ", Second Click: " + clickedId2;
if (clickedId1 === clickedId2) {
document.getElementById('result').textContent = "Match!";
} else {
document.getElementById('result').textContent = "Try Again!";
}
// Reset after 1 second
setTimeout(() => {
clickedId1 = null;
clickedId2 = null;
document.getElementById('result').textContent = "";
document.getElementById('traceBox').textContent = "Clicked Buttons: ";
}, 1000);
}
}
// Add event listeners to buttons
document.getElementById("btnA").addEventListener("click", handleClick);
document.getElementById("btnB").addEventListener("click", handleClick);
document.getElementById("btnC").addEventListener("click", handleClick);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<!-- Big buttons with inline CSS -->
<button onclick="pick(this)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="pick(this)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="pick(this)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<button onclick="pick(this)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<p id="result" style="font-size:20px;"></p>
<script>
let first = null;
function pick(btn) {
// Prevent same button being pressed twice
if (btn === first) return;
if (!first) {
first = btn;
btn.style.background = "yellow";
} else {
if (btn.textContent === first.textContent) {
result.textContent = "Match!";
first.disabled = true;
btn.disabled = true;
} else {
result.textContent = "Try Again";
}
first.style.background = "";
first = null;
}
}
</script>
</body>
</html>
Other code
<!DOCTYPE html>
<html>
<body>
<!-- Big buttons with inline CSS -->
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<p id="result" style="font-size:20px;"></p>
<script>
let clickedId1 = null;
let clickedId2 = null;
function handleClick(event) {
if (event.target === clickedId1) return;
if (!clickedId1) {
clickedId1 = event.target;
event.target.style.background = "yellow";
} else {
clickedId2 = event.target;
if (clickedId1.textContent === clickedId2.textContent) {
document.getElementById('result').textContent = "Match!";
clickedId1.disabled = true;
clickedId2.disabled = true;
} else {
document.getElementById('result').textContent = "Try Again!";
}
setTimeout(() => {
clickedId1.style.background = "";
clickedId1 = null;
clickedId2 = null;
document.getElementById('result').textContent = "";
}, 1000);
}
}
</script>
</body>
</html>
<html>
<body>
<!-- Big buttons -->
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">A</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<button onclick="handleClick(event)" style="width:100px;height:60px;font-size:20px;margin:10px;">B</button>
<p id="result" style="font-size:20px;"></p>
<script>
let clickedId1 = null;
let result = document.querySelector("#result");
function handleClick(event) {
if (event.target === clickedId1) return;
if (clickedId1 == null) {
clickedId1 = event.target;
clickedId1.style.background = "yellow";
result.textContent = "";
} else {
if (clickedId1.textContent === event.target.textContent) {
result.textContent = "Match!";
clickedId1.disabled = true;
event.target.disabled = true;
} else {
result.textContent = "Try Again!";
}
// Reset background
clickedId1.style.background = "";
event.target.style.background = "";
// Clear selection
clickedId1 = null;
}
}
</script>
</body>
</html>
Comments
Post a Comment