lap trinh games

11:04 No Comments

Đang tải...

Level: 1

Đang tải...

Rất tiếc bạn đã trả lời sai

//https://laptrinhcuocsong.com/lam-app-android-bang-html-css-javascript-thuan-phan-1.html var app = function(){ this.ui = new ui(this); this.network = new network(this); this.data = []; this.level = 0; this.question = null; var self = this; // Boot all first time load this.boot = function(){ this.ui.setScene('welcome'); this.ui.listenEvents(); this.loadData(); } // Load data from api this.loadData = function(){ this.network.get( DATA_URL, function(data){ self.data = data; self.ui.hide('loadingText'); self.ui.show('startButton'); }, function(error){ alert(error); } ) } // Preload an image this.loadImage = function(){ this.ui.show('imageLoading'); this.network.loadImage( self.data[self.level].image, function(image){ self.ui.hide('imageLoading'); self.ui.showImage(image); } ); } // Start new game this.start = function(){ this.ui.setScene('image'); this.loadImage(); } // Pick a ramdom question then show it this.pickAndShowQuestion = function(){ // Pick a random question var questions = this.data[this.level].questions; var random = Math.round(Math.random() * (questions.length - 1)); this.question = questions[random]; // Show it this.ui.showQuestion(this.question); this.ui.setScene('question'); } // Check for answer on button click this.checkAnswer = function(answer){ if (answer == this.question.correct){ this.nextLevel(); } else { this.ui.setScene('gameOver'); } } // Next level this.nextLevel = function(){ if (this.level == this.data.length - 1){ alert("Bạn đã chiến thắng"); this.restart(); return; } this.level++; this.ui.updateLevelNumber(); this.ui.setScene('image'); this.loadImage(); } // Restart game this.restart = function(){ this.level = 0; this.ui.updateLevelNumber(); this.ui.setScene('welcome'); } } var network = function(app){ // Get data, this function use very-basic ajax request this.get = function(url, successCallback, errorCallback){ var request = new XMLHttpRequest(); request.open('GET', url); request.onload = function() { if (request.status === 200) { successCallback(JSON.parse(request.responseText)); } else { errorCallback(request.status); } }; request.send(); } // Preload an image this.loadImage = function(imageUrl, successCallback, errorCallback){ var img = new Image(); img.onload = function(){ successCallback(img); } img.onerror = function(){ errorCallback(); } img.src = imageUrl; } } var ui = function(app){ this.app = app; var self = this; // Get HTML element by id this.getElement = function(elementId){ return document.getElementById(elementId); } // Show an element this.show = function(elementId){ this.getElement(elementId).style.display = 'block'; } // Hide an element this.hide = function(elementId){ this.getElement(elementId).style.display = 'none'; } // Set current scene this.setScene = function(sceneName){ // Get all elements have class .scene var elements = document.getElementsByClassName('scene'); // Then hide them [].forEach.call( elements, function(element) { element.style.display = 'none'; }); // Then show element has id screenName this.show(sceneName); } // Show image this.showImage = function(image){ this.getElement('imageWrapper').innerHTML = ''; this.getElement('imageWrapper').appendChild(image); } // Update level number on top of the app this.updateLevelNumber = function(){ this.getElement('level').innerHTML = this.app.level + 1; } // Show question text and 4 answer buttons this.showQuestion = function(question){ this.getElement('questionText').innerHTML = question.question; this.getElement('answerButton0').innerHTML = question.answers[0]; this.getElement('answerButton1').innerHTML = question.answers[1]; this.getElement('answerButton2').innerHTML = question.answers[2]; this.getElement('answerButton3').innerHTML = question.answers[3]; } // Listen click events this.listenEvents = function(){ // Click start button this.getElement('startButton').addEventListener('click', function(){ self.app.start(); }); // Click #image div this.getElement('image').addEventListener('click', function(){ self.app.pickAndShowQuestion(); }); // Click restartGame button this.getElement('restartGame').addEventListener('click', function(){ self.app.restart(); }); // Listen click event for 4 answer buttons this.getElement('answerButton0').addEventListener('click', function(){ self.app.checkAnswer(0); }); this.getElement('answerButton1').addEventListener('click', function(){ self.app.checkAnswer(1); }); this.getElement('answerButton2').addEventListener('click', function(){ self.app.checkAnswer(2); }); this.getElement('answerButton3').addEventListener('click', function(){ self.app.checkAnswer(3); }); } } /* * Now we are ready to go */ window.onload = function(){ var girlPuzzle = new app(); girlPuzzle.boot(); }