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

Gia đình miền Tây huyện Thới Bình hơn 20 năm chăm sóc hàng nghìn chim trời

Tập tành Working With Domain Access Module in Drupal 7.x

Posted by: Khanh Hoang
Tue, 26/02/2013, 7:26 (GMT+7)
0 Bình luận

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

Mọi người có thể chơi thử game Keno với phiên bản flash : http://www.owensworld.com/games/fullscreen.php?gid=3176&secret=ccfc4e42cb9f17f7f92d3989717d9e02

Tạo file .html sau đó chèn thẻ canvas vào trong body :

HTML

<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Keno Game</title>
    </head>
    <body>
        <canvas height="335" id="gameCanvas" width="415"></canvas>
    </body>
</html>

Javascript
- Tạo function khởi tạo cho game :

<script language="javascript">
function initGame()
{
   var gameCanvas = document.getElementById("gameCanvas");
   var graphic =  gameCanvas.getContext('2d');
   graphic.font="bold 18px arial";   
}
</script>

trong thẻ body, chúng ta sẽ gọi hàm này ra

<body onload="initGame()">

- Tạo bàn chơi

//Khai báo tham số

var beginX = 5;
var beginY = 5;
var sizeSquare = 40;
var colQuantity = 10;
var rowQuantity = 8;
var heightX = sizeSquare*rowQuantity+beginX;
var widthY = sizeSquare*colQuantity+beginY;

// Vẽ bàn chơi
function drawBoard(graphic)
{
    
    // line x
    for (i=0; i<=colQuantity; i++){
        graphic.lineWidth = 1;
        graphic.beginPath();
        graphic.moveTo(beginX+i*sizeSquare,beginY);
        graphic.lineTo(beginX+i*sizeSquare,heightX);                
        graphic.strokeStyle = '#ccc';
        graphic.stroke();               
    }
                
    // line y
    for (i=0; i<=rowQuantity; i++){
        graphic.lineWidth = 1;
        graphic.beginPath();
        graphic.moveTo(beginX,beginY+i*sizeSquare);
        graphic.lineTo(widthY,beginY+i*sizeSquare);
        graphic.strokeStyle = '#ccc';
        graphic.stroke();
    }
}

Gọi hàm drawBoard trong function initGame :

function initGame()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    graphic.font="bold 18px arial";
    drawBoard(graphic);
}

Tiếp đến chúng ta sẽ tạo các số trên bàn chơi (từ 1 - 80)

// Tạo số
var GameNumber = function(value)
{
    this.value = value;           
}

var arrayNumber = [];
for(var i=0;i<80;i++)
{
    arrayNumber[i]= new GameNumber(i+1);
}

Vẽ các số trên bàn chơi + căn chỉnh tọa độ

// vẽ số + căn chỉnh tọa độ
function draw()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    graphic.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));
            graphic.fillStyle="#000000";                       
            graphic.fillText(temp.value,x,y);
                
        }            
}

Gọi hàm draw() trong function initGame :

function initGame()
{
    var gameCanvas = document.getElementById("gameCanvas");
    var graphic =  gameCanvas.getContext('2d');
    graphic.font="bold 18px arial";
    drawBoard(graphic);
    draw();
}

Tạo hiệu ứng cho các số. Các số này sẽ có 4 trạng thái :

Bình thường
Người dùng chọn
Máy chọn (không trúng)
Máy chọn (trúng)

Chúng ta sẽ bắt đầu tạo hiệu ứng cho số khi ở trang thái người dùng chọn. Khi click vào số nào thì số đó sẽ đổi mầu.
Thêm trạng thái cho số vào đối tượng GameNumber

var GameNumber = function(value)
{
    this.value = value;
    this.status = 0;
    // 0 = normal , 1 = active , 2 = cross , 3 = round + blink            
}

Khởi tạo sự kiện click trong function initGame

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);
}

Viết hàm canvasClicked để gọi sự kiện click

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
      arrayNumber[offsetOfi].status=1;
    draw();
}

Tiếp theo sẽ thay mầu cho số. Vào function draw(), sửa đoạn code :

graphic.fillStyle="#000000";                       
graphic.fillText(temp.value,x,y);

thành :

if(temp.status==1)
{
    graphic.fillStyle="#FF0000";                       
    graphic.fillText(temp.value,x,y);                                                
}
else
{
    graphic.fillStyle="#000000";                       
    graphic.fillText(temp.value,x,y);
}

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

Hết phần 1.

Bạn thấy bài viết này như thế nào?: