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

Component Twig Templates trong Drupal 8

Even though Twig has been in Drupal 8 for quite some time now, there are still a lot of things left to do! I recently started collaborating with the "Twig team" in an effort to help move Drupal in the right direction.

Hot girl bánh tráng trộn chào xuân trong bộ ảnh mới

Những hình ảnh mới nhất của hot girl bánh tráng trộn trước thềm năm mới khiến người xem thích thú.

Công cụ từ chối Backlink: Google’s Disavow Tool

Giới thiệu Ngày 16/10 chuyên gia nghiên cứu thuật toán, Matt Cutts đã thông báo về việc Google thêm một công cụ mới vào Google Webmaster Tools: Google’s Disavow Tool tạm dịch là “công cụ từ chối backlink”. Ai nên sử dụng tool này?