Software Programming: Game

Monday 23 May 2022

How to Develop Indian Game Ludo using HTML, CSS, Javascript

Introduction
Ludo is a strategy board game for two to four players, in which the players race their four tokens from start to finish according to the rolls of a single die. Like other cross and circle games, Ludo is derived from the Indian game.
we all have played the Indian Game Ludo a lot, now we play it which computer and mobile, sometimes thinking that we also learn to make Ludo Game, in this post we make you all how to make Ludo Game application.
First, we should know that which language we are going to use, we should know some basics like here we will use HTML (Hypertext Markup Language), JavaScript, CSS (Cascading Style Sheets) language which is the language of making computer/mobile application.
Step 1.You have to create Ludo-game.html Page with using inline CSS.

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style>
        #main{
            width:1000px;
            float:left;
        }
        .pawns{
            width:30px;
            height:30px;
            border-radius:20px;
            position:absolute;
        }
        #board{
            background:url(Images/board.gif) no-repeat;
            background-size:cover;
            width:650px;
            height:550px;
            float:left;
            margin-top:8px;
        }
        #uselesstext1{
            float:left;
            padding-left:10px;
            padding-right:10px;
        }
        footer{
            font-size:larger;
            color:darkred;

}
		.m-note{
         background-size: cover;
             float: right;
color:red;
			 }
			 h2 {text-align: center;
			 margin-top: -15px;
			 }
    </style>
    <script src="Ludo-game.js"></script>
</head>
<body>
    <div id="main">
    <div id="board"></div>

<div class="pawns" id="yellowpawn1" onclick="randomMove('yellow',1)"    style="background-color:yellow;top:451px;left:47px;"></div>
    <div class="pawns" id="yellowpawn2" onclick="randomMove('yellow',2)"    style="background-color:yellow;top:451px;left:140px;"></div>
    <div class="pawns" id="yellowpawn3" onclick="randomMove('yellow',3)"    style="background-color:yellow;top:404px;left:93px;"></div>
    <div class="pawns" id="yellowpawn4" onclick="randomMove('yellow',4)"    style="background-color:yellow;top:498px;left:93px;"></div>

<div class="pawns" id="greenpawn1"  onclick="randomMove('green',1)"     style="background-color:green;top:149px;left:93px;"></div>
    <div class="pawns" id="greenpawn2"  onclick="randomMove('green',2)"     style="background-color:green;top:102px;left:140px;"></div>
    <div class="pawns" id="greenpawn3"  onclick="randomMove('green',3)"     style="background-color:green;top:55px;left:93px;"></div>
    <div class="pawns" id="greenpawn4"  onclick="randomMove('green',4)"     style="background-color:green;top:102px;left:47px;"></div>

<div class="pawns" id="bluepawn1"   onclick="randomMove('blue',1)"      style="background-color:blue;top:451px;left:490px;"></div>
    <div class="pawns" id="bluepawn2"   onclick="randomMove('blue',2)"      style="background-color:blue;top:451px;left:395px;"></div>
    <div class="pawns" id="bluepawn3"   onclick="randomMove('blue',3)"      style="background-color:blue;top:404px;left:442px;"></div>
    <div class="pawns" id="bluepawn4"   onclick="randomMove('blue',4)"      style="background-color:blue;top:498px;left:442px;"></div>

<h4 id="uselesstext1"></h4>it's<h3 id="player" style=" float:left; color:red">red</h3>
	<h4 id="uselesstext2">s Player turn</h4>
    <p id="badtext" style="float:left;"></p>
    </div>
    <footer title="Copyright by Slavi Koen" id="copyright"></footer>
	<div class="m-note">Game Play Manual: Double click/screen touch  on the revolving dice, 
	then when six or other number comes, the color of the innings should play by double 
	click on its piece of it's 	color and in this way four people play this game together.
	<h2 >by: <a href="https://a143mk.blogspot.com" >a143mk Blogs</a></h2></div>
	
</body>
</html>

Step 2.You have to create Ludo-game.js Page .

pushSteps(stepUp, stepsYellow,4);
pushSteps(stepLeft, stepsYellow,4);
pushSteps(stepUp, stepsYellow,2);
pushSteps(stepRight, stepsYellow,4);
pushSteps(stepUp, stepsYellow,4);
pushSteps(stepRight, stepsYellow,2);
pushSteps(stepDown, stepsYellow,4);
pushSteps(stepRight, stepsYellow,4);
pushSteps(stepDown, stepsYellow,2);
pushSteps(stepLeft, stepsYellow,4);
pushSteps(stepDown, stepsYellow,4);
pushSteps(stepLeft, stepsYellow,1);
pushSteps(stepUp, stepsYellow,5);

//Blue pawns path
pushSteps(stepLeft, stepsBlue,4);
pushSteps(stepDown, stepsBlue,4);
pushSteps(stepLeft, stepsBlue,2);
pushSteps(stepUp, stepsBlue,4,2);
pushSteps(stepLeft, stepsBlue,4);
pushSteps(stepUp, stepsBlue,2);
pushSteps(stepRight, stepsBlue,4);
pushSteps(stepUp, stepsBlue,4);
pushSteps(stepRight, stepsBlue,2);
pushSteps(stepDown, stepsBlue,4);
pushSteps(stepRight, stepsBlue,4);
pushSteps(stepDown, stepsBlue,1);
pushSteps(stepLeft, stepsBlue,5);

//Green pawns path
pushSteps(stepRight, stepsGreen,4);
pushSteps(stepUp, stepsGreen,4);
pushSteps(stepRight, stepsGreen,2);
pushSteps(stepDown, stepsGreen,4);
pushSteps(stepRight, stepsGreen,4);
pushSteps(stepDown, stepsGreen,2);
pushSteps(stepLeft, stepsGreen,4);
pushSteps(stepDown, stepsGreen,4);
pushSteps(stepLeft, stepsGreen,2);
pushSteps(stepUp, stepsGreen,4);
pushSteps(stepLeft, stepsGreen,4);
pushSteps(stepUp, stepsGreen,1);
pushSteps(stepRight, stepsGreen, 5);
function ResetPawn(victim) {
    onboard[victim] = 0;
    positions[victim] = 0;
    var pawnToMove = document.getElementById(victim);
    switch (victim) {
        case "redpawn1": pawnToMove.style.top = 149 + "px"; pawnToMove.style.left = 442 + "px"; break;
        case "redpawn2": pawnToMove.style.top = 102 + "px"; pawnToMove.style.left = 395 + "px"; break;
        case "redpawn3": pawnToMove.style.top = 55 + "px"; pawnToMove.style.left = 442 + "px"; break;
        case "redpawn4": pawnToMove.style.top = 102 + "px"; pawnToMove.style.left = 490 + "px"; break;
        case "bluepawn1": pawnToMove.style.top = 451 + "px"; pawnToMove.style.left = 490 + "px"; break;
        case "bluepawn2": pawnToMove.style.top = 451 + "px"; pawnToMove.style.left = 395 + "px"; break;
        case "bluepawn3": pawnToMove.style.top = 404 + "px"; pawnToMove.style.left = 442 + "px"; break;
        case "bluepawn4": pawnToMove.style.top = 498 + "px"; pawnToMove.style.left = 442 + "px"; break;
        case "greenpawn1": pawnToMove.style.top = 149 + "px"; pawnToMove.style.left = 93 + "px"; break;
        case "greenpawn2": pawnToMove.style.top = 102 + "px"; pawnToMove.style.left = 140 + "px"; break;
        case "greenpawn3": pawnToMove.style.top = 55 + "px"; pawnToMove.style.left = 93 + "px"; break;
        case "greenpawn4": pawnToMove.style.top = 102 + "px"; pawnToMove.style.left = 47 + "px"; break;
        case "yellowpawn1": pawnToMove.style.top = 451 + "px"; pawnToMove.style.left = 47 + "px"; break;
        case "yellowpawn2": pawnToMove.style.top = 451 + "px"; pawnToMove.style.left = 140 + "px"; break;
        case "yellowpawn3": pawnToMove.style.top = 404 + "px"; pawnToMove.style.left = 93 + "px"; break;
        case "yellowpawn4": pawnToMove.style.top = 498 + "px"; pawnToMove.style.left = 93 + "px"; break;

}
}
function randomNum() {
    if (!clicked) {
        num = Math.floor((Math.random() * 6) + 1);;
        var dice = document.getElementById('dice');
        dice.style.backgroundImage = "url(Images/" + num + ".jpg)";
        clicked = true;
    }
    if (num != 6&&DontHaveOtherFree()) {
        var bad = document.getElementById('badtext');
        bad.innerText = "Unfortunatlly you stuck";
        window.setTimeout(changePlayer, 1000);
        clicked = false;
    }
}
function randomMove(Color, paw) {
    var text = document.getElementById('player');
    NumOfPaw = paw;
    currcolor = Color;
    currpawn = currcolor + "pawn" + NumOfPaw;
    currPos = positions[currpawn];
    if (num + currPos > 44) {
        Stuck();
    }
    else {
        if (clicked) {
            var position = currPos;
            if (text.innerText == currcolor) {
                if (onboard[currpawn] === 1 || num === 6) {
                    if (onboard[currpawn] === 0) {
                        var doc = document.getElementById(currpawn);
                        var curr = Number(doc.style.left.replace(/[a-z]/g, ''));
                        switch (Color) {
                            case "red":
                                doc.style.left = 318 + 'px';
                                doc.style.top = 28 + "px";
                                break;

case "yellow":
                                doc.style.left = 219 + 'px';
                                doc.style.top = 523 + "px";
                                break;

case "blue":
                                doc.style.left = 516 + 'px';
                                doc.style.top = 325 + "px";
                                break;

case "green":
                                doc.style.left = 21 + 'px';
                                doc.style.top = 226 + "px";
                                break;
                        }
                        onboard[currpawn] = 1;
                    }
                    else {
                        switch (Color) {
                            case "red":
                                for (i = currPos; i < position + num; i++) {
                                    stepsRed[i]();
                                }
                                break;

case "yellow":
                                for (i = currPos; i < position + num; i++) {
                                    stepsYellow[i]();
                                }
                                break;

case "blue":
                                for (i = currPos; i < position + num; i++) {
                                    stepsBlue[i]();
                                }
                                break;

case "green":
                                for (i = currPos; i < position + num; i++) {
                                    stepsGreen[i]();
                                }
                                break;
                        }
                        positions[currpawn] = currPos;
                        var victim = HaveHover();
                        if (victim != false) {
                            ResetPawn(victim);
                        }
                        if (currPos == 44) { pawnOut[currcolor]++; onboard[currpawn] = 0; positions[currpawn] = 0; document.getElementById(currpawn).style.visibility = "hidden"; };
                        CheckForWinner();
                        changePlayer();
                    }
                    num = 0;
                    clicked = false;
                    var dice = document.getElementById('dice');
                    dice.style.backgroundImage = "url(Images/dice.gif)";
                }
                else Stuck();
            }
        }
    }
}

Indian Game Ludo Output: Download Game Code

Tuesday 2 February 2021

Online Snake Game

February 02, 2021 Game , java , Snake Game , Tech-Projects No comments :

Introduction
The game involves controlling a single block or snakehead by turning only left or right and up or down arrow key on keyboard by ninety degree until you manage to eat an fruets When you get the grout, the Snake grows an extra block or body segment.

Example: we are going to Step by Step Development of Online Snake Game with the Help of HTML, CSS and JavaScript.
Step 1. You have to create img folder and you can Download Number of images or background music file. Download Project Folder

Step 2. mKsnStyl.css

@media only screen and (max-width: 850px) {
    .game {
        transform: scale(.75);
    }
  }
  @media only screen and (max-width: 650px) {
    .warning-rotate {
        transform: scale(1) !important;
    }
    body, html {
        overflow: hidden;
    }
  }

.snake .details {
   width: 400px;
   margin: auto;
   padding: 20px 0;
}
.snake .details .new_Score {
    float: left;
}
.snake .details .best_Score {
    float: right;
}
.snake .game {
    width: 625px;
    height: 400px;
    background-color:#ffffff; /*rgb(37 40 48);*/
    margin: auto;
    margin-top: 15px;
    overflow: auto;
    border: 1px solid #5a5f73;
    position: relative;
}
.snake .game .box {
    width: 25px;
    height: 25px;
    float: left;
    position: relative;
    
}
.snake .game .box.even {
    background-color: #155805;
}
.snake .game .box.odd {
    background-color: #155805;
}

.snake .game .snake_Box {
	background-color: yellow;
    position: absolute;
    width: 25px;
    height: 25px;
    z-index: 2;
}
.snake .game .snake_Head {
    transition: all .1s linear;
}

.snake .game .fruit {
    position: absolute;
    width: 25px;
    height: 25px;
}

.end {
    transform: scale(0);
    transition: all .2s linear;
    width: 100%;
    height: 100%;
    top: 0%;
    overflow: hidden;
    position: absolute;
    z-index: 30;
}

.fail {
    width: 400px;
    background-color: #131417;
    height: 250px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

}
.bkColor {
    width: 100%;
    height: 100%;
    background-color:rgba(19, 20, 23, .7);
    position: absolute;
    top: 0%;
    left: 0%;
    overflow: hidden;
}
.fail img {
    width: 70%;
    margin: auto;
    text-align: center;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}

.hidden-Sound {
    display: none;
}

.buttons {
    position: absolute;
    bottom: 0;
    left: 0;
    opacity: .5;
    transform: scale(1.5) translate(21px, -21px);
    z-index: 20;
}
.buttons button {
    padding: 5px;
    background-color: #455f73;
    border: none;
    margin: auto;
    color: white;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    z-index: 40;
}
button:focus {
    outline: none;
}
.buttons svg {
    width: 30px;
}
.buttons .rightBtn {
    margin-left: 15px;
}
.buttons .leftBtn {
    margin-right: 15px;
}

.warning-rotate {
    background-color: #131417;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 30;
    transition: all .2s linear;
    transform: scale(0);
}

.warning-rotate h1 {
    text-align: center;
    font-size: x-large;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Step 3. mkSnkjavaScrip.js

(function snakeGame() {

//move MkSnake
    window.addEventListener('keydown', function (e) {
        snakeMove(e);
    });

// Class Interval
    function Interval(fn, time) {
        var timer = false;
        this.start = function () {
            if (!this.isRunning())
                timer = setInterval(fn, time);
        };
        this.stop = function () {
            clearInterval(timer);
            timer = false;
        };
        this.isRunning = function () {
            return timer !== false;
        };
    }

var arrowValRFN = new Interval(arrowValR, 250),
        arrowValLFN = new Interval(arrowValL, 250),
        arrowValUFN = new Interval(arrowValU, 250),
        arrowValDFN = new Interval(arrowValD, 250),
        arrFN = [arrowValRFN, arrowValLFN, arrowValUFN, arrowValDFN];

// create fruit
    var fruit = document.createElement("img"),
        testFruit = true;
    function createFruit() {
        var randomfruit = Math.round(Math.random() * (arr.length));
        fruit.classList.add('fruit');
        while (testFruit) {
            if (arrMkSnakeBody.length) {
                if (randomfruit == randomArrItem) {
                    testFruit = true;
                    randomfruit = Math.round(Math.random() * (arr.length));
                } else {
                    testFruit = false;
                }
                arrMkSnakeBody.forEach(element => {
                    testFruit = false;
                    if (parseInt(element.getAttribute("number")) == randomfruit) {
                        testFruit = true;
                        randomfruit = Math.round(Math.random() * (arr.length));
                    }
                });
            } else {
                if (randomfruit == randomArrItem) {
                    testFruit = true;
                    randomfruit = Math.round(Math.random() * (arr.length));
                } else {
                    testFruit = false;
                }
            }
        }
       fruit.setAttribute("number", randomfruit);
        var randomFruitImg = Math.round(Math.random() * 8) + 1,
        imgSrc = randomFruitImg+'.png';
        fruit.setAttribute("src", imgSrc);
        fruit.setAttribute("src", "img/" + imgSrc);
        game.appendChild(fruit);
        fruit.style.left = arr[fruit.getAttribute("number")].offsetLeft+'px';
        fruit.style.top =  arr[fruit.getAttribute("number")].offsetTop+'px';
    }
    createFruit();

}
        });
    });

// create the snake body

if (localStorage.getItem("best_Score_Number") == undefined) {
        localStorage.setItem("best_Score_Number", indexScore);
        document.querySelector('.best_Score_Number').innerText = localStorage.getItem("best_Score_Number");
        document.querySelector('.score_Number').innerText = indexScore;
    } else {
        document.querySelector('.best_Score_Number').innerText = localStorage.getItem("best_Score_Number");
        document.querySelector('.score_Number').innerText = indexScore;
    }

function fail() {
        document.querySelector('.end').style.transform = 'scale(1)';
        document.querySelector('.background-sound').pause();
        document.querySelector('.die-sound').play();
        document.querySelector('.end').addEventListener("click", onEndBtnClicK);
        window.addEventListener("keydown", onEndKeyClick);
        arrFN.forEach(element => {
            if (element.isRunning())
                element.stop();
        });
    }

Step 4. Snack.html

<html>
<head>
<meta name="viewport"  charset="ISO-8859-1" content="width=device-width, initial-scale=1">
<link href="mKsnStyl.css" rel="stylesheet" id="bootstrap-css">
</head>
<body>
 <div class="snake">
        
        <div class="details">
            <span class="new_Score">Current Score: <span class="score_Number">0</span></span>
            <span class="best_Score">Best Score: <span class="best_Score_Number">0</span></span>
        </div>
        <div class="game">
          <div class="container"></div>
        </div>
        </div>
   
    <div class="warning-rotate">
        <h1>try to rotate the phone to play with The best performance.</h1>
    </div>
    <div class="hidden-Sound">
        <audio class="eat-sound" controls>
            <source src="eat.ogg" type="audio/ogg">
            <source src="eat.wav" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio class="die-sound" controls>
            <source src="gameover.mp3" type="audio/mpeg">
            Your browser does not support the audio element.
        </audio>
        <audio class="background-sound" controls loop>
            <source src="backgroundmusic.mp3" type="audio/ogg">
            Your browser does not support the audio element.
        </audio>
    </div>
 <script src="mkSnkjavaScrip.js"></script>
</body>
</html>

OUTPUT:

Download Game Project

Wednesday 10 February 2016

PUZZLE GAME

February 10, 2016 Game , java , java Netbeans , Tech-Projects No comments :

Desktop Game Application, Open NetBeans See The Menu Bar go to the file Menu Click on the New Project(Ctrl+Shift+N) and Select Left site categories JavaFX and Project categories to Right Site Project JavaFX Application .You have to give The Program Name "PuzzleGame". if you wont to save Project Location you can Browse and File save on the direction place and Gone a default Place and Now uncheck/check the Main Class and then press the Finish button.you can see the project Status.

Implement Game Code:

package puzzlegame;

import java.util.ArrayList;
import java.util.List;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.application.Application;
import static javafx.application.Application.launch;
import javafx.event.ActionEvent;
import javafx.event.EventHandler;
import javafx.geometry.Point2D;
import javafx.scene.Group;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Ellipse;
import javafx.scene.shape.LineTo;
import javafx.scene.shape.MoveTo;
import javafx.scene.shape.Path;
import javafx.scene.shape.Rectangle;
import javafx.scene.shape.Shape;
import javafx.stage.Stage;
import javafx.util.Duration;

/**
 *
 * @author Manoj
 */
public class PuzzleGame extends Application {
    
    private Timeline timeline;

private void init(Stage primaryStage) {
        Group root = new Group();
        primaryStage.setScene(new Scene(root));
        // load puzzle image
        Image image = new Image(getClass().getResourceAsStream(
            "r_1.jpg"));
        int numOfColumns = (int) (image.getWidth() / Piece.SIZE);
        int numOfRows = (int) (image.getHeight() / Piece.SIZE);
        // create desk
        final Desk desk = new Desk(numOfColumns, numOfRows);
        // create puzzle pieces
        final List<piece> pieces  = new ArrayList<piece>();
        for (int col = 0; col < numOfColumns; col++) {
            for (int row = 0; row < numOfRows; row++) {
                int x = col * Piece.SIZE;
                int y = row * Piece.SIZE;
                final Piece piece = new Piece(image, x, y, row>0, col>0,
                        row<numofrows -1, col < numOfColumns -1,
                        desk.getWidth(), desk.getHeight());
                pieces.add(piece);
            }
        }
        desk.getChildren().addAll(pieces);
        // create button box
        Button shuffleButton = new Button("Shuffle");
        shuffleButton.setStyle("-fx-font-size: 2em;");
        shuffleButton.setOnAction(new EventHandler<ActionEvent>() {
            @Override public void handle(ActionEvent actionEvent) {
                if (timeline != null) timeline.stop();
                timeline = new Timeline();
                for (final Piece piece : pieces) {
                   piece.setActive();
                   double shuffleX = Math.random() *
                           (desk.getWidth() - Piece.SIZE + 48f ) -
                           24f - piece.getCorrectX();
                   double shuffleY = Math.random() *
                           (desk.getHeight() - Piece.SIZE + 30f ) -
                           15f - piece.getCorrectY();
                    timeline.getKeyFrames().add(
                        new KeyFrame(Duration.seconds(1),
                            new KeyValue(piece.translateXProperty(), shuffleX),
                            new KeyValue(piece.translateYProperty(), shuffleY)));
                }
                timeline.playFromStart();
            }
        });
        Button solveButton = new Button("Solve");
        solveButton.setStyle("-fx-font-size: 2em;");
        solveButton.setOnAction(new EventHandler<actionevent>() {
            @Override public void handle(ActionEvent actionEvent) {
                if (timeline != null) timeline.stop();
                timeline = new Timeline();
                for (final Piece piece : pieces) {
                    piece.setInactive();
                    timeline.getKeyFrames().add(
                        new KeyFrame(Duration.seconds(1),
                            new KeyValue(piece.translateXProperty(), 0),
                            new KeyValue(piece.translateYProperty(), 0)));
                }
                timeline.playFromStart();
            }
        });
        HBox buttonBox = new HBox(8);
        buttonBox.getChildren().addAll(shuffleButton, solveButton);
        // create vbox for desk and buttons
        VBox vb = new VBox(10);
        vb.getChildren().addAll(desk,buttonBox);
        root.getChildren().addAll(vb);
    }

/**
     * Node that represents the playing area/ desktop where the puzzle pices sit
     */
    public static class Desk extends Pane {
        Desk(int numOfColumns, int numOfRows) {
            setStyle("-fx-background-color: #cccccc; " +
                    "-fx-border-color: #464646; " +
                    "-fx-effect: innershadow( two-pass-box , rgba(0,0,0,0.8) , 15, 0.0 , 0 , 4 );");
            double DESK_WIDTH = Piece.SIZE * numOfColumns;
            double DESK_HEIGHT = Piece.SIZE * numOfRows;
            setPrefSize(DESK_WIDTH,DESK_HEIGHT);
            setMaxSize(DESK_WIDTH, DESK_HEIGHT);
            autosize();
            // create path for lines
            Path grid = new Path();
            grid.setStroke(Color.rgb(70, 70, 70));
            getChildren().add(grid);
            // create vertical lines
             for (int col = 0; col < numOfColumns - 1; col++) {
                 grid.getElements().addAll(
                     new MoveTo(Piece.SIZE + Piece.SIZE * col, 5),
                     new LineTo(Piece.SIZE + Piece.SIZE * col, Piece.SIZE * numOfRows - 5)
                 );
            }
            // create horizontal lines
            for (int row = 0; row < numOfRows - 1; row++) {
                 grid.getElements().addAll(
                     new MoveTo(5, Piece.SIZE + Piece.SIZE * row),
                     new LineTo(Piece.SIZE * numOfColumns - 5, Piece.SIZE + Piece.SIZE * row)
                 );
            }
        }
        @Override protected void layoutChildren() {}
    }

/**
     * Node that represents a puzzle piece
     */
    public static class Piece extends Parent {
        public static final int SIZE = 100;
        private final double correctX;
        private final double correctY;
        private final boolean hasTopTab;
        private final boolean hasLeftTab;
        private final boolean hasBottomTab;
        private final boolean hasRightTab;
        private double startDragX;
        private double startDragY;
        private Shape pieceStroke;
        private Shape pieceClip;
        private ImageView imageView = new ImageView();
        private Point2D dragAnchor;

public Piece(Image image, final double correctX, final double correctY,
                     boolean topTab, boolean leftTab, boolean bottomTab, boolean rightTab,
                     final double deskWidth, final double deskHeight) {
            this.correctX = correctX;
            this.correctY = correctY;
            this.hasTopTab = topTab;
            this.hasLeftTab = leftTab;
            this.hasBottomTab = bottomTab;
            this.hasRightTab = rightTab;
            // configure clip
            pieceClip = createPiece();
            pieceClip.setFill(Color.WHITE);
            pieceClip.setStroke(null);
            // add a stroke
            pieceStroke = createPiece();
            pieceStroke.setFill(null);
            pieceStroke.setStroke(Color.BLACK);
            // create image view
            imageView.setImage(image);
            imageView.setClip(pieceClip);
            setFocusTraversable(true);
            getChildren().addAll(imageView, pieceStroke);
            // turn on caching so the jigsaw piece is fasr to draw when dragging
            setCache(true);
            // start in inactive state
            setInactive();
            // add listeners to support dragging
            setOnMousePressed(new EventHandler<MouseEvent>() {
                public void handle(MouseEvent me) {
                    toFront();
                    startDragX = getTranslateX();
                    startDragY = getTranslateY();
                    dragAnchor = new Point2D(me.getSceneX(), me.getSceneY());
                }
            });
            setOnMouseReleased(new EventHandler<mouseevent>() {
                public void handle(MouseEvent me) {
                    if (getTranslateX() < (10) && getTranslateX() > (- 10) &&
                        getTranslateY() < (10) && getTranslateY() > (- 10)) {
                        setTranslateX(0);
                        setTranslateY(0);
                        setInactive();
                    }
                }
            });
            setOnMouseDragged(new EventHandler<mouseevent>() {
                public void handle(MouseEvent me) {
                    double newTranslateX = startDragX
                                            + me.getSceneX() - dragAnchor.getX();
                    double newTranslateY = startDragY
                                            + me.getSceneY() - dragAnchor.getY();
                    double minTranslateX = - 45f - correctX;
                    double maxTranslateX = (deskWidth - Piece.SIZE + 50f ) - correctX;
                    double minTranslateY = - 30f - correctY;
                    double maxTranslateY = (deskHeight - Piece.SIZE + 70f ) - correctY;
                    if ((newTranslateX> minTranslateX ) &&
                            (newTranslateX< maxTranslateX) &&
                            (newTranslateY> minTranslateY) &&
                            (newTranslateY< maxTranslateY)) {
                        setTranslateX(newTranslateX);
                        setTranslateY(newTranslateY);
                    }
                }
            });
        }

private Shape createPiece() {
            Shape shape = createPieceRectangle();
            if (hasRightTab) {
                shape = Shape.union(shape,
                        createPieceTab(69.5f, 0f, 10f, 17.5f, 50f, -12.5f, 11.5f,
                                25f, 56.25f, -14f, 6.25f, 56.25f, 14f, 6.25f));
            }
            if (hasBottomTab) {
                shape = Shape.union(shape,
                        createPieceTab(0f, 69.5f, 17.5f, 10f, -12.5f, 50f, 25f,
                                11f, -14f, 56.25f, 6.25f, 14f, 56.25f, 6.25f));
            }
            if (hasLeftTab) {
                shape = Shape.subtract(shape,
                        createPieceTab(-31f, 0f, 10f, 17.5f, -50f, -12.5f, 11f,
                                25f, -43.75f, -14f, 6.25f, -43.75f, 14f, 6.25f));
            }
            if (hasTopTab) {
                shape = Shape.subtract(shape,
                        createPieceTab(0f, -31f, 17.5f, 10f, -12.5f, -50f, 25f,
                                12.5f, -14f, -43.75f, 6.25f, 14f, -43.75f, 6.25f));
            }
            shape.setTranslateX(correctX);
            shape.setTranslateY(correctY);
            shape.setLayoutX(50f);
            shape.setLayoutY(50f);
            return shape;
        }

private Rectangle createPieceRectangle() {
            Rectangle rec = new Rectangle();
            rec.setX(-50);
            rec.setY(-50);
            rec.setWidth(SIZE);
            rec.setHeight(SIZE);
            return rec;
        }

private Shape createPieceTab(double eclipseCenterX, double eclipseCenterY, double eclipseRadiusX, double eclipseRadiusY,
                                     double rectangleX, double rectangleY, double rectangleWidth, double rectangleHeight,
                                     double circle1CenterX, double circle1CenterY, double circle1Radius,
                                     double circle2CenterX, double circle2CenterY, double circle2Radius) {
            Ellipse e = new Ellipse(eclipseCenterX, eclipseCenterY, eclipseRadiusX, eclipseRadiusY);
            Rectangle r = new Rectangle(rectangleX, rectangleY, rectangleWidth, rectangleHeight);
            Shape tab = Shape.union(e, r);
            Circle c1 = new Circle(circle1CenterX, circle1CenterY, circle1Radius);
            tab = Shape.subtract(tab, c1);
            Circle c2 = new Circle(circle2CenterX, circle2CenterY, circle2Radius);
            tab = Shape.subtract(tab, c2);
            return tab;
        }

public void setActive() {
            setDisable(false);
            setEffect(new DropShadow());
            toFront();
        }

public void setInactive() {
            setEffect(null);
            setDisable(true);
            toBack();
        }

public double getCorrectX() { return correctX; }

public double getCorrectY() { return correctY; }
    }

@Override public void start(Stage primaryStage) throws Exception {
        init(primaryStage);
        primaryStage.show();
    }

public static void main(String[] args) {
        launch(args);
    }
    
}

Output:

Subscribe to: Posts ( Atom )

Monday 23 May 2022

How to Develop Indian Game Ludo using HTML, CSS, Javascript

Tuesday 2 February 2021

Online Snake Game

Wednesday 10 February 2016

PUZZLE GAME

OUR TECH-PROJECTS

DOWNLOAD ANY ONLINE VIDEOS

LABELS

Development Accessories

POPULAR POSTS