Saturday, 25 March 2017

JAVASCRIPT SAMPLES - SHOOTING GAME

Hello Buddies.

Trying a simple shooting game using mouse cursor and javascript.

pirate-icon.png

Complete code is available here -

https://github.com/namitsharma99/shoot-em-all





Here goes the code -


<%@ page language="java" contentType="text/html; charset=UTF-8"
   pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>sHoOt-Em-Up</title>
<style>
         #myArena {
         /* cursor: crosshair; */
         cursor: crosshair
         }
         .enemy {
         cursor: crosshair
         }
      </style>
<script
         src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
         src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript">
         $(document).ready(function(){
          generateEnemyPos();
          $("#myArena").click(function(event){
          console.log("shot fired!");
          checkCasuality(event);
          });
         });
         
         function generateEnemyPos() {
         var max = 400;
         var min = 100;
         var randomPosX = Math.random() * (max - min) + min;
         var randomPosY = Math.random() * (max - min) + min;
         $("#enemy0").css({
          top : randomPosY,
          left : randomPosX,
          position : 'absolute',
          display: 'block'
         });
         }
         
         function checkCasuality(event) {
         // alert(event.pageX+":"+event.pageY);
         var fireX = event.pageX;
         var fireY = event.pageY;
         
         var enemyPos = $("#enemy0");
         var positionOfEnemy = enemyPos.position();
         var leftOfEnemy = positionOfEnemy.left;
         var topOfEnemy = positionOfEnemy.top;
         var enemyCenterX = leftOfEnemy + 25;
         var enemyCenterY = topOfEnemy + 25;
         
         if (Math.abs(fireX - enemyCenterX) < 20 && Math.abs(fireY - enemyCenterY) < 20){
          alert ("killed");
         }
         }
      
</script>
</head>
<body>
<div>
<div id="myArena"
            style="height: 500px; width: 500px; background-color: green; position: relative; left: 0; top: 0">
            style="height: 500px; width: 500px; background-color: green; position: relative; left: 0; top: 0">
<div id="enemy0" class="enemy"
               style="height: 50px; width: 50px; display: none">
               style="height: 50px; width: 50px; display: none">
<img alt="enemy" src="pirate-icon.png" width="100%" height="100%">
</div>
</div>
</div>
</body>
</html>


We have a simple logic, the mouse cursor's coordinates should match the image's coordinates including the scope of error margin :P

Once you click in that range, you win !

As simple as that.

Give a try and come up with something good. It would be a definite confidence booster for people new to UI scripting.


Happy Coding!



Featured post

JAVA based project, that can be used to hit DB using JDBC, from WSO2 ESB

Hi Buddies, Here is a small project that will enable you to hit MySQL DB using WSO2 ESB - https://github.com/namitsharma99/customM...