Update Stage Question? Moving New Objects Repeatedly Down Using JavaScript & Canvas
I'm having a real hard time moving an object down (i.e. another equation) smoothly after clicking the New Question button here. At first, I tried to create a setTimeout() function but it just delayed everything and too much was going on to figure out how many milliseconds the object moved. What is commonly done to move a new object down the same way as the previous one after clicking a button?
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<script>
var k=1;
// k = Number of Questions
function addInput(qnj) {
var x = document.createElement("INPUT");
var qn=qnj.slice(0,-1);
x.setAttribute("id", qn);
x.setAttribute("type", "hidden");
x.setAttribute("value", document.getElementById(qnj).value);
document.body.appendChild(x);
}
function response(){
alert("New Question");
addInput("q1j");
document.getElementById('eqn1').remove();
}
for(let i=1; i<=k; i++){
const quest=[];
quest[i]= document.getElementById(`q${i}j`);
quest[i].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
}
</script>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
const values = [];
values[1] = document.getElementById("q1j");
var stage = new createjs.Stage("gameCanvas");
var obj=[]
for (let i = 1; i <= k; i++) {
obj[i] = new createjs.DOMElement(document.getElementById(`eqn${i}`));
}
var gravity = 1;
can = document.getElementById("gameCanvas");
for (let i = 1; i <= k; i++) {
obj[i].x = Math.random()* can.width;
obj[i].y = 0.5;}
function startGame() {
stage.addChild(obj[1]);
setTimeout(delay, 5000);
function delay(){
stage.addChild(obj[2]);
}
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event){
drop();
stage.update();
}
}
function drop(){
for (let i = 1; i <= k; i++) {
obj[i].x += 1;
obj[i].y +=3;
}
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>Brief Explanation of Code: What is going on in the code above is that equation 1 (i.e. eq1 which is 3+3=some input) is added to the stage/canvas. This equation becomes obj[1] and is moved downward with the drop() function. The equation gets removed with the response() function which is activated by clicking "myBtn". Before the equation gets removed, the id from the input is assigned from q1j is resaved as q1 so that way I can get the values from the id's later to have them saved in a database.
I have made a little bit of progress here. The alert m when you click the button is now two upon the next iteration. However, the next equation is not moving unfortunately...
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="//code.createjs.com/createjs-2013.09.25.combined.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!----------------------------- Start Game ------------------->
<style>
#gameCanvas {
background-color: lightyellow;
}
</style>
<div class="canvasHolder1">
<div id="eqn1"> 3+3=<input type="text" id="q1j" />
</div>
<div id="eqn2"> 3+2=<input type="text" id="q2j" />
</div>
<button id="myBtn" onclick="response()">New Question</button>
<script>
function addInput(qnj) {
var x = document.createElement("INPUT");
var qn=qnj.slice(0,-1);
x.setAttribute("id", qn);
x.setAttribute("type", "hidden");
x.setAttribute("value", document.getElementById(qnj).value);
document.body.appendChild(x);
}
var m=1;
function response(){
alert("New Question");
addInput(`q${m}j`);
document.getElementById(`eqn${m}`).remove();
m=m+1;
alert(m);
stage.update();
}
const quest=[];
quest[m]= document.getElementById(`q${m}j`);
quest[m].addEventListener("keyup", function(event) {
if (event.keyCode === 13 ) {
document.getElementById("myBtn").click();
event.preventDefault();
}
});
</script>
<canvas id="gameCanvas" width="600" height="600">Not supported</canvas>
<script type="text/javascript">
const values = [];
values[m] = document.getElementById(`q${m}j`);
var stage = new createjs.Stage("gameCanvas");
var obj=[]
obj[m] = new createjs.DOMElement(document.getElementById(`eqn${m}`));
var gravity = 1;
can = document.getElementById("gameCanvas");
obj[m].x = Math.random()* can.width;
obj[m].y = 0.5;
function startGame() {
stage.addChild(obj[m]);
createjs.Ticker.addEventListener("tick", handleTick);
function handleTick(event){
drop(m);
stage.update();
}
}
function drop(i){
obj[i].x += 1;
obj[i].y +=3;
}
</script>
<body onload="startGame();">
<div >
<canvas>This browser or document mode doesn't support canvas object.</canvas>
</div>
</body>
</html>from Recent Questions - Stack Overflow https://ift.tt/3h4SnpI
https://ift.tt/eA8V8J
Comments
Post a Comment