Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
- - - - -

Include a specific error, task, problem, or question in your title

javascript svg

This topic has been archived. This means that you cannot reply to this topic.
1 reply to this topic

#1 AdamPodhrzsk

AdamPodhrzsk

    CC Lurker

  • Just Joined
  • Pip
  • 2 posts

Posted 29 May 2016 - 06:30 AM

I've made this code for Tic-Tac-Toe game using HTML canvas, but now I need to do it using SVG instead of canvas.I need to (if its possible)replace that 9 canvases with (9) SVG,so I can use same (or very similar) JS code. I just need to create 9 SVG's and draw that path (X or O) into them. Do you have any tips how to do it? I think I just need to change the function that select's canvas(now SVG) and function that draws paths into them.

!DOCTYPE HTML>
<html>
	<head>
		<script type="text/javascript">
var filled;
var symbol_type;
var VyherniKomb;
var turn = 0;
var targetCanvas;
var c;
var cxt;
var filledField = 0;
var w;
var y;
window.onload=function(){
	
	filled = new Array();
	symbol_type = new Array();
	VyherniKomb = [[0,1,2],[3,4,5],[6,7,8],[0,3,6],[1,4,7],[2,5,8],[0,4,8],[2,4,6]];

	for(var m = 0; m <= 8; m++){
	filled[m] = false;
	symbol_type[m]='';
	}
}
function canvasEvent(canvasNumber){
	targetCanvas = "canvas"+canvasNumber;
	c = document.getElementById(targetCanvas);
	

	if(filled[canvasNumber-1] ==false){
		if(turn%2==0){
			cxt.beginPath();
			cxt.moveTo(10,10);
			cxt.lineTo(40,40);
			cxt.moveTo(40,10);
			cxt.lineTo(10,40);
			cxt.stroke();
			cxt.closePath();
			symbol_type[canvasNumber-1] = 'X';
		}

		else{
			cxt.beginPath();
			cxt.arc(25,25,20,0,Math.PI*2,true);
			cxt.stroke();
			cxt.closePath();
			symbol_type[canvasNumber-1] = 'O';
		}

		turn++;
		filled[canvasNumber-1] = true;
	  filledField++;
		checkForWinners(symbol_type[canvasNumber-1]);

		if(filledField==9){
			alert("Remíza");
			location.reload(true);
		}
	
	}
	else{
	}

}
function checkForWinners(symbol){
	
	for(var a = 0; a < VyherniKomb.length; a++){
	if(symbol_type[VyherniKomb[a][0]]==symbol&&symbol_type[VyherniKomb[a][1]]==	symbol&&symbol_type[VyherniKomb[a][2]]==symbol){
		alert(symbol+ " Vyhral");
		newGame();
	}
	}

}

function newGame(){
	y=confirm("hrát znovu?");
	if(y==true){
		alert("Start!");
		location.reload(true);
	}
	else{
		alert("Hezký den");
}

}
	</script>
	</head>
    <body> 
    <h1>Hra</h1><h2>Tic-Tac-Toe</h2>
  <svg id = "canvas1"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(1)"></svg>
  <svg id = "canvas2"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(2)"></svg>
  <svg id = "canvas3"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(3)"></svg><br/>
  <svg id = "canvas4"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(4)"></svg>
  <svg id = "canvas5"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(5)"></svg>
  <svg id = "canvas6"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(6)"></svg></br>
  <svg id = "canvas7"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(7)"></svg>
<svg id = "canvas8"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(8)"></svg>
<svg id = "canvas9"  width="50" height="50" style="border:3px solid red" onclick="canvasEvent(9)"></svg>
</body>
</html>


#2 lespauled

lespauled

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1360 posts

Posted 03 June 2016 - 07:17 AM

Maybe fixing (or creating) the title would help people find this thread.   


My Blog: http://forum.codecal...699-blog-77241/
"Women and Music: I'm always amazed by other people's choices." - David Lee Roth