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?:

Khanh Hoang - Kenn

Kenn is a user experience designer and front end developer who enjoys creating beautiful and usable web and mobile experiences.

More about Khanh Hoang

Quảng Cáo Bài Viết

Một số ý kiến làm đẹp photoblog on Drupal

The information below is somewhat obsolete and kept just for archiving purposes. It's recommended to check new blog post to get better idea how to make a nice photoblog on Drupal today.

Hướng dẫn cài đặt công cụ Homebrew để lập trình trên MacOSX

Homebrew cài đặt phần mềm mà Apple không thể. Đây chính là khẩu hiệu của Homebrew một công cụ tiện ích cần thiết đối với bất kỳ lập trình viên nào khi lập trình trên MacOSX.

Mật khẩu dễ đoán nhất trên thế giới - Tiếng Việt

Mật khẩu tiếng Việt là 1 trong 3 loại mật khẩu dễ đoán nhất, với hơn 14% tài khoản bị lộ mật khẩu sau 1000 lần phân tích từ điển tiếng Việt và 7,8% số tài khoản bị lộ mật khẩu sau khi phân tích bằng từ điển chung toàn cầu.