Извеждане на резултат чрез javascript (balloon) и html5.

M

MoH7aH4o

Registered
Здравейте, имам следния код [js]
var
correct = 0, // брой на верните отговори
wrong = 0, // брой на грешните отговори
max = 5, // максимален брой верни отговори = броя на картинките
startTimer = new Date(), // Стартираме таймер в началото на играта
endTimer; // Променлива, която ще инициализираме в края на играта
// за да сравним времената

....

// Ако потребителят е познал всички картинки - изписваме резултата
if( correct == max ) {
endTimer = new Date();

// Разликата между двата таймера в милисекунди
var diff = endTimer.getTime() - startTimer.getTime();
// Обръщаме я в секунди
diff = diff / 1000;

message = "Край на играта!<br><br>";
message += 'Верни: ' + correct + "<br>";
message += 'Грешни: ' + wrong + "<br>";
message += 'Време: ' + diff + " секунди<br><br>";
message += 'Изпълнение: ';

message += Math.round( 100 * ( correct / ( correct + wrong ) ) ) + '%';

document.getElementById( 'container' ).innerHTML = message;
}

[/js]

Как мога да направя да ми изкарва резултата в нещо като балон?

И да не пускам нова тема, може ли да ми кажете, как да направя ифнормацията да се съхранява в база от данни (localStorage на HTML5)
 
Не, използвам кода, който съм показал, чрез него ми извежда броя на верните и грешните отговори. Но когато дойде момента да се покажат, ги показва горе в ляво, а на мен ми се иска да ги покава по средата и да са в нещо като балон. А иначе изображенията се зареждат чрез обикновен HTML, не чрез канвас. Смисъл в този код и останалия от страницата не използвам канвас.

А относно за localStorage, гледах тези примери, но просто не ми стана ясно как да вържа нещата в моя случай.
 
Код: 
<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    </head>
    <body style="background: #303030;">
        <canvas id="canvasBallon" width="800" height="500" style="display: block; background: #fff; margin: 100px auto 0px;">Your browser does not support HTML5 Canvas!!!</canvas>
        <canvas id="canvasHUD" width="800" height="500" style="display: block; background: #fff; margin: -500px auto 0px;">Your browser does not support HTML5 Canvas!!!</canvas>
  
        <script src="game.js"></script>
    </body>
</html>

game.js
Код: 
var canvasBallon=document.getElementById("canvasBallon");
var ctxBallon=canvasBallon.getContext("2d");
var canvasHUD = document.getElementById("canvasHUD"); //HUD Canvas
var ctxHUD = canvasHUD.getContext('2d');
var gameWidth = canvasBallon.width; //Background canvas width
var gameHeight = canvasBallon.height; //Background canvas height

var isPlaying = false;
var requestAnimFrame =  window.requestAnimationFrame ||
                        window.webkitRequestAnimationFrame ||
                        window.mozRequestAnimationFrame ||
                        window.oRequestAnimationFrame ||
                        window.msRequestAnimationFrame;

var imgBallon = new Image(); //Ballon
imgBallon.src = 'images/ballon.png'; //ur ballon img
imgBallon.addEventListener('load',init,false);

function init() {
    PlayGame();
}

function playGame() {
    drawBallon();
    
    startLoop();
}

function displayBallon() {
    ctxHUD.font = "30pt 'Poplar Std'";
    ctxHUD.fillStyle = "#fff";
    ctxHUD.textBaseline = "top";
    ctxHUD.fillText("Край на играта! ", 10, 10);
    ctxHUD.fillText("Верни:", 10, 30);
    ctxHUD.fillText(correct, 130, 30);
    ctxHUD.fillText("Грешни:", 10, 50);
    ctxHUD.fillText(wrong, 130, 50);
    ctxHUD.fillText("Време:", 10, 70);
    ctxHUD.fillText(diff, 130, 70);
    ctxHUD.fillText("секунди", 170, 70);
    ctxHUD.fillText("Изпълнение:", 10, 90);
}

function loop() {
    if(isPlaying) {
        clearCtxHUD();
        displayBallon();
        
        requestAnimFrame(loop);
    }
}

function startLoop() {
    isPlaying = true;
    loop();
}

function stopLoop() {
    isPlaying = false;
}

function drawBallon() {
    var srcX = 0;//x
    var srcY = 0;//y
    var drawX = 0;//x
    var drawY = 0;//y
    ctxBallon.drawImage(imgBallon,srcX,srcY,gameWidth,gameHeight,drawX,drawY,gameWidth,gameHeight);
}

function clearCtxHUD() { //clear text
    ctxHUD.clearRect(0,0,gameWidth,gameHeight);
}

Нещо такова. Все пак ако правиш игри силата на хтмл-а е canvas-а, а канвас-а без JS почти нищо не може да прави, така че ти трябва добър JS
 
Благодаря за примера и за това, че ми помогна(научих нещо ново), но нещо не става при мен. Ще търся някое друго решение.
 
Виж сега канвас не се подържа навсякъде, защото HTML5 още не е стандарт. Какъв ти е проблема ?
 
Значи въведох кода, който ми даде в html документа. Създадох си и нов js документ и сложих твоя js код в него и накрая, като свърши играта не ми изкарва никакъв резултат.

Не мисля, че ми е от браузъра. Опитах на 3 различни и ефекта е един и същ.
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе