Với ý tưởng là trò chơi quay bia để giải trí trong các bữa nhậu.

Lý do tôi lựa chọn HTML5 là vì tôi không hề biết code Android hay iOS. Nhưng với công nghệ hiện nay, có rất nhiều tool để bạn có thể convert 1 chương trình chạy bằng HTML5, Javascript trở thành 1 app Android hay iOS hoàn thiện. ví dụ như PhoneGap.

Source code có tại Github: https://github.com/TungPro/quaybia/blob/master/game.js

Để làm game này bằng HTML5 tôi đã lựa chọn framework Phaser.io

Giới thiệu Phaser.io

Phaser là một game framework cho desktop và mobile. Nó miễn phí và là mã nguồn mở, hỗ trợ cho cả WebGL và Canvas. Nó có một loạt các tính năng giúp bạn trong việc phát triển game.

Cài đặt Phaser.io

Bạn có thể tham khảo thêm tại: http://phaser.io/tutorials/getting-started/part2

Game Vòng quay ăn nhậu

Source Code

var game;
var wheel;
var pin;
var canSpin;
var slices = 12;
var prize;

window.onload = function () {
    game = new Phaser.Game(window.innerWidth, window.innerHeight, Phaser.CANVAS, "");
    game.state.add("PlayGame", playGame);
    game.state.start("PlayGame");
}

var playGame = function (game) {
};

playGame.prototype = {
    preload: function () {
        game.load.image("wheel", "wheel.png");
        game.load.image("pin", "pin.png");
    },

    create: function () {
        game.stage.backgroundColor = "#FFFFFF";
        wheel = game.add.sprite(game.width / 2, game.height / 2, "wheel");
        wheel.width = game.width;
        wheel.height = game.width;
        wheel.anchor.set(0.5);

        pin = game.add.sprite(game.width / 2, game.height / 2, "pin");
        pin.anchor.set(0.5);
        pin.inputEnabled = true;

        canSpin = true;

        pin.events.onInputDown.add(this.spin, this);
    },

    spin(){

        if (canSpin) {
            var rounds = game.rnd.between(2, 4);
            var degrees = game.rnd.between(0, 360);
            prize = slices - 1 - Math.floor(degrees / (360 / slices));
            canSpin = false;
            var spinTween = game.add.tween(wheel).to({
                angle: 360 * rounds + degrees
            }, 3000, Phaser.Easing.Quadratic.Out, true);

            spinTween.onComplete.add(this.winPrize, this);
        }
    },
    winPrize(){
        canSpin = true;
    }
}