Làm game KENO với html5 - phần 2

Làm game KENO với html5 - phần 1

Ở phần 2, chúng ta sẽ chuyển trạng thái của số khi kết quả máy chọn là trúng và không trúng.

Nếu không trúng thì sẽ hiển thị dấu x, còn nếu trúng thì sẽ hiển thị hình tròn.

Tạo 1 canvas mới đè lên canvas cũ. Chúng ta sẽ vẽ dấu x và hình tròn trên canvas này.

<canvas id="gameCanvas1" width="415" height="335"></canvas>

Tạo 2 button play và new game :

<button id="play" onclick="play()">Play</button>
<button id="newGame" onclick="newGame()">New Game</button>

Css :

<style>
    body {
        margin: 0;
        padding: 0;
        position: relative;
    }
    #gameCanvas,
    #gameCanvas1 {
        float: left;
    }
    #gameCanvas {
        background: #000;
    }
    #gameCanvas1 {
        position: absolute;
        left: 0;
        top: 0;
        display: none;
    }
    #play {
        float: left;
    }
    #newGame {
        display: none;
    }
</style>

Tạo function play để bắt đầu chơi.

function play() {
    document.getElementById("gameCanvas1").style.display="block";

    var tempArray = new Array();
    for (i=0;i<80;i++)
    {
        tempArray[i]=i;
    }
    // limit random 20 cross and circle
    for(i=0;i<20;i++)
    {                
        var r = Math.floor(Math.random()*tempArray.length);
        var index = tempArray[r];
        tempArray.splice(r,1);
        
        if (arrayNumber[index].status==0) {
            arrayNumber[index].status=2;
        } else if(arrayNumber[index].status==1){
            arrayNumber[index].status=3;
        }
    }

    document.getElementById("play").disabled = true;
    document.getElementById("newGame").style.display="block";
    draw();
}

Trong function draw chúng ta sẽ vẽ hình tròn + dấu x :

function draw()
{            
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    var gameCanvas1 = document.getElementById("gameCanvas1");
    var graphic1 =  gameCanvas1.getContext('2d');
    graphic.clearRect(0,0,gameCanvas.width, gameCanvas.height);
    graphic1.clearRect(0,0,gameCanvas.width, gameCanvas.height);
    drawBoard(graphic);
    for(var i =0 ;i<arrayNumber.length;i++) {
        temp = arrayNumber[i];
        if(i<9)
            offset=20;
        else
            offset=15;

        // set the x,y coordinates
        var x = offset+(i%10)*sizeSquare;
        var y = 32+sizeSquare*(Math.floor(i/10));
        
        var x1 = 10+(i%10)*sizeSquare;
        var y1 = 10+sizeSquare*(Math.floor(i/10));
        
        if(temp.status==1) {
            graphic.fillStyle="#fff";

        } else if(temp.status==2) {
            // draw cross
            graphic1.lineWidth = 2;
            graphic1.beginPath();
            graphic1.moveTo(x1,y1);
            graphic1.lineTo(x1+30,y1+30);
            graphic1.strokeStyle = "#FFFF00";
            graphic1.stroke();
            
            graphic1.beginPath();
            graphic1.moveTo(x1,y1+30);
            graphic1.lineTo(x1+30,y1);
            graphic1.strokeStyle = "#FFFF00";
            graphic1.stroke();
            graphic.fillStyle="#5F5F5F";
            
        } else if(temp.status==3) {
            //draw circle
            graphic1.lineWidth = 2;
            graphic.fillStyle="#fff";
            graphic1.beginPath();
            graphic1.arc(beginX+(sizeSquare/2)+(i%10)*sizeSquare,beginY+(sizeSquare/2)+sizeSquare*(Math.floor(i/10)),17,0,2*Math.PI);
            graphic1.strokeStyle = "#00FF00";
            graphic1.stroke();
        }
        else if(temp.status==0) {
            graphic.fillStyle="#5F5F5F";
        }
        graphic.fillText(temp.value,x,y);
        graphic.fillStyle="#5F5F5F";
    }
}

Trong function canvasClicked, chúng ta sẽ giới hạn số lần click của người chơi trong 1 game là 10 lần.

function canvasClicked(e)
{
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    var x;
    var y;
    if (e.pageX || e.pageY) { 
      x = e.pageX;
      y = e.pageY;
    }
    else {
      x = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
      y = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
    }
    x -= gameCanvas.offsetLeft;
    y -= gameCanvas.offsetTop;

    var row = Math.floor((y-beginY)/sizeSquare);
    var col = Math.floor((x-beginX)/sizeSquare);
    var offsetOfi = col+(row)*colQuantity;

    if(arrayNumber[offsetOfi].status==1) {
        arrayNumber[offsetOfi].status=0;    
    } else if(arrayNumber[offsetOfi].status==0){
        // limit click : 10
        var count = 0;
        for(var i=0; i<arrayNumber.length;i++) {
            if(arrayNumber[i].status == 1) {
                count ++;
            }
        }
        // if 9 number clicked, do nothing
        if(count > 9) {
            return;
        }
        // if 3 number clicked, enable button play
        if(count > 1) {
            document.getElementById("play").disabled = false;
        }
        arrayNumber[offsetOfi].status=1;
    }
    draw();
}

Tạo function newgame, sau khi kết thúc 1 game sẽ chơi tiếp game khác :

function newGame() {
    document.getElementById("gameCanvas1").style.display="none";            
    document.getElementById("newGame").style.display="none";
    for(i=0;i<arrayNumber.length;i++) {
        arrayNumber[i].status=0;
    }
    draw();
}

Trong function initgame, ẩn nút play (khi người chơi click trên 2 số thì mới hiện nút play)

function initGame()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    graphic.font="bold 18px arial";
    drawBoard(graphic);
    draw();            
    gameCanvas.addEventListener("mousedown", canvasClicked, false);
    document.getElementById("play").disabled = true;
}