TAT

November 16, 2017

TheAmbitiousTrainer

MAyonnaise

November 9, 2017

Very underrated thread, keep up the great work!

February 5, 2017

why am i not in this

.beside that, nice try

February 3, 2017

18 hours ago, flamescape said:

It doesn't work quite right..

~~fixed it, can you try finding another hole?~~ Never mind.

Gave up on the first code, i decided to remake it entirely, this second code is much better and i doubt it'll fail

though it won't work with exponents (i think)

new code here :

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>exercise</title>
</head>
<body>
<input type="text" id="inp1" placeholder="First value" value="-1"/>
<input type="number" id="inp2" placeholder="Second value" value="0.2"/>
<button type="submit" onclick="add();">Add</button>
<p id="Val"> The sum is : <span id="solution"></span></p>
<script>
document.getElementById("Val").style.display='none';
var solution;
function add() {
var a = document.getElementById("inp1").value;
var b = document.getElementById("inp2").value;
var sum = parseFloat(a)+parseFloat(b);
solution = sum.toFixed(bigLen(a,b));
document.getElementById("solution").innerHTML = solution;
document.getElementById("Val").style.display = 'block';
}
function isFloat(n){
      //isFloat function is from Stackoverflow because my method is buggy
    return n != "" && !isNaN(n) && Math.round(n) != n;
}
function bigLen(a,b) {
  var o,i,j;
  o = isFloat(a) ?  a.split(".")[1].length:0;
  i = isFloat(b) ?  b.split(".")[1].length:0;
  j = Math.max(o,i);
  return j;
}
</script>
</body>

February 2, 2017

19 hours ago, flamescape said:
function dec2bin( dec ) {
   return dec.toString(2);
}
done.

Challenge:

Make a function which can add two decimal numbers together (of any precision).

e.g.
add( "0.1", "0.2" ); // returns "0.3"
add( "-1", "1.15" ); // returns "0.15"

That method is no fun

Also, finished your code, can you run it tell me if there are any thing i didn't cover / errors

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>exercise</title>
</head>
<body>
<input type="text" id="inp1" placeholder="First value" value="0.001"/>
<input type="number" id="inp2" placeholder="Second value" value="0.2"/>
<button type="submit" onclick="add();">Add</button>
<p id="Val"> The sum is : <span id="solution"></span></p>
<script>
document.getElementById("Val").style.display = 'none';
function add() {
  /*this might be a simple a+b function, but when going through
  decimal points on a high level programming language, the resuluts aren't going
  to be so accuarate*/
  var a = document.getElementById("inp1").value;
  var b = document.getElementById("inp2").value;
  var resp;
  if(isFl(a) && isFl(b)) {
      //checking if both values are floats
    var maxLen = Math.max(decNum(a,"length"),decNum(b,"length"));
    var minVal = (decNum(a,"length") < maxLen)? decNum(a,"n"):decNum(b,"n");
    var maxVal = (decNum(a,"length") >= maxLen)? decNum(a,"n"):decNum(b,"n");
    if(decNum(a,"length") == decNum(b,"length")){
      minVal = Math.min(decNum(a,"n"),decNum(b,"n"));
      maxVal = Math.max(decNum(a,"n"),decNum(b,"n"));
    }
    var power =  (maxVal.toString().length - minVal.toString().length == 0)? 1:Math.pow(10,maxVal.toString().length - minVal.toString().length);
    var decSum = (parseInt(maxVal) + minVal * power).toString();
    var extra = (decSum.substr(0,decSum.length-maxLen) == 0)? 0:decSum.substr(0,decSum.length-maxLen);
    var realSum = parseInt(a) + parseInt(b) + parseInt(extra);
    resp = realSum.toString() + "." + decSum.substr(decSum.length-maxLen);
  }
  else if(isFl(a) ||  isFl(b)) {
    //one is float, the other isn't
    resp = parseInt(a) + parseInt(b) + "." + fl(a,b);
  }
  else {
    resp = parseInt(a) + parseInt(b);
  }
  document.getElementById("solution").innerHTML = resp;
  document.getElementById("Val").style.display = 'block';
}
//function that checks if a number is a float
function isFl(a) {
  var res = (parseInt(a) == a)? false:true;
  return res;
}
//function that gives the length of number after decimal points or the number
function decNum(a,b) {
  var num = a.toString().split(".")[1];
  if(b=="length") {
    return num.length;
  }
  else if(b=="pure")
    return num;
  else {
    return num;
  }
}
//function that returns wich the float value
function fl(a,b) {
  var flVal = (isFl(a))?a:b;
  return decNum(flVal,"pure");
}
</script>
</body>

------------------------------------------------------------------------------------------------------------------------------------------------------

=============================================================================================

------------------------------------------------------------------------------------------------------------------------------------------------------

@amank , sure it's one of the simplest codes :!)

function factorial(a) {
  var sum = 1;
  for (var i = a; i > 0; i--) {
    sum *= i;
  }
   return sum;
}

February 1, 2017

Hey guys, so i need some training on javascript, if you got any small tasks you want to do with javascript, leave them in a comment and i'll try to make a script for it

Challenge number 1 : Decimal to binary conversion (with the ability to choose how may bits)

Status: Completed

Code :

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>exercise</title>
</head>
<body>
<input type="text" id="value" placeholder="Decimal value" value="28"/>
<input type="number" id="bit" placeholder="Bit" value="5"/>
<button type="submit" onclick="convert();">Convert</button>
<p id="ConVal">Your value in <span id="bitres"></span>-Bit is  <span id="res"></span></p>
<script>
document.getElementById("ConVal").style.visibility='hidden';
function convert() {

  var input = document.getElementById("value").value;
  var bit = document.getElementById("bit").value;
  var plc = 0;
  var res = "";
  if(Math.pow(2,bit) >= parseInt(input)) {

    var bin = [1];
    //create the array with the binary compounds
    for(var i = 0; i < parseInt(bit); i++){
        bin.push(bin[i]*2);
    }
    //start translating :)
    for(var i = bin.length-1; i >= 0 ; i--) {
      if(plc == 0) {
        if(bin[i] > input) {
          res+="0";
        }
        else if ( bin[i]<=input ) {
          res+="1";
          plc+=bin[i];
        }
      }
      else {
        if( (plc+bin[i]) <= input) {
          plc+=bin[i];
          res+=1;
        }
        else if((plc+bin[i]) > input) {
          res+=0;
        }
      }

        document.getElementById("bitres").innerHTML = bit;
        document.getElementById("res").innerHTML = fix(res);
    }
    document.getElementById("ConVal").style.visibility='visible';
  }
  else {
    alert("incorrect bit");
  }
}
function fix(a) {
  if(a.indexOf(1) >0) return a.substr(a.indexOf(1))
}
</script>
</body>

Challenge number 2 : The sum of two decimal numbers (From FlameScape)

Status : Finished

Code :

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>exercise</title>
</head>
<body>
<input type="text" id="inp1" placeholder="First value" value="0.001"/>
<input type="number" id="inp2" placeholder="Second value" value="0.2"/>
<button type="submit" onclick="add();">Add</button>
<p id="Val"> The sum is : <span id="solution"></span></p>
<script>
document.getElementById("Val").style.display = 'none';
function add() {
  /*this might be a simple a+b function, but when going through
  decimal points on a high level programming language, the resuluts aren't going
  to be so accuarate*/
  var a = document.getElementById("inp1").value;
  var b = document.getElementById("inp2").value;
  var resp;
  if(isFl(a) && isFl(b)) {
      //checking if both values are floats
    var maxLen = Math.max(decNum(a,"length"),decNum(b,"length"));
    var minVal = (decNum(a,"length") < maxLen)? decNum(a,"n"):decNum(b,"n");
    var maxVal = (decNum(a,"length") >= maxLen)? decNum(a,"n"):decNum(b,"n");
    if(decNum(a,"length") == decNum(b,"length")){
      minVal = Math.min(decNum(a,"n"),decNum(b,"n"));
      maxVal = Math.max(decNum(a,"n"),decNum(b,"n"));
    }
    var power =  (maxVal.toString().length - minVal.toString().length == 0)? 1:Math.pow(10,maxVal.toString().length - minVal.toString().length);
    var decSum = (parseInt(maxVal) + minVal * power).toString();
    var extra = (decSum.substr(0,decSum.length-maxLen) == 0)? 0:decSum.substr(0,decSum.length-maxLen);
    var realSum = parseInt(a) + parseInt(b) + parseInt(extra);
    resp = realSum.toString() + "." + decSum.substr(decSum.length-maxLen);
  }
  else if(isFl(a) ||  isFl(b)) {
    //one is float, the other isn't
    resp = parseInt(a) + parseInt(b) + "." + fl(a,b);
  }
  else {
    resp = parseInt(a) + parseInt(b);
  }
  document.getElementById("solution").innerHTML = resp;
  document.getElementById("Val").style.display = 'block';
}
//function that checks if a number is a float
function isFl(a) {
  var res = (parseInt(a) == a)? false:true;
  return res;
}
//function that gives the length of number after decimal points or the number
function decNum(a,b) {
  var num = a.toString().split(".")[1];
  if(b=="length") {
    return num.length;
  }
  else if(b=="pure")
    return num;
  else {
    return num;
  }
}
//function that returns wich the float value
function fl(a,b) {
  var flVal = (isFl(a))?a:b;
  return decNum(flVal,"pure");
}
</script>
</body>

Challenge number 3 : return The factorial of a number

Status: Completed

Code :

Spoiler



function factorial(a) {
  var sum = 1;
  for (var i = a; i > 0; i--) {
    sum *= i;
  }
   return sum;
}

P.s : Any requests for bots will be forwarded to mods.

December 20, 2016

New minigame

I made a small 2d shooter using a javascript framework called P5.js which makes game developping with canvas much easier

To test out the minigame, go here, its still in dev stage though

HTML CODE

Spoiler


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>1.js</title>
    <script src="libraries/p5.js" type="text/javascript"></script>

    <script src="libraries/p5.dom.js" type="text/javascript"></script>
    <script src="libraries/p5.sound.js" type="text/javascript"></script>

    <script src="sketch.js" type="text/javascript"></script>

    <style> body {padding: 0; margin: 0;} canvas {vertical-align: top;} </style>
  </head>
  <body>
  </body>
</html>

Javascript code

Spoiler


var bullets = [];
var targets = [];
function setup() {
  createCanvas(500,500);
  for (var t = 1; t < 7; t++) {
    targets.push(new target(t,1));
  }
}
function draw() {
 background(255);
// DRAWING THE MAIN
  fill(160,0,0);
  if (mouseX > 0 && mouseX < 499) {
  ellipse(mouseX,485,30,30);
  }
  else if (mouseX > 499) {
  ellipse(499,485,30,30);
  }
  else {
      ellipse(1,485,30,30);
  }
// Drawing The bullets
  for (var i = 0; i < bullets.length; i++) {
    if(bullets[i].Y < 1) {
      bullets.splice(i,1);
    }
    else if(bullets[i].hits()) {
      bullets.splice(i,1);
    }
    else {
      bullets[i].shoot();
      fill(0,150,0);
      ellipse(bullets[i].X,bullets[i].Y, 5,5);
    }
  }
// Drawing the target
stroke(120,100,0);
strokeWeight(4);
for (var i = 0; i < targets.length; i++) {
  rect(targets[i].X,targets[i].Y,10,10);
  targets[i].move();
}
 //END OF DRAW
}
function mousePressed() {
  bullets.push(new Bullet());
}
var Bullet = function() {
  const MX = mouseX;
  this.X = MX;
  this.Y = 480;
  this.shoot = function() {
    this.Y -= 3;
  }
  this.hits = function() {
    for(var bl = 0; bl < targets.length ;bl++) {
      var distance = dist(this.X,this.Y,targets[bl].X,targets[bl].Y);
      if(distance < 10) {
        console.log(distance);
       targets.splice(bl,1);
      }
    }
  }
}
var target = function(x,r) {
  this.steps = 0;
  this.row = r;
  this.X = x *70;
  this.Y = r * 20;
  this.dir = 1;
  this.move = function() {
    this.X += this.dir;
    this.steps += this.dir;
    if (this.steps == 60) this.dir = -1;
    else if(this.steps == 0) this.dir = 1;
  }
}

October 26, 2016

Nice code, but i wouldn't recommend people to use it for few reasons

first of all, you'll need to have 1 password only for this to work so this cant be used in login forms

second and most importantlly, security. someone could just view the js source code and get the pass

i wouldn't recommend using a front-end language like JS for this kind of staff, rather back-end language like PHP, here is a small snippet that is just like yours but uses PHP's PDO prepared statments to fetch a password from the given database and see's if's its correct

<?php
include "DatabaseConnexionScript.php"; //presumably, make a connection script with a database and name the connection variable as $conn
if(!isset($_COOKIE["attempts"])) {
 setcookie("attempts",0,86400,"/register","yoursitename.com",1,1); 
}
if ($_COOKIE["attempts"] < 4) {
  $sqlCheck= "Select Count(*) as cnt from users where nick=:n AND pass=:p";
  $sqlSend = $conn->prepare($sqlCheck);
  $sqlSend->execute(Array(
    ":n"=>$_POST["nick"],
    ":p"=>$_POST["pass"]
    ));
  $sqlFetch = $sqlSend->fetch(PDO::FETCH_ASSOC);
  if($sqlFecth["cnt"] == 1) {
   //This mean the user was logged in correctly, Redirect him to the use area and create the SESSION cookies, DOn't forget to not store pass in the cookies
    header("Location: userarea.php");
  }
  else {
   $_COOKIE["attempts"] += 1; 
  }
}
else {
 echo "Max amount of tries has been achieved, try again in 10 mins"; 
}
?>

This is much much more secure

August 16, 2016

For better maps, Use RPG game maker. You can get the free trial in here

After making the maps, you can suggest them in here.

August 5, 2016

On 15/07/2016 at 4:23 AM, EagerRhino said:

Well Everybdoy Does Gives Credit To Them.But Credit Here Goes To The One Who Spends Time On Finding The Best Ones To Satisfy Us. @Serapheon23 You are doing great,no matter what!

What work?

He is just googling

evryone can google

July 26, 2016

Hello, i was asked to make a jquery image slider, i know bootstrap has many ones, but i thought i should male my own, so here it is :

HTML file :

Spoiler


<!DOCTYPE html>
<html>
<head>
<title>Jquery slider</title>
<link type="text/css" rel="stylesheet" href="website4.css">
<script type="text/javascript" src="Jquery.min.js"></script>
</head>
<body>
<center><div id="container">
<div id="left"><h1><</h1></div>
<div id="images">
<img id="image" src="1.jpg" />
</div>
<div id="right"><h1>></h1></div>
<center><div id="index">
<div class="sr" id="i0"></div>
<div class="sr" id="i1"></div>
<div class="sr" id="i2"></div>
</div></center>
<script src="website4.js"></script>
<div></center>
</body>
</html>

CSS file :

Spoiler


#container {
	min-height: 500px;
	height: auto;
	width: 80%;
	background: -webkit-linear-gradient(right, white,gray,white,gray,white);
	border: 1px solid black;
}
div {
	transition: background-color 1s;
}
#left, #right {
	height: 100px;
	width: 10%;
	background-color: rgba(255,255,255, 0.6);
	border: 1px solid black;
	text-align: center;
	margin-top: 10%;
	cursor: pointer;
	padding: auto;
}
#left {
	float: left;
}
#right {
	float: right;
}
#left:hover , #right:hover  {
	background-color: rgba(255,255,255, 1);
}
#images {
	float: left;
	width: 75%;
	margin-left: 25px;
}
img {
	height: 450px;
	width: 100%;
	border-raduis : 8px;
}
.sr {
	height: 35px;
	width: 35px;
	border: 2px solid white;
	border-radius: 50%;
	background-color: rgba(0,0,0, 0.6);
	margin-left: 50px;
	margin-right: 50px;
	cursor: pointer;
	display: inline-block;
}

Jquery file :

Spoiler


$(document).ready(function() {
	$(getCurr()).css("background-color", "rgba(0,0,0, 1)");
	autoSwipe();
	window.setInterval(check,100);
	var chng = window.setInterval(updateInd,100);
	$("#right , #left").click(function() {
		x = 0;
	});
	$("#left").click(function(){changeImg(-1);});
	$("#right").click(function(){changeImg(1);});
	$(".sr").not(getCurr()).hover(function() {
		window.clearInterval(chng);
		$(this).css("background-color", "rgba(0,0,0, 1)");
	}, function() { $(this).css("background-color", "rgba(0,0,0, .6)"); chng = window.setInterval(updateInd,100); });
	$(".sr").click(function() {
		var index = [0,1,2];
		var page = $(this).attr("id").substr(1,1);
		$("img").fadeOut("very slow",function() {$("img").attr("src",index[page] + ".jpg");});
		$("img").fadeIn("very slow");
		updateInd();
		x=0;
		});
});
//FUNCTIONS)================================================================================================================
var x = 0;
function getCurr() {
	var src,u;
	setInterval(function() {
	src = $("img").attr("src");
	u = src.substr(0,1);
	},10);
	return "#i"+u
}
//==========================================================================================================================
function changeImg(a) {
	var index = [0,1,2];
	var Ind = [0,1,2];
	var src = $('img').attr("src");
	var i = src.substr(0,1);
	console.log(i);
	i = parseInt(i);
	i += a;
	$("img").fadeOut("very slow",function() {$("img").attr("src",index[i] + ".jpg");});
	$("img").fadeIn("very slow");
	updateInd();
}
//==========================================================================================================================
function updateInd() {
	var index = [0,1,2];
	var src = $('img').attr("src");
	var i = src.substr(0,1);
	$("#i"+i).css("background-color", "rgba(0,0,0, 1)");
	if (index[0] != i) { $("#i0").css("background-color", "rgba(0,0,0, 0.6)");}
	if (index[1] != i) { $("#i1").css("background-color", "rgba(0,0,0, 0.6)");}
	if (index[2] != i) { $("#i2").css("background-color", "rgba(0,0,0, 0.6)");}
}
//==========================================================================================================================
function check() {
	var src = $('img').attr("src");
	var i = src.substr(0,1);
	if (i == 0) {
		$("#left").css("opacity", 0,2).css("pointer-events", "none");
	}
	else if (i == 2) {
		$("#right").css("opacity", 0,2).css("pointer-events", "none");
	}
	else {
		$("#left").css("opacity", 1).css("pointer-events", "auto");
		$("#right").css("opacity", 1).css("pointer-events", "auto");
	}
}
//==========================================================================================================================
function autoSwipe() {
	var prev;
	var changeInt = window.setInterval(function() { 
	if (x == 2000) {
			var src = $('img').attr("src");
			var i = src.substr(0,1);
			x=0;
			if ( i == 2) {
				changeImg(-1);
				updateInd();
				prev = 2;
			}
			else if (i == 0) { 
			changeImg(1);
			updateInd();
			prev = 0;
			}
			else {
				if (prev == 2) { changeImg(-1); updateInd(); }
				else if (prev == 0){ changeImg(1); updateInd();}
				else{ changeImg(1); updateInd();}
			}
	}
	x++;
	},1);
};
//End ==========================================================================================================================

Just paste these in a note pad and put them in a file, and get 3 images, and name them 0.jpg, 1.jpg and 2.jpg.

then open the html file in chrome or you're browser and enjoy

July 9, 2016

Thank you for advicce @eurstin Most html/css/js compilers will work, the thing is that these games are meant to be in a website, and if my previous code was actualy used from a server beside my local host, it would have worked in chrome

-----------------------------------------------------------------------------

Ep3 : Snake game

Approximate time taken to make : 2 days

Cons : It doesnt add block or length to the snake like in the games, it just increases the speed, which can get really challenging

HTML file :

<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="snake.css" />
<script language="javascript" src="Jquery.min.js"></script>
</head>
<body>
<div class="main" tabindex="0">
<div class="mc">
	<div id="sc">
		<div id="sb-1"></div>
	</div>
</div>
<h3><span id="eb">0</span> Eaten balls</h3>
</div>
<h2 style="text-align: center; display: none">You lost</h2>
<button class="button">Play!</button>
<input id="mov">
<script language="javascript" src="snake.js"></script>
</body>
</html>

CSS file :

//styling
body {
	overflow: hidden;
	background-color: gray;
}
.main {
		background-color: gray;
}
.mc {
	height: 500px;
	width: 50%;
	margin: auto;
	position: relative;
	border: 5px solid red;
	background-color: black;
	z-index: 200;
}
#sc div {
	height: 20px;
	width: 20px;
	background-color: white;
	position: absolute;
	z-index: 1000;
	margin: 5px;
	left: 2px;
	top: 2px;
}
.button {
	position: fixed;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  cursor: pointer;
  outline: none;
  color: #fff;
  background-color: red;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #ffb3b3;
  left: 400px;
  top: 300px;
}

.button:hover {
	background-color: black;
    box-shadow: 0 9px gray;}

.button:active {
  background-color: black;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}
.food {
	height: 15px;
	width: 15px;
	border-radius: 50%;
	background-color: red;
	border: 1px solid white;
	position: fixed;
}
input {
	position: fixed;
	top: 9999px;
}

Japascript file (bit under 89 lines)

Spoiler


//snake.js BY TAT
$(document).ready(function() {
	var move,moc,moving,fc,sf,eb;
	let speed;
	fc = eb = 0;
	$(".main").css("opacity", 0.4);
	$('h2').hide("very slow");
	$(".button").click(function() {
		moving;
		speed = 100;
		$('h2').hide("very slow");
		window.setInterval(function() {$("#mov").focus();},50);
		$(".button").fadeOut("slow",function() {$(".main").css("opacity", 1);});
		//initiating game;
		sf = window.setInterval(spawn,3000);
		$("#mov").keydown(function(e) {
			moc = e.which;
			switch (moc){
			case 37: 
				move = "left";
				break;
			case 38: 
				move = "top";
				break;
			case 39: 
				move = "left";
				break;
			case 40: 
				move = "top";
				break;
				default:
				move = "right";
				break;
			}
			});
			// Movement
			moving = window.setInterval(Move,speed);
	});
	// Detecting if the div hit the walls 
	window.setInterval(function() {
		if ( $('#sc div').position().left <= 0 || $('#sc div').position().left >= 430  || $('#sc div').position().top <= 0 || $('#sc div').position().top >= 472  ) {
				lose();
			}
		},300);
		//|| if food has been eaten
		window.setInterval(function() {
			 $(".food").each(function() {
			if ($("#sc div").not(".food").position().left - $(this).position().left <= 10 && $("#sc div").not(".food").position().left - $(this).position().left >= -10 && $("#sc div").not(".food").position().top - $(this).position().top <= 10 && $("#sc div").not(".food").position().top - $(this).position().top >= -10  ) {
				eb++;
				$("#eb").text(eb);
			    $(this).hide(); 
				console.log(speed);
				speed -= eb *2;
				clearInterval(moving);
				moving = window.setInterval(Move,speed);
			} });
		},50);
	// Spawning food
	function spawn() {
		let rt = Math.floor(Math.random() * 450);
		let rl = Math.floor(Math.random() * 410);
		$("#sc").append('<div class="food" id="' + fc + ' " style="top: '+rt+'px; left: '+rl+'px"></div>');
		fc++;
	}
	// ending game
	function lose() {
		$('h2').show("Very slow",function() {$(".button").fadeIn("Very Slow");});
		$(".main").css("opacity",.4);
		window.clearInterval(moving);
		window.clearInterval(sf);
		$('#sc div').not(".food").css("left","2px").css("top", "2px");
		$(".food").each(function() {
			$(this).remove();
		});
		move="left";
		moc = 39;
		eb = 0;
		$("#eb").text("0");
		speed = 100;
	}
	function Move() {
				if (moc == 37 || moc == 38) {
					$("#sc div").not(".food").css(move,"-=5px");
			}
				else {
				    $("#sc div").not(".food").css(move,"+=5px"); 
			}
	}
});

You can try it here

July 6, 2016

in the main html file, i used .load("tictactoecomp.html"); it works in firefox, but it doesn't seem to work in chrome as it gives me this error :

Spoiler

Jquery.min.js:4 XMLHttpRequest cannot load file:///C:/Users/Badrf/Desktop/TicTacToe/tictactoecomp.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

July 5, 2016

I made this one in 2 days

still needs lots of fixing cause lots of bugs but meh

this is the main file, kinda like directory :3

Spoiler


<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="tictactoe.css">
<script type="text/javascript" src="Jquery.min.js"></script>
</head>
<body>
<div class="cont">
		<h1>Welcome to Tic Tac Toe!</h2>
		</br></br>
		<button type="submit" id="vshuman">Player vs Player</button>
		</br></br>
		<button type="submit" id="vscomp">Player vs Computer</button>
		<script language="javascript">
		$(document).ready(function() {
			$("#vscomp").click(function() {
			    $(".cont").load("tictactoecomp.html");
			});
			$('#vshuman').click(function() {
				$(".cont").load("tictactoeuser.html");
			});
		});
		</script>
</div>
		
</body>

This is the tictactouser HTML file

Spoiler


<ul>
		<li><div id="1"></div><div id="2"></div><div id="3"></div></li>
		</ul>
		<ul>
		<li><div id="4"></div><div id="5"></div><div id="6"></div></li>
		</ul>
		<ul>
		<li><div id="7"></div><div id="8"></div><div id="9"></div></li>
		</ul>
		<button id="wipe" type="submit">Reset</button>
		<script language="javascript" src="tictactoeuser.js"></script>

This is the tictactoecomp HTML file

Spoiler


		<ul>
		<li><div id="1"></div><div id="2"></div><div id="3"></div></li>
		</ul>
		<ul>
		<li><div id="4"></div><div id="5"></div><div id="6"></div></li>
		</ul>
		<ul>
		<li><div id="7"></div><div id="8"></div><div id="9"></div></li>
		</ul>
		<button id="wipe" type="submit">Reset</button>
		<script language="javascript" src="tictactoecomp.js"></script>

This is the tictactoe global CSS file

Spoiler


.cont {
	 height: 600px;
	 width: 98%;
	 margin: auto;
	 border: 6px solid black;
	 border-radius: 5px;
	 background-color: white;
	 padding: auto;
	 padding-top: 100px;
}
li { display: inline; }
div {
	display: inline-block;
	height: 50px;
	width: 50px;
	border: 2px solid black;
	text-align: center;
	padding: auto;
	
}
div:hover:not(.cont) {
	cursor: pointer;
}

TictacToe Computer javascript

Spoiler


//js
$(document).ready(function() {
	Array.prototype.remove = function(v) {
			this.splice(this.indexOf(v) == -1 ? this.length : this.indexOf(v), 1); 
	}
	var tries = 0;
	var hov = 1;
	var oi = 'url("file:///C:/Users/Badrf/Desktop/TicTacToe/o.jpeg")';
	var xi = 'url("file:///C:/Users/Badrf/Desktop/TicTacToe/x.jpeg")';
	var as = [1,2,3,4,5,6,7,8,9];
	// clicking
	$("div").not(".cont").click(function() {
		window.setInterval(check,300);
        if (tries % 2 == 0 && $(this).css("background-image") == "none") {
			$(this).css("background-image",oi);
			tries++;
			check();
			compChoice();
		}
		else if(tries % 2 != 0 && $(this).css("background-image") == "none") {
			$(this).css("background-image",xi);
			tries--;
		}
		//player 1 win
		if(($('#1').css('background-image') == oi && $('#2').css('background-image') == oi && $('#3').css('background-image') == oi) || ($('#4').css('background-image') == oi && $('#5').css('background-image') == oi && $('#6').css('background-image') == oi) ||($('#7').css('background-image') == oi && $('#8').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#1').css('background-image') == oi && $('#4').css('background-image') == oi && $('#7').css('background-image') == oi) || ($('#2').css('background-image') == oi && $('#5').css('background-image') == oi && $('#8').css('background-image') == oi) || ($('#3').css('background-image') == oi && $('#6').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#1').css('background-image') == oi && $('#5').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#3').css('background-image') == oi && $('#5').css('background-image') == oi && $('#7').css('background-image') == oi)) {
			alert("Player wins");
			$("#wipe").click();
		}
		//player 2
		else if(($('#1').css('background-image') == xi && $('#2').css('background-image') == xi && $('#3').css('background-image') == xi) || ($('#4').css('background-image') == xi && $('#5').css('background-image') == xi && $('#6').css('background-image') == xi) ||($('#7').css('background-image') == xi && $('#8').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#1').css('background-image') == xi && $('#4').css('background-image') == xi && $('#7').css('background-image') == xi) || ($('#2').css('background-image') == xi && $('#5').css('background-image') == xi && $('#8').css('background-image') == xi) || ($('#3').css('background-image') == xi && $('#6').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#1').css('background-image') == xi && $('#5').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#3').css('background-image') == xi && $('#5').css('background-image') == xi && $('#7').css('background-image') == xi)) {
			alert("Computer wins");
			$("#wipe").click();
		}
		else if (as.length == 0) {
			alert("Its a tie");
			$("#wipe").click();
		}
		
			});
		//restarting
			$("#wipe").click(function() {
				as = [1,2,3,4,5,6,7,8,9];
				tries = 0;
				for (var i = 0; i < 10; i++) {
					$("#"+i+"").css('background-image',"none");
				}
			});
	
	// checking the divs to find filled ones
	function check() {
		for (var i = 0; i < as.length; i++)  {
			if ($("#"+i+"").css('background-image') != "none") {
				as.remove(i);
			}
		}			
	}
	//vs computer
	function compChoice() {
		check();
		var ranc = as[Math.floor(Math.random() * as.length)];
		$('#'+ranc+'').click();
	}
});

And sorry for double post, this is the titactoe uservsuser js

Spoiler


//js
$(document).ready(function() {
	Array.prototype.remove = function(v) {
			this.splice(this.indexOf(v) == -1 ? this.length : this.indexOf(v), 1); 
	}
	var tries = 0;
	var hov = 1;
	var oi = 'url("file:///C:/Users/Badrf/Desktop/TicTacToe/o.jpeg")';
	var xi = 'url("file:///C:/Users/Badrf/Desktop/TicTacToe/x.jpeg")';
	var as = [1,2,3,4,5,6,7,8,9];
	// clicking
	$("div").not(".cont").click(function() {
		window.setInterval(check,300);
        if (tries % 2 == 0 && $(this).css("background-image") == "none") {
			$(this).css("background-image",oi);
			tries++;
		}
		else if(tries % 2 != 0 && $(this).css("background-image") == "none") {
			$(this).css("background-image",xi);
			tries--;
		}
		//player 1 win
		if(($('#1').css('background-image') == oi && $('#2').css('background-image') == oi && $('#3').css('background-image') == oi) || ($('#4').css('background-image') == oi && $('#5').css('background-image') == oi && $('#6').css('background-image') == oi) ||($('#7').css('background-image') == oi && $('#8').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#1').css('background-image') == oi && $('#4').css('background-image') == oi && $('#7').css('background-image') == oi) || ($('#2').css('background-image') == oi && $('#5').css('background-image') == oi && $('#8').css('background-image') == oi) || ($('#3').css('background-image') == oi && $('#6').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#1').css('background-image') == oi && $('#5').css('background-image') == oi && $('#9').css('background-image') == oi) || ($('#3').css('background-image') == oi && $('#5').css('background-image') == oi && $('#7').css('background-image') == oi)) {
			alert("Player 1 wins");
			$("#wipe").click();
		}
		//player 2
		else if(($('#1').css('background-image') == xi && $('#2').css('background-image') == xi && $('#3').css('background-image') == xi) || ($('#4').css('background-image') == xi && $('#5').css('background-image') == xi && $('#6').css('background-image') == xi) ||($('#7').css('background-image') == xi && $('#8').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#1').css('background-image') == xi && $('#4').css('background-image') == xi && $('#7').css('background-image') == xi) || ($('#2').css('background-image') == xi && $('#5').css('background-image') == xi && $('#8').css('background-image') == xi) || ($('#3').css('background-image') == xi && $('#6').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#1').css('background-image') == xi && $('#5').css('background-image') == xi && $('#9').css('background-image') == xi) || ($('#3').css('background-image') == xi && $('#5').css('background-image') == xi && $('#7').css('background-image') == xi)) {
			alert("player 2 wins");
			$("#wipe").click();
		}
		else if (as.length == 0) {
			alert("Its a tie");
			$("#wipe").click();
		}
		
			});
	function check() {
		for (var i = 0; i < as.length; i++)  {
			if ($("#"+i+"").css('background-image') != "none") {
				as.remove(i);
			}
		}			
	}
		//restarting
			$("#wipe").click(function() {
				as = [1,2,3,4,5,6,7,8,9];
				tries = 0;
				for (var i = 0; i < 10; i++) {
					$("#"+i+"").css('background-image',"none");
				}
			});
});

KEEP in mind this will not work in chrome

June 1, 2016

Hello, whenever i get bored, i decide to make a minigame, here is a preview of one i made with some HTML/CSS and jquery :

HTML file :

<!DOCTYPE html>
<html>
<head>
<title>Minigame :3</title>
<link rel="stylesheet" type="text/css" href="css1.css">
<script src="Jquery.min.js"></script>
</head>
<body>
<p>Keep clicking randomize until you get a special prize! :D</p>
<table cellspacing="15">
<tr>
<td><div id="1"></div></td>
<td><div id="2"></div></td>
</tr>
<tr>
<td><div id="3"></div></td>
<td><div id="4"></div></td>
</tr>
<table>
<ul>
<li><div id="butt" value="Randomize!">Randomize!</div></li></br></br>
<li><div id="win">You win</div></li>
<ul>

<script type="text/javascript" src="bot.js"></script>
</body>

Css file :

table {
	border: none;
	padding: 10px;
}
tr {
	display: inline-block;
}
div {
	height: 150px;
	width: 150px;
	background-color: grey;
	border-radius: 7px;
}
ul {
	list-style-type: none;
}
#butt {
	height: 30px;
	width: 100px;
	background-color: blue;
	color: white;
	padding: 5px;
}
#butt:hover {
	cursor: pointer;
}
#win {	
	height:  30px;
	width: 60px;
	background-color: green;
	color: white;
	padding: 5px;
	margin-right: 200px;
}

Jquery file :

$(document).ready(function() {
	$('#win').hide();
	var colors = ["blue","red","yellow","green"];

	$("#butt").click(function() {
		$("#1").css("background-color", colors[Math.floor(Math.random()*4)]);
		$("#2").css("background-color", colors[Math.floor(Math.random()*4)]);
		$("#3").css("background-color", colors[Math.floor(Math.random()*4)]);
		$("#4").css("background-color", colors[Math.floor(Math.random()*4)]);
	
	if (!($('#1').css('background-color') == $('#2').css('background-color')
	&& $('#1').css('background-color') == $('#3').css('background-color')
	&& $('#1').css('background-color') == $('#4').css('background-color'))) {
	}
	else {
		$('#win').show("slow");
		$("#butt").hide();
	}
	
	});
});

Paste each one of these files in seperate notepads (would be easier if you had notepad++) and open the HTML file only in chrome (or your browser)

May 31, 2016

why not just use rand()?

Guess the user above's age. · May 31, 2016

9

April 17, 2016

420/10

4rel

April 15, 2016

69/10

March 3, 2016

it was the men's old friend

but his old friend was dead, the man didn't understand!

February 27, 2016

Hello and welcome to bugs diretory, Here, You will be able to find all bugs posted in the bugs section. If you already see someone posted the same bug as you, Don't post it again.

post that aren't really bugs won't be posted in here.

This will be seperated to two part, Solved and unsolved!

Unsolved

Solved!

~~Ability to edit trade threads.~~
~~Male combee evolving~~
~~Error while changing attacks.~~
~~Dex number mix (Hoopa and volcanion)~~
~~Trade offers counter glitch.~~
~~Duplicate attacks on Aggron.~~

February 25, 2016

But fart jokes are not fine

back to the mature storyline

the owners found a nice lady

who looked a bit shady

and smelled like a kipper

she worked as a stripper

February 25, 2016

and then the plot twist appeared

and that was what evryone feared

the man with the evil plan

wasn't really a man

it was a killer whale

who had a ponytail

February 25, 2016

The sharked swallowed it and Died

Because the Bark had Cyanide

February 21, 2016

Hello, and welcome to Pokemon Vortex's suggestions directory, Before making any suggestion, make sure that you follow the following rules :

It must not break any forum rules. (Please read forum rules if you are new to these forums)
It must not be already posted (Check the threads already posted below and make sure your suggestion isn't matching)

Already suggested ideas

If you make a suggestion that i forgot to add, Please Send me a pm and i'll add it in here.

Thread approved by Rob

Sign In

TAT

Posts

Joined

Last visited

Content Type

Profiles

Forums

Store

Posts posted by TAT

Pokemon Vortex Mystery Box Giveaway!

Open Source Pokemon RPG

Vortex Wizarding World

Javascript Challenges

Javascript Challenges

Javascript Challenges

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

Captcha

New map - Island

Serapheon's Render Finding Shop

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

TAT's minigames W/ p5.js (Ep5 : 2d arcade shooting minigame)

PHP 7 - Dice rolling mini-game

Guess the user above's age.

Display Pic Score

Display Pic Score

A Rhyming Story

Bugs Directory.

A Rhyming Story

A Rhyming Story

A Rhyming Story

[Directory] Make sure you read this before posting!

Browse

Activity

Store