HTML5 Game : Tạo trò chơi rắn săn mồi với HTML5 và jQuery

Xem: 3428    Tải: 21   Thảo luận: 0   Mục: Javascript   Lĩnh vực: Khác

9 điểm   ( 7 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]html5-game-tao-tro-choi-ran-san.rar (2.60 KB)
Phí tải ~ 2,000 đ
Live Demo

Bạn cần phải Đăng nhập để tải file [megacode]html5-game-tao-tro-choi-ran-san.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

Hẳn là các bạn đã quá quen thuộc với trờ chơi “Rắn săn mồi” thường có sẵn trong các ứng dụng game điện thoại di động và các trò chơi điện tử trước đây. Có bao giờ các bạn nghĩ là sẽ tự tay viết ứng dụng này , hay tích hợp trò này vào trong website hay blog để khách viếng thăm web có thể giải trí và ở lâu hơn trên trang web của mình.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

Hẳn là các bạn đã quá quen thuộc với trờ chơi “Rắn săn mồi” thường có sẵn trong các ứng dụng game điện thoại di động và các trò chơi điện tử trước đây. Có bao giờ các bạn nghĩ là sẽ tự tay viết ứng dụng này , hay tích hợp trò này vào trong website hay blog để khách viếng thăm web có thể giải trí và ở lâu hơn trên trang web của mình.

Hôm nay mình sẽ chia sẻ cho các bạn từng bươc thực hiện để tạo game “Rắn săn mồi” này với chỉ HTML5 Canvas và jQuery.

HTML

Đầu tiên chúng ta sẽ cần khai báo một phần tử canvas và thư viện jQuery như sau :

<!-- Lets make a simple snake game -->
<canvas id="canvas" width="450" height="450"></canvas>
 
<!-- Jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>

jQuery

Và đây chính là bộ não cũng như toàn bộ đoạn code sẽ giúp các bạn tạo trò chơi rắn săn mồi như sau :

<script type="text/javascript">
$(document).ready(function(){
    //Canvas stuff
    var canvas = $("#canvas")[0];
    var ctx = canvas.getContext("2d");
    var w = $("#canvas").width();
    var h = $("#canvas").height();
     
    //Lets save the cell width in a variable for easy control
    var cw = 10;
    var d;
    var food;
    var score;
     
    //Lets create the snake now
    var snake_array; //an array of cells to make up the snake
     
    function init()
    {
        d = "right"; //default direction
        create_snake();
        create_food(); //Now we can see the food particle
        //finally lets display the score
        score = 0;
         
        //Lets move the snake now using a timer which will trigger the paint function
        //every 60ms
        if(typeof game_loop != "undefined") clearInterval(game_loop);
        game_loop = setInterval(paint, 60);
    }
    init();
     
    function create_snake()
    {
        var length = 5; //Length of the snake
        snake_array = []; //Empty array to start with
        for(var i = length-1; i>=0; i--)
        {
            //This will create a horizontal snake starting from the top left
            snake_array.push({x: i, y:0});
        }
    }
     
    //Lets create the food now
    function create_food()
    {
        food = {
            x: Math.round(Math.random()*(w-cw)/cw),
            y: Math.round(Math.random()*(h-cw)/cw),
        };
        //This will create a cell with x/y between 0-44
        //Because there are 45(450/10) positions accross the rows and columns
    }
     
    //Lets paint the snake now
    function paint()
    {
        //To avoid the snake trail we need to paint the BG on every frame
        //Lets paint the canvas now
        ctx.fillStyle = "white";
        ctx.fillRect(0, 0, w, h);
        ctx.strokeStyle = "black";
        ctx.strokeRect(0, 0, w, h);
         
        //The movement code for the snake to come here.
        //The logic is simple
        //Pop out the tail cell and place it infront of the head cell
        var nx = snake_array[0].x;
        var ny = snake_array[0].y;
        //These were the position of the head cell.
        //We will increment it to get the new head position
        //Lets add proper direction based movement now
        if(d == "right") nx++;
        else if(d == "left") nx--;
        else if(d == "up") ny--;
        else if(d == "down") ny++;
         
        //Lets add the game over clauses now
        //This will restart the game if the snake hits the wall
        //Lets add the code for body collision
        //Now if the head of the snake bumps into its body, the game will restart
        if(nx == -1 || nx == w/cw || ny == -1 || ny == h/cw || check_collision(nx, ny, snake_array))
        {
            //restart game
            init();
            //Lets organize the code a bit now.
            return;
        }
         
        //Lets write the code to make the snake eat the food
        //The logic is simple
        //If the new head position matches with that of the food,
        //Create a new head instead of moving the tail
        if(nx == food.x && ny == food.y)
        {
            var tail = {x: nx, y: ny};
            score++;
            //Create new food
            create_food();
        }
        else
        {
            var tail = snake_array.pop(); //pops out the last cell
            tail.x = nx; tail.y = ny;
        }
        //The snake can now eat the food.
         
        snake_array.unshift(tail); //puts back the tail as the first cell
         
        for(var i = 0; i < snake_array.length; i++)
        {
            var c = snake_array[i];
            //Lets paint 10px wide cells
            paint_cell(c.x, c.y);
        }
         
        //Lets paint the food
        paint_cell(food.x, food.y);
        //Lets paint the score
        var score_text = "Score: " + score;
        ctx.fillText(score_text, 5, h-5);
    }
     
    //Lets first create a generic function to paint cells
    function paint_cell(x, y)
    {
        ctx.fillStyle = "blue";
        ctx.fillRect(x*cw, y*cw, cw, cw);
        ctx.strokeStyle = "white";
        ctx.strokeRect(x*cw, y*cw, cw, cw);
    }
     
    function check_collision(x, y, array)
    {
        //This function will check if the provided x/y coordinates exist
        //in an array of cells or not
        for(var i = 0; i < array.length; i++)
        {
            if(array[i].x == x && array[i].y == y)
             return true;
        }
        return false;
    }
     
    //Lets add the keyboard controls now
    $(document).keydown(function(e){
        var key = e.which;
        //We will add another clause to prevent reverse gear
        if(key == "37" && d != "right") d = "left";
        else if(key == "38" && d != "down") d = "up";
        else if(key == "39" && d != "left") d = "right";
        else if(key == "40" && d != "up") d = "down";
        //The snake is now keyboard controllable
    })
         
})
</script>

Trên từng đoạn code có chú thích rõ ràng và mình hy vọng là qua trò chơi này, các bạn sẽ hiểu rõ hơn trong việc ứng dụng phần tử canvas của html5 cũng như nâng cao khả năng code của mình với jQuery.

Chúc các bạn thành công !

HTML5 Game : Tạo trò chơi rắn săn mồi với HTML5 và jQuery

HTML5 Game : Tạo trò chơi rắn săn mồi với HTML5 và jQuery Đăng ngày 21-08-2014  Hẳn là các bạn đã quá quen thuộc với trờ chơi “Rắn săn mồi” thường có sẵn trong các ứng dụng game điện thoại di động và các trò chơi điện tử trước đây. Có bao giờ các bạn nghĩ là sẽ tự tay viết ứng dụng này , hay tích hợp trò này vào trong website hay blog để khách viếng thăm web có thể giải trí và ở lâu hơn trên trang web của mình. 1.2857142857143/10 3428

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+844) 6. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn