A Simple Game in Javascript

-
                                     A Simple Game in Javascript 

A week ago i thought about to take a revision of my Javascript skills ,so i planned to make some useful applications in Javascript.


  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
<html>
<title>Rocket Game</title>
<head>
<style type="text/css">
html{}
img#obstacle{position: absolute;margin-left: 0px;margin-top: 0px;}
</style>
</head>
<body id="body" style="opacity:0" onload="show()">
<img id="img" src="http://s21.postimg.org/8xv7zmscz/image.gif" alt='rocket' style="position:absolute;left:0;top:0"/>
</body>
<script type="application/javascript">
throwballs();
var obs= document.getElementById("obstacle");
obs.style.left=window.innerWidth+"px";
var body = document.getElementById("body");
body.addEventListener("keydown",moverocket);
function show()
{
var body = document.getElementById("body");
body.style.opacity= 1;
}
function moverocket(evt){
var move;
var left;
var top;
var right;
var bottom;
if(evt.keyCode==39)
{
//right arrow
move=document.getElementById("img");
left= parseInt(/[0-9]+/.exec(move.style.left));
if(window.innerWidth>left)
{
left+=4;
move.style.left=left+"px";
}
}
else if(evt.keyCode==40)
{
//arrow down
move=document.getElementById("img");
top= parseInt(/[0-9]+/.exec(move.style.top));
if(window.innerHeight>top)
{
top+=4;
move.style.top=top+"px";
}
}
else if(evt.keyCode==37)
{
//left arrow
move=document.getElementById("img");
right= parseInt(/[0-9]+/.exec(move.style.left));
right-=4;
move.style.left=right+"px";
}
else if(evt.keyCode==38)
{
//up arrow
move=document.getElementById("img");
top= parseInt(/[0-9]+/.exec(move.style.top));
top-=4;
move.style.top=top+"px";
}
}
function throwballs(){
var img = new Image;
img.src="http://s13.postimg.org/bzm5kkskz/obst1.gif";
img.alt="Keep Distance";
img.id ="obstacle";
document.body.appendChild(img);
}
function moveball(ball)
{
var r;
var rk=document.getElementById("img");
var obs=document.getElementById("obstacle");
right= parseInt(/[-0-9]+/.exec(ball.style.left));
var rkl= parseInt(/[-0-9]+/.exec(rk.style.left))+100;
var obsl=parseInt(/[-0-9]+/.exec(obs.style.left));
if(right>0)
{
if(rkl==obsl)
{
var rkls= parseInt(/[-0-9]+/.exec(rk.style.top));
var obsls=parseInt(/[-0-9]+/.exec(obs.style.top));
if((obsls>(rkls-80))&&(obsls<(rkls+35)))
alert("Game Over");
}
right=right-2;
ball.style.left=right+"px";
}
else
{
ball.style.top= parseInt(300*Math.random());
ball.style.left=1200+"px";
}
}
setInterval(function(){moveball(document.getElementById("obstacle"))},10);
</script></html>


In the next blog i will  discuss about , how we can make it multiuser using PHP and Mysql Database :)  
           
See Live Example Here

Comments

Post a Comment

Popular posts from this blog

ciphers continued--Vegerne Cipher and its application in php

-
Image
> 2.Vegerne Cipher- The Vigenère cipher is a method of encrypting alphabetic text by using a series of different Caesar ciphers based on the letters of a keyword. It is a simple form of polyalphabetic substitution. The Vigenère cipher has been reinvented many times. lets look at the image for vegerne ciphers  logic now i will make a function for encription by logic of vegerne cipher function vegerne_cipher($str,$str_passwd) { if(preg_match("/[^a-zA-Z]/", $str_passwd)) { return null; } else { $str_password=strtolower($str_passwd); $pass_arr=array(); $pass_arr_num=array(); $alpha=array('a'=>'1','b'=>'2','c'=>'3','d'=>'4','e'=>'5','f'=>'6','g'=>'7','h'=>'8','i'=>'9','j'=>'10','k'=>'11','l'=>'12','m'=...
Read more

Message Sending API (Unofficial) for Way2SMS [ PHP ]

-
Recently I looked through the website http://site24.way2sms.com/content/index.html  and mapped the parameter which were used used in get and post forms. By using the Curl library i was able to send messages through Command Line  for free . For mapping the get and post parameters , I used Developer Tools in Chrome . Below i'm sharing the snippets of my php library for way2sms  so that anyone could be able to send messages on mobile by using this easy to use API. Dependency : Account on Way2SMS Website <?php /** * Created by H$[Hitesh Saini] */ class Way2Sms { //user name of Way2Sms service public static $username ; // password of Way2Sms service public static $password ; //token public static $token; function __construct ($user , $pass) { Way2Sms :: $username = $user; Way2Sms :: $password = $pass; } function init () { $postData = '' ; $url = "http://site24.way2sms.com/Login1.action...
Read more

Working with Frameworks of PHP- The MVC structure

-
Image
To work with frameworks of PHP first we have to learn what exactly is the MVC structure and how it works.. MVC is the acronym of Model View Controller.its means it has three main parts .. 1.Model             2.View              3.Controller       Lets see working flowchart of  MVC Structure . MODEL : Models are the place where main logic and codes for manipulating the database are kept ... thus its the main part of any MVC application VIEW : view is place or directory where codes or templates to interact with users are put..     CONTROLLER : controllers are the place or directory where codes to control over data given by user, are put.. Many frameworks of php are available in the market in paid or free of cost.. But now I am starting with CodeIgniter  because it is easy for beginners and you will laern it with no efforts just in first attempt.. First you need to download ...
Read more