The full source code to create game buttons and the title page with JavaFx

As my game progress I will publish a new game source code everyday until I have completed the whole game. I am simply too lazy (maybe too tired because I am developing both JavaFx game as well as android game at the same time) to explain to you what I am actually doing here therefore the title of this post should not be called the javafx gaming tutorial but instead the full javafx gaming source code instead. The game code should be easy to understand if you are already familiar with the Java program.

In this episode my mission is simple, which is to create the buttons on top of the game title page which I have created earlier.

Take note that I have changed the previous Group object to StackPane object which is more suitable for this game.

Also make sure your project contains the below folder tree.

follow these structure!
follow these structure!

Basically under the asset folder there are three files 1) 550 x 550 pixels title screen 2) 142 x 69 pixels play button 3) 142 x 69 pixels score button. More buttons will be added in the future…

Here is the source code

package mightyrock;

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Background;
import javafx.scene.layout.BackgroundFill;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.StackPane;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class MightyRock extends Application {

	@Override
	public void start(Stage theStage) throws Exception {
		
		final double CANVAS_WIDTH = 550;
		final double CANVAS_HEIGHT = 550;
		
		final Image titleScreen = new Image( "asset/title.png" ); //title screen image
		final Image playButton = new Image("asset/play.png"); //the play button image
		final Image scoreButton = new Image("asset/score.png"); //the score button image

		final ImageView flashScreen_node = new ImageView();
		flashScreen_node.setImage(titleScreen); //set the image of the title screen
	
		final Button play_button  = new Button();
		final ImageView play_button_node = new ImageView(); 
		
		final Button score_button = new Button();
		final ImageView score_button_node = new ImageView(); 
		
		play_button_node.setImage(playButton); //set the image of the play button
		score_button_node.setImage(scoreButton); //set the image of the score button
		
		play_button.setGraphic(play_button_node);
		play_button.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY))); //this is to make the button background transparent
		
		score_button.setGraphic(score_button_node);
		score_button.setBackground(new Background(new BackgroundFill(Color.TRANSPARENT, CornerRadii.EMPTY, Insets.EMPTY)));
		
		/*
		 * create the container of those buttons
		 */
		final VBox buttonContainer = new VBox(1);
		buttonContainer.setAlignment(Pos.TOP_CENTER);
		Insets buttonContainerPadding = new Insets(220, 1, 1, 1);
		buttonContainer.setPadding(buttonContainerPadding);
		buttonContainer.getChildren().addAll(play_button,score_button);
		
		theStage.setTitle( "The Mighty Rock!" );
		theStage.getIcons().add(titleScreen); //stage icon

		StackPane root = new StackPane();
		
		root.getChildren().addAll(flashScreen_node, buttonContainer); //add the title screen and button container to the stackpane
		Scene theScene = new Scene( root, CANVAS_WIDTH, CANVAS_HEIGHT, Color.CHOCOLATE );
		theStage.setScene( theScene );
		theStage.show(); 

	} 

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

}

By some unknown reason the color which is the last parameter inside the Scene constructure does not work after the Button object has been added.

OK if you run the above program here is what you get…

This is my new game
Two buttons on the title page

Hey dude if you feel high about the above program then don’t forget to share it with your friend. This gaming series will continue until I have finished the entire game!

A fun chrome browser game for you and me!

Welcome to the homepage of Monster Academy. The Game which I have developed a few years ago and put online for people to enjoy. If you are the old user of this game then you can just skip the following introduction and go directly to the what is new part.

How to play the Game 

You will use the left right up and down arrow key to move the player around the board and collect the bouncing rocks, once you have collected all the rocks on the board you will proceed to the next level. There are 11 levels in total. Actually you do not need to collect all the rocks by your own because you have a helper, duck robot is willing to help you out by collecting those rocks but be careful because once the rock deference’s between you and the robot duck has exceeded 2 then it will be game over. Make sure you don’t get hit by the monster or else it will be game over as well.

What is new

Nothing is new in this version but I have fixed the bug which I found in the game, this time I have rewritten some old code and made the game user interface more compact than the previous one. Hope you like it!

DARK SOULS III: WINNING STRATEGIES

What is Dark Soul III?

Dark Soul III is an action game developed by FromSoftware for play station 4, Xbox One and for windows PC. The game was published by Bandai Namco Entertainment. The game is among a series of games that have been developed by the same team. The game was released in Japan in March 2016 and to the rest of the world in April 2016. The Dark Soul’s series started on a lower notch but the series gained fame after dark souls II which was then followed by bloodborne and made all the gamers anticipate for the dark souls III. The game has gained many players attention and has made many people who were not aware of the dark soul series to start playing them. Dark souls III might be the last in the series as the bloodborne too will not have any other series of it. This game has made Bandai a fortune as the game has sold over three million copies in two months after release.

Destroy Enemy and Earn Currency

Dark Souls along with other games in the series only have one unique currency which is souls. These are earned by killing the enemies and using some certain items in the game. The souls can be used in buying items, upgrading your weapons and also when you level up. The only way to enjoy any action game is to stay long without being killed. For beginners, there are a few things that you have to learn about the game before you can play it. First, you have to start as a knight. This is because the shield absorbs all the physical damage taken and as long as you have the energy and stamina to block the attacks you can avoid any damage. Another key thing one needs to learn is that you must increase your weight management so as to be able to increase the skills points into vitality. This will help you be able to carry more weight and that means a heavier armor. When leveling up your character in the game there is a list of attributes that you can pick from in order to make your character strong and vigorous when it comes to war.

The Winning Strategy

In every gamers mind, the main strategy in the game is to win. In order to do this, you must be aware of the enemy’s way of attacking, where they attack and the methods they use. In Dark souls III unlike all the other past series, the enemy attacks from behind in every doorway you enter or any corner you take. These are the parts that most people are vulnerable and lose their life. Dark Souls III has fast-paced combats as compared to all the other dark soul series. The game gives the player a fast combat ability and is accompanied with new weapons. Using this, you are able to engage in fights with a large group of enemies at a go. This does not give you the chance to fight them all at once. Moving in circles helps separate them so that you can deal with one group at a time. This will help keep you alive and give you some ground to win.Leveling up is one of the things you should do as often as possible in the game. By leveling up your character, there are more skills added to be able to fight and defeat your enemies. It is a tiring process to keep losing your life and going back to get your souls back. It is at times best if you used a fast travel system to get your souls back and level up instead of losing them again as you attempt to fight. The more you level up the easier it is to fight your enemies and the less likely chances of dying.

You Draw, We Draw, Lets draw on BearDraws!

BearDraws is a simple and fun drawing extension for everyone, when you have time you can always draw with BearDraws. Now BearDraws has gone offline so you do not need to stay online in order to use this extension. I do hope you enjoy using BearDraws and if you do have any question regarding BearDraws please let me know!

Just play around and have fun!
Just play around and have fun!

Donation

As a developer I need money to continue develop more extensions for you to enjoy, if you want to support me with a few dollars each month then please visit my Patreon page and help me out.

Lets play BlackJack together!

Welcome to the homepage of Blackjack Memory, a card game which I have developed a few years ago and now it is offline for everyone to enjoy.

The game can be divided into two part, the first part will let you play as a dealer where you will play against four players in the game.

Dealer vs player
dealer vs player

Press the the first button from the left if you need more card. Press the second button from the left if yourself do not need any more card. Press the third button from the left when the player needs more card. Press the fourth button from the left to start a new game. Press the fifth button from the left to go to the solo game which we will talk about later on. (If you want to donate some money to me then press the six button from the left to visit my Patreon page).

The second part of the game will let you play one on one against another player,

player vs dealer
player vs dealer

Press the first button from the left if you need more card, otherwise press the second button from the left. Press the third button from the left to start a new game. The fourth button will show you how much money you had left. The fifth button will take you back to the multiple player game.

I hope you do enjoy this game, if you want to post any suggestion or question regarding this game then please kindly register yourself at the game forum first because only the user of the forum can post a reply.

Open source html5 canvas browser game written in Javascript

In this post you will find all the source code which I have used to create one of my html5 game which is now live on chrome web store. I have decided to open up my source code because I want to help those new html5 game creators to get started with their own html5 game, if you like this game code then please help me to share it with your friend! Before we get started let us take a look at the game concept first.

The game concept:

There are two ships, one at the front and another at the back. The front ship will intercept the incoming rock first and then the second ship will intercept that same rock again to destroy it. Every time both ships have destroyed a rock the player will get 1 point, there are 10 levels in this game.

Complete 10 levels to win the game
Complete 10 levels to win the game

How to move the ship:

Use the left right arrow key on your keyboard to move the ship, when the front ship move to the right the back ship will move to the left which will indeed increase the difficulty of the game because you need to avoid the back ship from getting hit by the incoming rock which has not yet been intercepted by the front ship!

Things to avoid and to do:

If you intercept the rock with the back ship before that rock gets intercepted by the front ship then it is game over.

You will need to intercept the rock once with both ships in order to win a point.

What are the graphics you will need for this game:

Create a 550 x 550 menu
Create a 550 x 550 main menu

This page will show up each time you have completed a level.

thick mark
94 x 75 check mark

This is the check mark used to tick on the main menu page.

87x47 play button
87×47 play button

This play button on the menu page is use to start the next level

550x550 front page
550×550 front page

The front page of the game will show up each time you load a new game

150x81 play button
150×81 play button

This play button is used on the front page as well as on the winning and the game over page of the game

Winning page
550×550 winning page

This page will show up when you have won the game

gameover page
550×550 gameover page

This page will show up when it is gameover

1059x582
1059×582 main sprite sheet

The main sprite sheet consists of three item 1) 550 x 550 background image 2) 32 x 32 ship 3) 26 x 26 rock. You will need to level the top of the rock with the top of the ship and both of them shall sit on top of the background image.

I will leave the graphic creation part to you which you can easily create them in Inkscape, if you like you can download those game graphic and then open it up on your own computer.

Besides the above graphics, you will also need to prepare an icon (16×16.ico) to show up on the tab of your browser.

On top of that, you will also need to create these audio files:

1) The sound which will be played at the time the menu page is loading. (gave.mp3)
2) The sound which will be played at the time you score a point. (eat.mp3)
3) The game over’s sound! (hits.mp3)

The mp3 file works on almost all major web browsers so I will use it instead of using the other audio file format.

After you have all those materials ready let get into the coding part.

How big is our canvas:

There are many methods that you can use to show an image on the web browser with javascript but the most common one is through the html5 canvas. In this example we will use canvas to display our gaming character and the size of the canvas will be 550 x 550 pixel. In order to use the canvas all you need to do is to insert below tag within the html5 page where you want that canvas to appear.

I have assumed you have knowledge on how to create an html5 page like below. Also don’t forget to link the 16×16.ico file which you have created earlier within the link tag.

<!doctype html>
<!--
 * Copyright (c) 2016 gamingdirectional.com. All rights reserved. 
-->
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="shortcut icon" href="./16x16png.ico"> //link to the icon file
		<title>Rock Sweeper</title> //title of the game
		<script src="jquery.js"></script> //include the jquery file
		<script src="collide.js"></script> //include the collision detection file
		<script src="main.js"></script> //include the main javascript file
		<link rel="stylesheet" type="text/css" href="main.css"> //include the css style sheet
	</head>
	<body>
		<audio id="menuSound" preload="auto">
				<source src="./eat.mp3"  type="audio/mpeg">
		</audio>
		<audio id="eatSound" preload="auto">
				<source src="./hits.mp3"  type="audio/mpeg">
		</audio>
		<audio id="overSound" preload="auto">
				<source src="./gave.mp3"  type="audio/mpeg">
		</audio>
		
 		<div class="canvas">
   			<canvas id="canvas" width="550" height="550">
    				Your browser doesn't support the HTML5 element canvas.
   			</canvas>
                        <div class="score">
   			</div>
 		</div>
 		
 		
 		
	</body>
</html>

Let see what we have on the above html5 file (index.html)

1) We will import a few files into this html5 file within the head tag section.
2) We will include the three sound files that we have created with the audio tag (I assume you are familiar with html5’s audio tag and how to use it, if you are not then here is a great tutorial online which will show you how :
http://webdesign.tutsplus.com/tutorials/create-a-customized-html5-audio-player–webdesign-7081
3) Within the canvas class division tag there are the canvas and the score tag. The score tag is use to display the score at the top corner of the canvas.

We need to specify the height and width within the canvas tag which is 550px in this example plus an id for that canvas so we can call it later on.

<canvas id="canvas" width="550" height="550">
   Your browser doesn't support the HTML5 element canvas.
</canvas>

I also have assumed you understand css style sheet so here is the style sheet (main.css) for the game page. Basically I have set the background to black so the gamer can concentrate on the game only. I also push the score tag to the top from it’s original position. Besides that, we also need to specify the width and height of this canvas class division tag to match the width and height of the canvas.

* {
 margin:0 0;
}
html {
 background-color:#000000;
}
.canvas {
 width:550px;
 height:550px;
 display:block;
 margin:1px auto auto auto;
 background-color:#000000;
} 
.score {
 position: relative;
 top:-548px;
 left:10px;
 font-size: 17px;
 line-height: 20px;
 font-weight: bold;
 color:white;
}

Below is the main.js file and the collide.js file. First of all I just want to emphasize to you that this is not a javascript tutorial for a beginner, if you want to learn the basic of javascript then here is the place which will get you started in javascript programming. http://www.w3schools.com/js/.

This post is for those of you who have already known javascript programming and would like to learn how to write a game program in javascript. I will leave you to enjoy reading the remaining javascript program, if you need more clarifications on a certain part of the program then do let me know and I will help you out!

This main.js file is where the entire game engine lies:

// Copyright (c) 2016 gamingdirectional.com. All rights reserved. 

jQuery(document).ready(function() {

	var theCanvas = document.getElementById("canvas");
	var context = theCanvas.getContext("2d");
        var canvasLeft = theCanvas.offsetLeft;
        var canvasTop = theCanvas.offsetTop;
        var play = false;

	var scoreboard = jQuery(".score");
	var sprites = [];
	
	var keyPressList = [];
	var winLabel;
	var loseLabel; 
	var loadLabel;
	var loadid;
	
	var LEVEL = 1;
	var WINGAMED = 10;

	//Key press and code
	var keypress = false;
	var KEYRIGHT = 39;
	var KEYLEFT = 37;
	var KEYSTRIKE = 32;

	//load splash
	var logoImg = new Image();
   	logoImg.src = "./title.png";
        var button = new Image();
        button.src = "./play_on.png";
   	
	var stoneswippers;
	var smallship;
	var cloud;
	
	var rocks = [];
	var rock;
	var rotation = Math.PI/180;
	var rock_vertical_distance = 300;
	var rock_spin_left = true;
 
	var LOADING = 0;
 	var BUILD_GAME_OBJ = 1;
 	var PLAYING = 2;
 	var OVER = 3;
 	var GAMED = 4;
 	var WIN = 5;
 	var gameState = LOADING;
 
	var assetsToLoad = [];
 	var assetsLoaded = 0;
	var score = 0;

	//The common sprite sheet
 
	var spriteObject = {
 	
		sourceX : 0,
      	
		sourceY : 0,
      	
		sourceWidth : 0,
      	
		sourceHeight : 0,
	
		vx : 0,
        
		vy : 0,
	
		X : 0,
        
		Y : 0,
        
		width : 0,
        
		height : 0,
        
		visible : true,
	
		rotate : false,
	
		rock_vertical_distance : 0,
	
		rock_radian : 0,
 
	};


	//Load the tilesheet image
 	var image = new Image();
 	image.addEventListener("load", loadHandler, false);
 	image.src = "./maintile.png";
 	assetsToLoad.push(image);
 	
 	//Load win screen
 	var winLabel = new Image();
 	winLabel.src = "./menu.png";
	
	//Load lose screen
 	var loseLabel = new Image();
 	loseLabel.src = "./gameover.png";
	
	//Load Gamed label
	var gamedLabel = new Image();
	gamedLabel.src = "./win.png";
	
	//Load play button
	var play_next = new Image();
	play_next.src = "./next.png";
	
	//Load thick
 	var thick = new Image();
 	thick.src = "./thick.png";
	
	var thick_location_array = [[345,35], [345,84], [345, 133], [345, 182], [345, 231], [345,280],[345,329],[345,378],[345,427],[345,476]];
 	
	//Load sound
	var eat = document.querySelector("#eatSound");
	var gave = document.querySelector("#overSound");
	var menu = document.querySelector("#menuSound");
	eat.addEventListener("canplaythrough", loadHandler, false);
 	eat.load();
 	assetsToLoad.push(eat);
 	gave.addEventListener("canplaythrough", loadHandler, false);
 	gave.load();
 	assetsToLoad.push(gave); 
	menu.addEventListener("canplaythrough", loadHandler, false);
 	menu.load();
 	assetsToLoad.push(menu); 
	

	function loadHandler() {
		assetsLoaded++;
		if(assetsLoaded === assetsToLoad.length) {
			//Remove the load handler
			image.removeEventListener("load", loadHandler, false);
			eat.removeEventListener("load", loadHandler, false);
			gave.removeEventListener("load", loadHandler, false);
			menu.removeEventListener("load", loadHandler, false);
			play = true;
		} 
	}

	//load the game splash screen
	loadid = requestAnimationFrame(gameStateTitle);
	
	// Add event listener for `click` events.
	theCanvas.addEventListener('click', function(event) {
    	  var x = event.pageX - canvasLeft,
          y = event.pageY - canvasTop;
          if(x > 190 && x <= 340 && y > 240 && y <= 321) {
			if(play == true) {
				cancelAnimationFrame(loadid);
  				gameState=BUILD_GAME_OBJ;
  				requestAnimationFrame(updateGameStatus);
				play = false;
			} else if(gameState == OVER) {
				sprites = [];
				rocks = [];
				score = 0;
				rock_vertical_distance = 300;
				rock_spin_left = true;
				keyPressList = [];
				gameState = BUILD_GAME_OBJ;
			} else if(gameState == GAMED) {
				sprites = [];
				rocks = [];
				score = 0;
				rock_vertical_distance = 300;
				rock_spin_left = true;
				keyPressList = [];
				gameState = BUILD_GAME_OBJ;
				LEVEL = 1;
			}
		} else if(x > 450 && x <= 537 && y > 483 && y <= 530) {
			if(gameState == WIN) {
				sprites = [];
				rocks = [];
				score = 0;
				rock_vertical_distance = 300;
				rock_spin_left = true;
				keyPressList = [];
				gameState = BUILD_GAME_OBJ;
				LEVEL += 1;
			}
		} 
        }, false);

 	function gameStateTitle(timestamp) {
 		context.clearRect(0, 0, theCanvas.width, theCanvas.height);
		context.drawImage(logoImg, 0, 0, logoImg.width, logoImg.height);
		if(play == true)
			context.drawImage(button, 190, 240, button.width, button.height);
		loadid = requestAnimationFrame(gameStateTitle);
	} 

	//run check game status 
	function updateGame() {
		updateKeycode();
		updateCloud();
		updateShip();
		updateStoneswippers();
		updateRock();
	}
	
	function updateGameStatus(timestamp) {
  		checkGameStatus();	
    	        requestAnimationFrame(updateGameStatus);
	}

	function updateKeycode(){
	
		if(keyPressList[KEYLEFT] == true && (gameState != WIN || gameState != OVER)) {
			stoneswippers.vx = -1;
			stoneswippers.X += stoneswippers.vx;	
			smallship.vx = 1;
			smallship.X += smallship.vx; 
		} else if(keyPressList[KEYLEFT] == false && (gameState != WIN || gameState != OVER)){
			stoneswippers.vx = 0;
			smallship.vx = 0;
		}
		
		if(keyPressList[KEYRIGHT] == true && (gameState != WIN || gameState != OVER)){
			stoneswippers.vx = 1;	
			stoneswippers.X += stoneswippers.vx;
			smallship.vx = -1;
			smallship.X += smallship.vx; 
		} else if(keyPressList[KEYRIGHT] == false && (gameState != WIN || gameState != OVER)){
			stoneswippers.vx = 0;
			smallship.vx = 0;
		}
	
	}

	function updateCloud() {
		if(cloud.Y >= theCanvas.height) {
			cloud.Y = -326;
		} else {
			cloud.vy = 1;
			cloud.Y += cloud.vy; 
		}
	}

	function updateShip() {
		if(smallship.X + smallship.width > theCanvas.width) {
			smallship.X = theCanvas.width - smallship.width;
		} else if(smallship.X < 0) {
			smallship.X = 0; 
		}
	}

	function updateStoneswippers() {
		if(stoneswippers.X + stoneswippers.width > theCanvas.width) {
			stoneswippers.X = theCanvas.width - stoneswippers.width;
		} else if(stoneswippers.X < 0) {
			stoneswippers.X = 0; 
		}
	}

	function updateRock() {
		for(var i = rocks.length-1; i >= 0; i--) {
			rock = rocks[i];
			rock.contact = true;
			if(rock.Y >= theCanvas.height) {
				rocks.splice(i, 1);
			} else {
				rock.vy = 1;
				rock.Y += rock.vy; 
			}
		}
		if(rocks.length < 500)
			createMoreRocks();
	}

	function createMoreRocks(){

	        rock_vertical_distance += 50;
		rock = Object.create(spriteObject);

		rock.vy = 0;
					
		rock.sourceX = 32;
					
		rock.sourceY = 0;
	
		rock.sourceWidth = 26;
	
		rock.sourceHeight = 26;
	
		rock.width = 26;
	
		rock.height = 26;
	
		rock.rotate = true;
		rock.hit = false;
		rock.rock_radian = 0;
		rock.size = Math.random();
		if(rock.size < 0.7);
			rock.size = 0.7;
		
		rock.X = (theCanvas.width) * Math.random();
		if(rock.X <= 0)
			rock.X = 30;
				
		rock.Y = -rock_vertical_distance;
		rock.rock_vertical_distance = -rock_vertical_distance;
			
		if(rock_spin_left) {
			rock.rock_spin_left = true;
			rock_spin_left = false;
		} else if(!rock_spin_left) {
			rock.rock_spin_left = false;
			rock_spin_left = true;
		}	
		rock.rock_radian = 0;
		rock.visible = true;
		sprites.push(rock);
		rocks.push(rock);
	}

	//Add keyboard listeners
 	window.addEventListener("keydown", function(event) {
 	
		switch(event.keyCode) {
	
			case KEYLEFT:
			keyPressList[event.keyCode] = true;
			break;
	
			case KEYRIGHT:
			keyPressList[event.keyCode] = true;
			break;
	
		}
  
	}, false);

  

	window.addEventListener("keyup", function(event) {
  	
		switch(event.keyCode) {
			case KEYLEFT:
			keyPressList[event.keyCode] = false;
			break;
		
			case KEYRIGHT:
			keyPressList[event.keyCode] = false;			
			break;
			
		}
 
	}, false);

	window.addEventListener("keydown", function(e) {
    	   // space and arrow keys prevent default
    	   if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        	e.preventDefault();
    	   }
	}, false);

	function checkGameStatus() {
 	

		switch(gameState) {

			case BUILD_GAME_OBJ:
				buildGameObject();
				gameState = PLAYING;
				break;

			case PLAYING:
				updateGame();
				checkCollide();
				render();
				break;

			case OVER:
				updateKeycode();
				render();
				break;

			case WIN:
				updateKeycode();
				render();
				break;
			
			case GAMED:
				updateKeycode();
				render();
				break;
			
 	
		}
 	}

	function buildGameObject() {
	
		//create ground
		var ground = Object.create(spriteObject);			
		ground.sourceX = 0;
		ground.sourceY = 32;
		ground.X = 0;
		ground.Y = 0;
		ground.visible = true;
		ground.sourceWidth = 550;
		ground.sourceHeight = 550;
		ground.width = 550;
		ground.height = 550;
		sprites.push(ground);
	
		//create stoneswippers object
		stoneswippers = Object.create(spriteObject);
		stoneswippers.vx = 0;
		stoneswippers.sourceX = 0;
		stoneswippers.sourceY = 0;
		stoneswippers.sourceWidth = 32;
		stoneswippers.sourceHeight = 32;
		stoneswippers.width = 32;
		stoneswippers.height = 32;
		stoneswippers.X = theCanvas.width/2 - stoneswippers.width/2;
		stoneswippers.Y = theCanvas.height - 130;
		stoneswippers.visible = true;
		sprites.push(stoneswippers);
	
		//create the small ship
		smallship = Object.create(spriteObject);
		smallship.vx = 0;
		smallship.sourceX = 0;
		smallship.sourceY = 0;
		smallship.sourceWidth = 32;
		smallship.sourceHeight = 32;
		smallship.width = 32;
		smallship.height = 32;
		smallship.X = theCanvas.width/2 - smallship.width/2 - stoneswippers.width;
		smallship.Y = theCanvas.height - 70;
		smallship.visible = true;
		sprites.push(smallship);
	
		//create first 3 rock object
		var rock_count = 0;
		for(var i = 0; i < 3; i++) {
		
			rock = Object.create(spriteObject);
			rock.vy = 0;		
			rock.sourceX = 32;
			rock.sourceY = 0;
			rock.sourceWidth = 26;
			rock.sourceHeight = 26;
			rock.width = 26;
			rock.height = 26;
			rock.rotate = true;
			rock.hit = false;
			rock.size = Math.random();
			if(rock.size < 0.7)
				rock.size = 0.7;
			if(rock_count == 0){
				rock.X = theCanvas.width/2 - rock.width/2;
			} else if(rock_count == 1){
				rock.X = 50;
			} else {
				rock.X = 450;
			}
			rock.Y = -rock_vertical_distance;
			rock.rock_vertical_distance = -rock_vertical_distance;
			rock_count++;
		
			if(rock_spin_left) {
				rock.rock_spin_left = true;
				rock_spin_left = false;
			} else if(!rock_spin_left) {
				rock.rock_spin_left = false;
				rock_spin_left = true;
			}
					
			rock.visible = true;			
			sprites.push(rock);
			rocks.push(rock);
		}
	
		//create cloud
		cloud = Object.create(spriteObject);
		cloud.sourceX = 550;
		cloud.sourceY = 32;
		cloud.visible = true;
		cloud.vy = 0;
		cloud.sourceWidth = 509;
		cloud.sourceHeight = 326;
		cloud.width = 509;
		cloud.height = 326;
		cloud.X = theCanvas.width/2 - cloud.width/2;
		cloud.Y = -326;
		sprites.push(cloud);
		
	}

	function render() {
	
		context.clearRect(0, 0, theCanvas.width, theCanvas.height);
		
		if(gameState == GAMED) {
			context.drawImage (gamedLabel, 0, 0, gamedLabel.width, gamedLabel.height,0, 0,   gamedLabel.width, gamedLabel.height);
			context.drawImage(button, 190, 240, button.width, button.height);
		}
		
		else if(gameState == OVER) {
			context.drawImage (loseLabel, 0, 0, loseLabel.width, loseLabel.height,0, 0, loseLabel.width, loseLabel.height);
			context.drawImage(button, 190, 240, button.width, button.height);
		}
		
		else if(gameState == WIN) {
			context.drawImage (winLabel, 0, 0, winLabel.width, winLabel.height,0, 0, winLabel.width, winLabel.height);
			for(var i = 0; i < LEVEL; i++) {
				context.drawImage (thick, 0, 0, thick.width, thick.height, thick_location_array[i][0], thick_location_array[i][1], thick.width, thick.height);
			}
			context.drawImage (play_next, 0, 0, play_next.width, play_next.height,450, 483, play_next.width, play_next.height);
		} else {
	
			for(var i = 0; i < sprites.length; i++) {
		
				var sprite = sprites[i];
		
				if(sprite.visible != true) {
					continue;
				}
				if(sprite.rotate == true) {
					context.save(); 
			
					if(sprite.rock_spin_left) {
						sprite.rock_radian+=7;
					} else if(!sprite.rock_spin_left) {
						sprite.rock_radian+=-7;
					}
			
					sprite.width = sprite.sourceWidth*sprite.size;
					sprite.height = sprite.sourceHeight*sprite.size;
					context.translate(sprite.X + sprite.width/2, sprite.Y + sprite.height/2); 
			
					// rotate around this point
					context.rotate(sprite.rock_radian*rotation); 
 
					// then draw the image back and up
					context.drawImage(image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight,-sprite.width/2, -sprite.height/2, sprite.width, sprite.height); 
 
					// and restore the co-ordinate system to its default top left origin and no rotation
					context.restore();
			
				} else if(sprite.rotate == false) {
					context.drawImage (image, sprite.sourceX, sprite.sourceY, sprite.sourceWidth, sprite.sourceHeight,sprite.X, sprite.Y, sprite.width, sprite.height);
				}
			}
		}	
	}

	function checkCollide() {
 	
		for(var i = rocks.length-1; i >= 0; i--) {
			rock = rocks[i];
			if(checkShipRockCollide(stoneswippers, rock)) {
					//rocks.splice(i, 1);
					//rock.visible = false;
					rock.hit = true;
					if(rock.X > 270) {
						rock.X -= 1;
					} else {
						rock.X += 1;
					}
					//score++;
					//scoreboard.text("Stone Down : " + score);
			} 
		}	
 
		for(var i = rocks.length-1; i >= 0; i--) {
			rock = rocks[i];
			if(checkShipRockCollide(smallship, rock) && rock.hit) {
				eat.play();
				rocks.splice(i, 1);
				rock.visible = false;
				score++;
				scoreboard.text("Stone Down : " + score);
				if(score >= LEVEL * 10 && LEVEL == WINGAMED) {
					scoreboard.text('');
					gameState = GAMED;
					menu.play();
					break;
				} else if(score >= LEVEL * 10) {
					scoreboard.text('');
					gameState = WIN;
					menu.play();
					break;
				}
			} else if(checkShipRockCollide(smallship, rock)) {
				gameState = OVER;
				gave.play();
				scoreboard.text('');
				rock.visible = false;
				smallship.visible = false;
				rocks.splice(i, 1);
				menu.play();
				break;
			} 
		}	
		
	}
	
});

The collide.js file is use to detect the contact between the rock and the ship:

function checkShipRockCollide(ship, rock) {
	
	var vectorX = (ship.X + ship.width/2) - (rock.X + rock.width/2);
	var vectorY = (ship.Y + ship.height/2) - (rock.Y + rock.height/2);
	var magnitude = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
	
	var totalRadius = rock.width/2 + ship.width/2;
	
	var hit = magnitude < totalRadius;
		
	//Check for a collision on the X axis
	if(hit) {
		return true;
	} else {
		return false;
	}    
}

Besides those two files above you will also need to download the latest jQuery file from this link : https://jquery.com/download/ and rename the file to jquery.js

Now let us play the game on this page http://gamingdirectional.com/application/RockSweeper/index.html and see those scripts in action.

Ball hits Cube is a simple fun game but is really hard to win

Ball hits Cube is a game which I have developed a few years ago and it is still one of the flagships on my gaming site. This game is now an offline game so you do not need to be online to play it!

The concept behind this game is really simple, a player will start off the game with a fix amount of canon balls that he will use to destroy a cube which is moving toward him, if the cube is destroyed before it reaches the target then he will win the game and moves on to the next stage, the unused canon balls will be carried into the next stage as well so he will have more canon balls to destroyed the next moving cube. If he fails then it is game over and he will need to start all over again.

The cube will become thinner on every new stage so it will be more difficult to destroy the cube because a cube will move faster when it is thinner. My personal best for this game is stage number 5 but you can certainly do better if you have played the arcade game before.

To start the game press the ‘3’ key, press spacebar to launch the cannon ball, press < to decrease and > to increase the range of the ball!

If you like this game please recommend it to your friend so more people can play it!