How to make Pachinko using android

Now, I want to give tutorial about make the image move according to the shake and change the image with another one if I move it. I divided the step into 5 step. They are :

  1. Shake detection

  2. Crop image

  3. Manipulate image

  4. Onshake action
Shake detection

If we want to detect android shake motion, we can use SensorEventListener. In this tutorial, I use a class for managing shake event. I named it ShakeEventListener.

Code for ShakeEventListener :
import android.hardware.Sensor;
import android.hardware.SensorEvent;
import android.hardware.SensorEventListener;
import android.hardware.SensorManager;

* Listener that detects shake gesture.
public class ShakeEventListener implements SensorEventListener {

/** Minimum movement force to consider. */
private static final int MIN_FORCE = 10;

* Minimum times in a shake gesture that the direction of movement needs to
* change.
private static final int MIN_DIRECTION_CHANGE = 3;

/** Maximum pause between movements. */
private static final int MAX_PAUSE_BETHWEEN_DIRECTION_CHANGE = 200;

/** Maximum allowed time for shake gesture. */
private static final int MAX_TOTAL_DURATION_OF_SHAKE = 400;

/** Time when the gesture started. */
private long mFirstDirectionChangeTime = 0;

/** Time when the last movement started. */
private long mLastDirectionChangeTime;

/** How many movements are considered so far. */
private int mDirectionChangeCount = 0;

/** The last x position. */
private float lastX = 0;

/** The last y position. */
private float lastY = 0;

/** The last z position. */
private float lastZ = 0;

/** OnShakeListener that is called when shake is detected. */
private OnShakeListener mShakeListener;

* Interface for shake gesture.
public interface OnShakeListener {

* Called when shake gesture is detected.
void onShake();

public void setOnShakeListener(OnShakeListener listener) {
mShakeListener = listener;

public void onSensorChanged(SensorEvent se) {
// get sensor data
float x = se.values[SensorManager.DATA_X];
float y = se.values[SensorManager.DATA_Y];
float z = se.values[SensorManager.DATA_Z];

// calculate movement
float totalMovement = Math.abs(x + y + z – lastX – lastY – lastZ);

if (totalMovement > MIN_FORCE) {

// get time
long now = System.currentTimeMillis();

// store first movement time
if (mFirstDirectionChangeTime == 0) {
mFirstDirectionChangeTime = now;
mLastDirectionChangeTime = now;

// check if the last movement was not long ago
long lastChangeWasAgo = now – mLastDirectionChangeTime;
if (lastChangeWasAgo = MIN_DIRECTION_CHANGE) {

// check total duration
long totalDuration = now – mFirstDirectionChangeTime;
if (totalDuration < MAX_TOTAL_DURATION_OF_SHAKE) {

} else {

* Resets the shake parameters to their default values.
private void resetShakeParameters() {
mFirstDirectionChangeTime = 0;
mDirectionChangeCount = 0;
mLastDirectionChangeTime = 0;
lastX = 0;
lastY = 0;
lastZ = 0;

public void onAccuracyChanged(Sensor sensor, int accuracy) {


After create that class, create main class that will implement the shake detection. I named it ShakeActivity.
Code For ShakeActivity :

private SensorManager mSensorManager;
private ShakeEventListener mSensorListener;
import com.phonegap.DroidGap;
import android.os.Bundle;

public class ShakeActivity extends DroidGap {
protected void onResume() {

protected void onStop() {

public void onCreate(Bundle savedInstanceState) {
mSensorListener = new ShakeEventListener();
mSensorManager = (SensorManager) getSystemService(Context.SENSOR_SERVICE);

mSensorListener.setOnShakeListener(new ShakeEventListener.OnShakeListener() {

public void onShake() {
Toast.makeText(KPBActivityImpl.this, "Shake!", Toast.LENGTH_SHORT).show();

Crop Image

Next step is the ability to crop the image. We can use canvas to place our new image. We use matrix and Bitmap to resize our image. Also we need path to set position of our image. It is very important to set position of our image because we will change image according to the shake and we need to make simple animation for that image. I make my own function to handle this problem.

Code :
public void addGbr(ImageView gbr,float posY,Bitmap bitGbr1,Bitmap bitGbr2){
Paint paint = new Paint();

RectF rectf = new RectF(0,0,100,66);
RectF rectf2 = new RectF(0,0,100,100);

Canvas canvas = new Canvas(targetBitmap);
Path path = new Path();
Path path2 = new Path();
path.addRect(rectf, Path.Direction.CW);
path2.addRect(rectf2, Path.Direction.CW);

canvas.drawBitmap( bitGbr1, 0f,67-posY, paint);//ngatur posisi supaya nempel dgn apel
canvas.drawBitmap( bitGbr2, 0f, -posY, paint);

Matrix matrix = new Matrix();
matrix.postScale(1f, 1f);
Bitmap resizedBitmap = Bitmap.createBitmap(targetBitmap, 0, 0, 100, 100, matrix, true);

/*convert Bitmap to resource */
BitmapDrawable bd = new BitmapDrawable(resizedBitmap);
catch(Exception e){
System.out.println("Error1 : " + e.getMessage() + e.toString());
The code that I use is using value that suitable to my application like 66f value. So, that is not exact value for another application.

Manipulate image

Manipulate image that I mean here is the ability to change one image to another image and the ability to change the image that is being shake.

Code :
private Runnable myRunnable = new Runnable() {

public void run() {
else if(flag==3){gbrUbah=gbr3;pnh2.setBackgroundColor(;pnh3.setBackgroundResource(R.drawable.arrowdown);}

else q++;
//set max, ga bs berenti
int speed=6000/((bykGetar)+8);

Log.d(“bykGetar”,bykGetar+”, penanda “+mSensorListener.penanda + “, flag “+ mSensorListener.f);


OnShake action

To control the image movement according to shaking, I use thread to read the shake value first, and with that shake value, move the image and change to another if the image already shaken.

Code :
myHandler = new Handler();

mSensorListener.setOnShakeListener(new ShakeEventListener.OnShakeListener() {

public void onShake() {
//Toast.makeText(Shake2Activity.this, mSensorListener.nilai+””, Toast.LENGTH_SHORT).show();
myHandler.postDelayed(myRunnable, 1000);

How to make puzzle using phonegap + Jquery

There are several techiques that we need to make this puzzle.
I divided it into 4 steps. There are :

  1. Crop Image

  2. Make The puzzle

  3. Shuffle Image

  4. Solve puzzle

First, we need to take picture that we want to become our object puzzle. It can be from capture new photo or from photo library. We can create that menu in our application using PhoneGap API References. But in this tutorial, we will focus on creating the puzzle.

1. Crop Image
After we had the picture, we need to crop the image. The technique that is used in this tutorial to crop image is using combination of background-image and image. This tutorial uses background image to display image in different appearance, and by setting different background position, we can crop image as we want.

Example code :

crop code

printscr app 1

2. Make The puzzle
To make the puzzle we use looping on our image. Then we change the value of background-position and margin. So, from 1 image, we looping the image to the number we want. Then, we crop the image to the size we want, and by changing the value of background-position we get different piece of image.

Example code for random the value :


This will give the value for hasilRandom variable from 0-8. We will use this number later to random the pieces of puzzle we have.

Example code to get random pieces positions :


So, with this we get the positions for pieces filled with random value.
Then, we need to declare the value for puzzle width and height.
Example code :


After that, we need to make the puzzle pieces by looping the value and keep changing the value for background-position and margin so we get full image with different position for each pieces.
Example code :



So, by changing the value for b_x, b_y, m_x, and m_y, we get different image display, and by doing the random value, we get different result.

print scr app 2

3. Shuffle Image

What we do when we shuffle the image are changing the margin value for the exchanged puzzle piece, changing the id that we create before and change the property value for each piece. In this tutorial, we shuffle the image according to user click, the first image that is clicked will exchange the second image that is clicked.
Example code :


For the first clicked, there is a change on the opacity on the element. It’s just for user to remember what he/she already click.

print src app 3

4. Solve Puzzle
To win the game, user needs to make the image back its to normal position by swap the puzzle around. If the user already win, give some notification to let the user realize that he/she already has finished the game. In the code, we need to make some flag to check winning condition for user. In this tutorial, first, we store the value we use to random the image. Then, every time the image being swap, we checked if the image is already same with the first image. It’s sound easy with the logic, but we need to be more careful with the code because the value we set for the image id must be also swapped when we swap the image.
Example code to check winning condition :


If the user win, this program will give alert notification “Congratz, you win !“

print scr app 4

You can download the full source code on here

Hello world!

Welcome to After you read this, you should delete and write your own post, with a new title above. Or hit Add New on the left (of the admin dashboard) to start a fresh post.

Here are some suggestions for your first post.

  1. You can find new ideas for what to blog about by reading the Daily Post.
  2. Add PressThis to your browser. It creates a new blog post for you about any interesting  page you read on the web.
  3. Make some changes to this page, and then hit preview on the right. You can always preview any post or edit it before you share it to the world.