• ToptopTen – Funny game with balloons
  • “Can you remember” – My new android game

    First, I’m not a android game developer. I just have an simple but fun ideal so I decide to learn how to create a game for android. It take me to libgdx. You know using LIB is faster :)

    Fortunately, I get it is not very hard to understand so it take me about half month from learning to deploying my first game in Google Play.

    Here is my game:

    https://play.google.com/store/apps/details?id=com.saysua.canyouremember

    You can see the game play here:

    The rule of this game is simple but someone get it hard to understand in the first time. If you get it hard you can play in the learning mode ?Learn?

    For sort explain, you must use your eyes, brain to remember the hidden block, it will appear quickly and you touch the block in the lowest row that you think there is a safe block. If right, you get 1 point and new safe block of above row will appear.

    Download my game and get fun. Share if you like it.

    https://play.google.com/store/apps/details?id=com.saysua.canyouremember

    Currently, my highest score is 27. :) Can you remember more than me?

  • “Can you remember” – My new android game
  • Build your code with Gulp

    Gulp is the streaming build system. Gulp’s use of streams and code-over-configuration makes for a simpler and more intuitive build.

    I didn’t use Gulp or Grunt before. Today, I hear about it and decide to use it on my project. What I write here is not a tutorial, it just what I do with Gulp.

    1. Install

    - NodeJS: To install Gulp we must have node installed. Nodejs can be installed from here http://nodejs.org/

    - Gulp: We should install gulp globally

     2. Using Gulp in project

    First, jump to your project folder.

    Install gulp and gulp-util in your project as devDepencies. Before it you should have package.json file in your project or init it by  npm init

    –save-dev will let npm add gulp and gulp-util into devDepencies of file package.json

    Create file gulpfile.js  at your project root with bellow simple content:

    Run gulp

     3. Do more with gulp

    Above is just some step to get started with gulp. You can find here  https://github.com/gulpjs/gulp/blob/master/docs/getting-started.md

    I want do more with gulp in my project, such as minify JS code, build LESS code to CSS… Let install some gulp plugins and write some simple code.

    Gulp plugins can be found here: http://gratimax.github.io/search-gulp-plugins/

    As my requirement I will install gulp-less, gulp-uglify and gulp-jshint.

    Now, we create (make) some tasks for gulp by writing code.

    There are 4 gulp tasks and they can be called by commands:

     Task jshint

    This task will check all JS file in folder /js and report error.

    Task minify

    This task will get all JS files in folder /js , minifies them and save to folder /dist/js

    Task less

    This task will convert all LESS files in folder /less to CSS and save to folder /dist/css

    Task default

    This task will run 3 above tasks and add watching for JS, LESS files. If JS files in folder /js change, it will run task jshint and minify. The same with LESS file in folder /less.

     Wrapping UP

    After all, we can:

    - Install NodeJS

    - Install Gulp and its plugins

    - Create Gulp tasks for our project

    This is the first time I using gulp, if you have any info or ideal about gulp feel free to comment and let me know. Very thank you for your comments.

     

  • Build your code with Gulp
  • Quản lý các gói thư viện phía client site bằng Bower

    Thời gian trước, có người nói với tôi rằng nên sử dụng Bower để cài đặt những gói thư viện js, css phía client site của một plugin tôi đang phát triển. Tôi cũng chỉ ậm ừ qua, và nghĩ rằng không cần thiết lắm bởi vì hiện tại những thư viện đó vẫn đang chạy tốt.

    Vậy tại sao hôm nay tôi lại giới thiệu về bower cho các bạn, đơn giản vì anh bạn đó của tôi đã sử dụng bower cho dự án của mình. Khi anh ta gởi source code cho tôi nó không hề có các thư viện nào như jquery, angulajs, boostrap… và anh ta bảo tôi cài vào đi.

    Lúc đó tôi mới mày mò lên các trang web để tải về các thư viện từ jquery, angularjs, boostrap …. rồi copy nó vào thư mục code.

    - Không! Không cần phải làm như vậy.

    Anh ta nói. “Chỉ cần sử dụng bower install “. Và quả nhiên, bower đã tự động cài hết các gói thư viện cho tôi. Thật tuyệt vời!

    bower-logo

     

    Continue Reading…

  • Quản lý các gói thư viện phía client site bằng Bower
  • Viết chức năng upload bằng ajax với jquery và javascript chay

    Trong bài viết này, tôi sẽ chỉ ra hai cách để tạo ajax upload. Cách thứ nhất sử dụng Jquery cùng với plugin Form Plugin của nó và cách thứ hai dành cho bạn nào muốn mày mò vọc code để tự mình viết riêng phần upload chỉ dùng javacript. Ở bài viết này, tôi sử dụng PHP để viết phần server.

    File xử lý server

    Để cho đơn giản, nhiệm vụ của file phía server ở đây chỉ bắt file được upload lên, lưu vào thư mục upload và trả về thông tin của file. Continue Reading…

  • Viết chức năng upload bằng ajax với jquery và javascript chay
  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery

    Ngày hôm nay, trong khi đang làm, tôi bắt gặp 2 trường hợp cần giải quyết với jquery. Trường hợp thứ nhất là bắt sự kiện khi người dùng kích chuột bên ngoài một phần tử và trường hợp thứ hai là kiểm tra một phần tử có đang hiển thị hay không.

    Cách giải quyết hai trường hợp này cũng khá đơn giản, nhưng tôi nghĩ nõ cũng sẽ làm ta mất một số thời gian nếu như chưa biết. Vì vậy tôi sẽ chia sẽ hai thủ thuật này ở đây.

    Bắt sự kiện kích chuột bên ngoài một phần tử

    Giả sử tôi có một phần tử có id là  click-me  và tôi cần bắt sự kiện kích chuột lên nó hoặc kích chuột bên ngoài nó để có những xử lý khác nhau. Đoạn code ngắn dưới đây sẽ giải quyết vấn đề đó: Continue Reading…

  • Bắt sự kiện kích chuột bên ngoài một phần tử và kiểm tra phần tử ẩn/hiện bằng JQuery
  • Kiểm tra một phần tử tồn tại bằng JQuery

    Trong khi sử dụng JQuery, có nhiều trường hợp tôi tự hỏi làm sao để kiểm tra một phần tử có tồn tại hay không. Chẳng hạn như div có id là “exist” đã có hay chưa.

    Ngay khi nảy ra câu hỏi tôi nghĩ ngay đến một cách kiểm tra đơn giản:

    Nhưng thực tế thì cách trên hoàn toàn sai bởi vì khi sử dụng $()  nó luôn trả về một đối tượng cho dù không tồn tại phần tử ta muốn xác định thì nó cũng sẽ trả về một đối tượng rỗng.  Vì vậy điều kiện trong câu lệnh if  sẽ luôn luôn đúng. Continue Reading…

  • Kiểm tra một phần tử tồn tại bằng JQuery
  • Xóa 1 phần tử trong mảng bằng Javascript

    Khi lập trình với javascript và một vài ngôn ngữ khác, có một thao tác tưởng chừng rất đơn giản nhưng lại luôn khiến tôi bối rối về cách thực hiện nó. Đó chính là Xóa một phần tử trong mảng.

    Javascript: Splice

    Trong javascript, để xóa một phần tử trong mảng ta có thể dùng hàm splice()

    Chúng ta có thể kết hợp splice()  cùng với indexOf()  để xóa phần tử dựa vào giá trị của nó:

    Nếu các bạn muốn thực hiện thêm nhiều thao tác với mảng các bạn có thể tham khảo thư viện underscore như ở bài viết Xử lý mảng với underscore

    Tóm lại: để xóa một phần tử trong mảng ta có thể dùng  array.splice(v trí cn xóa, 1)

  • Xóa 1 phần tử trong mảng bằng Javascript
  • Đổi đối tượng JQuery sang DOM

    Trong đối tượng JQuery nó đã có chứa thành phần DOM. Để lấy được thành phần DOM từ đối tượng JQuery ta có thể sử dụng phương thức  get() .

    Ví dụ ta có một danh sách như sau :

    Nếu như đối tượng JQuery chỉ có một thành phần DOM ta có thể dùng 2 cách lấy:

    $('ul').get(0)  hoặc  $('ul')[0]

    Nếu đối tượng JQuery có nhiều thành phần DOM, để lấy hết tất cả ta sử dụng:

    $('li').get()

    Ví dụ:

  • Đổi đối tượng JQuery sang DOM
  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe

    Đã từ lâu lắm rồi tôi hay sử dụng Google translate, và có thói quen những từ mới tôi thường hay nhấn vào nút phát âm để nghe nó đọc như thế nào. Khi nghe tôi thường hay nhấn đi nhấn lại nhiều lần để nghe cho rõ.

    Và hôm nay cũng vậy, tuy nhiên tôi chợt nghĩ làm sao để có thể nghe liên tục tiếng phát âm mà không phải nhấn liên tục nhiều lần nhỉ. Vậy là tôi quyết định viết một đoạn JS vui vui để thực hiện công việc đó và bây giờ tôi muốn chia sẻ nó cho các bạn đọc để giải trí.

    Ở đây tôi sẽ lấy từ “hello” để làm ví dụ, đoạn code chạy được trên trình duyệt Chrome.

    Việc đầu tiên, tôi cần phải biết nguồn của file âm thanh đó là gì, khi mở chương tình debug của Chrome lên tôi bắt được đoạn link như sau.

    http://translate.google.com/translate_tts?ie=UTF-8&q=hello&tl=en&total=1&idx=0&textlen=5&prev=input

    Ở đoạn link trên có 2 tham số quan trọng:

    • q=hello : Ta sẽ thay chữ hello này bằng những chữ khác ta muốn nghe phát âm
    • textlen=5: Tham số này là độ dài của chữ ta muốn nghe (độ dài của hello = 5)

    Như vậy tôi đã có được đường dẫn của file âm thanh, tiếp theo tôi sẽ dùng JS để tạo ra một đối tượng Audio và yêu cầu nó phát âm thanh từ đoạn link trên. Continue Reading…

  • [Fun script] Bắt google đọc tiếng Anh liên tục cho mình nghe