Flutter first application

import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Cơ bản', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter cơ bản - home page'), ); } } class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text( 'Hello Giang ^_^', ), ], ), ), ); } }

Beat monster game by HTML5

From last article about animation, today we move to the game beat monster.

In this game, we create a map as matrix 4x4. Then, each time users click or mouse over monster, we change its location. If user click on head of monster, he ore she get one point. In this game, we learn how to make sound every click of user.
First of all, check over the game as below:

image animation with html5 tag CANVAS

This time we will learn how to make animation by canvas like this example:

or link below: http://tmtn.vn/html5/monster/
Everytime we press a key, it will open its mouth.
 <canvas> is a tag to display image or video. In this article, we use canvas to display animation image.

Alien Attack - HTML5 game

See example bellow:
This game is similar to guessing number game, but now we have x and y which is represent the position x, y of the screen. Now the player have to guess 2 numbers. Players can only guess 10 times. There is no new function or properties in this game.

How to make image transition effect by css and html5

we often use javascript to make image move, but it is quite easy when using css. Countinues the previous game: guessing number, we now add an image of ruler and an arrow to show where is the number.

gradient and shadow button with html5

Thanks for html5 and css 3, a beautiful button can be done by some css lines. See this button:

In this article we will learn:

• To determines how rounded the corners of the button is use border-radius: example: border-radius: 10px;
• To set a gradient background use the properties background: linear-gradient(top, #a3a3a3, #000); , the first color is the start color and the second color is the end color.
• top is the start position, it can be left, right, or bottom. You can set it to 300deg (means 300 degree) to display an angle.
• Top drop shadow, use box-shadow: 5px 5px 3px rgba(0,0,0,0.5);
• To prevent from player from select button, please use: user-select: none;

Improve the game guessing number

In previous game, we have leant some new properties of HTML 5.
In this version, we learn some new function in javascript below:
 - to generate a random number from 1 to 100: Math.floor(Math.random() * 100);
 - to catch the event keydown in all over the site: window.addEventListener("keydown", keydownHandler, false);
- to remove event Handler when we don't want that element (ex: button) catch an event: button.removeEventListener("click", clickHandler, false);
Example:

I am thinking of a number between 0 and 99.