У меня небольшая проблема с Javacript. В моем скрипте есть массив источников изображений, которые я хочу отображать один за другим при вводе пользователем.
Проблема в том, что когда я впервые нажимаю кнопку Пуск (document.getElementById ("toStart"), которой я даю EventListener), на холсте ничего не отображается. Однако была вызвана функция changeDisplay () (журнал есть).
Затем я ввожу ключ, любую клавишу, и переменная итератора увеличивается, я получаю новый журнал, и на этот раз отображается изображение шара. Изображение шара, имеющее индекс 0 в моем массиве фотографий. Он отображает все изображения одно за другим, когда я что-то вводю, но он всегда «один выключен», как показано на предыдущем изображении вместо следующего.
Вот мой урезанный скрипт test.js:
//canvas
var canvas = document.getElementById("test_canvas");
var ctx = canvas.getContext("2d");
//gameloop
var gameHasStarted = false;
//Current question number
var iterator = 0;
//The timer for the changeQuestion method
var t2;
//interval between questions
var intervalBetweenQuestions = 3000;
//Images to display
var pics = ['../images/uploads/ball.png', '../images/uploads/img1.jpg', '../images/uploads/img2.jpg', '../images/uploads/img3.jpg'];
//reference to the image slot in the Twig template
var imageTest = document.getElementById('imageTest');
window.onload = function() {
document.addEventListener('keydown', function(event) {
// alert('keydown');
if(gameHasStarted) {
checkKeyPressed(event);
}
}, false);
};
document.getElementById("toStart").addEventListener('click', function(event) {
changeDisplay();
//every X seconds, here 3 -- If the user doesn't input anything, this switchs the questions when the X seconds are up
t2 = setInterval(changeQuestion, intervalBetweenQuestions);
gameHasStarted = true;
});
function changeQuestion() {
if(gameHasStarted){
if(iterator < pics.length) {
if(answers[iterator] == null) {
//No answer has been given
answers[iterator] = -1;
alert("no answer given");
}
iterator++;
//cleans the interval for the new questions
clearInterval(t2);
t2 = setInterval(changeQuestion, intervalBetweenQuestions);
changeDisplay();
} else {
alert("Finished the test (you timed out at the end)!");
//redirect at the end
// window.location.href = Routing.generate('homepage');
}
}
}
function checkKeyPressed(e){
//the key pressed by the user
var keynum;
if(window.event) { // IE
keynum = e.keyCode;
} else if(e.which){ // Netscape/Firefox/Opera
keynum = e.which;
}
if(keynum < 48 || keynum > 90) {
/** Ignores F5 for example**/
} else {
if(iterator < pics.length) {
//gets the input of the player recorded
answers[iterator] = keynum;
changeQuestion();
} else {
alert("Finished the test !");
window.location.href = Routing.generate('homepage');
}
}
}
function changeDisplay() {
//Clears the canvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
//sets the image's source to the one of the current question
imageTest.src = pics[iterator];
//Debug
console.log("Iterator : " + iterator + " and image " + imageTest.src);
//Draws the image -- excuse the weird coordinates
ctx.drawImage(imageTest, 10 + (iterator + 1)*5, 10+(iterator+1)*5);
return true;
}
И мой шаблон Twig:
{% block body %}
<div class="row">
<div class="offset-md-3"></div>
<p id="labelTest">Here</p>
</div>
<div class="row">
<div class="offset-md-3"></div>
<canvas id="test_canvas" width="760" height="520"></canvas>
</div>
<div class="row offset-md-3">
<button id="toStart">Start</button>
</div>
<div style="display:none;">
<img id="imageTest" src="#"
width="300" height="227">
</div>
{% endblock %}
{% block javascripts %}
<script src="{{ asset('bundles/fosjsrouting/js/router.js') }}"></script>
<script src="{{ path('fos_js_routing_js', { callback: 'fos.Router.setData' }) }}"></script>
<script src="{{ asset('js/test.js') }}"></script>
{% endblock %}
Первый журнал отладки, когда я нажимаю кнопку «Пуск» в первый раз и вызывается метод changeDisplay (), это
Iterator : 0 and image http://localhost:8000/images/uploads/ball.png test.js:54:5
Это именно то, что я хочу, но изображение не отображается.
Затем, когда я что-то нажимаю и делается другой вызов changeDisplay (), появляется сообщение:
Iterator : 1 and image http://localhost:8000/images/uploads/img1.jpg test.js:54:5
, это тоже именно то, что я хочу, но на этот раз изображение шарика печатается на холсте вместо img1.jpg.
Есть идеи?
Спасибо!