Here is my HTML code:
<!DOCTYPE html>
<html>
<body>
<canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</canvas>
<script src="pro checkers.js"></script>
</body>
</html>
Here is my JavaScript code:
class Board {
var ct = document.getElementById("myCanvas");
var c = ct.getContext("2d");
function Draw_board()
{
c.fillStyle = "rgb(220,220,220)";
c.fillRect(0,0,600,600);
c.fillStyle = "rgb(50,50,50)";
for (i=0;i<4;i++)
{
for (j=0;j<4;j++)
{
c.fillRect(i*150,j*150,75,75);
}
}
for (i=0;i<4;i++)
{
for (j=0;j<4;j++)
{
c.fillRect(i*150+75,j*150+75,75,75);
}
}
}
}
class Pices {
Update();
var Pices = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
var Face_pices = ["","","","","","","","","","","","","","","","","","","","","","","","","","","","","","","",""];
function Update()
{
Draw_board();
Draw_pices();
}
function Draw_pices()
{
c.beginPath();
c.arc(95,50,40,0,2*Math.PI);
c.stroke();
}
}
The error is where the canvas is defined in javascript here:
var ct = document.getElementById("myCanvas");
var c = ct.getContext("2d");
It says:
pro checkers.js:2 Uncaught SyntaxError: Unexpected identifier
I am trying to make a checkers engine and this is the start but it is not working what is wrong?
Thanks!
Related
I found some code which will scale some text when the browser window is resized and it seems to work well.
Here is the code:
document.body.setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.body.setScaledFont(0.35);
window.onresize = function () {
document.body.setScaledFont(0.35);
}
My question is:
How can I modify this code so the text scales when a specified div is scaled instead?
Updated code from suggested answer by #Deano. This code scales only when the browser is resized.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#window {
border:1px dashed #ccc;
overflow: hidden;
resize: both;
text-align: center;
}
</style>
</head>
<body>
<div id="window">Scale the window</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('#window').mouseup( function() {
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
});
});
</script>
</body>
</html>
document.body targets the entire body, if you want to target a specific element, use Id or class.
document.getElementById('window').setScaledFont = function (f) {
var s = this.offsetWidth,
fs = s * f;
this.style.fontSize = fs + '%';
return this
};
document.getElementById('window').setScaledFont(0.35);
window.onresize = function () {
document.getElementById('window').setScaledFont(0.35);
}
div {
font-size:2em;
}
<div id="window">Scale the window</div>
JSfiddle
Update Since the question requirement has changed :-/
You will need to use a libary like mimetic.js DEMO
I am trying to clone several svgs from the same data, but when I apply a colour to one of them it also applies to the others as well. I'm not sure I am cloning the svg correctly. Here is my code:
var canvas = new fabric.Canvas('canvas');
var svgObject = null;
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) {
svgObject = fabric.util.groupSVGElements(objects, options);
var object1 = fabric.util.object.clone(svgObject);
colourSVG(object1, "rgb(0,0,0)", "rgba(151,0,0,1)");
canvas.add(object1);
var object2 = fabric.util.object.clone(svgObject);
object2.top = 200;
canvas.add(object2).renderAll();
});
function colourSVG(_obj, _keyColourString, _fillColourString){
if (!_obj.paths) {
_obj.setFill(_fillColourString);
}
else if (_obj.paths) {
for (var i = 0; i < _obj.paths.length; i++) {
if(_obj.paths[i].fill === _keyColourString){
_obj.paths[i].setFill(_fillColourString);
console.log("colour found");
}
else{
console.log(_obj.paths[i].fill);
}
}
}
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="800" height="500" ></canvas>
I think you were just cloning the objects incorrectly.
var canvas = new fabric.Canvas('canvas');
var svgObject = null;
fabric.loadSVGFromURL("http://fabricjs.com/assets/131.svg", function(objects, options) {
svgObject = fabric.util.groupSVGElements(objects, options);
svgObject.clone(function(o) {
colourSVG(o, "rgb(0,0,0)", "rgba(151,0,0,1)");
canvas.add(o);
});
svgObject.clone(function(o) {
o.top = 200;
canvas.add(o);
});
canvas.renderAll();
});
function colourSVG(_obj, _keyColourString, _fillColourString) {
if (!_obj.paths) {
_obj.setFill(_fillColourString);
} else if (_obj.paths) {
for (var i = 0; i < _obj.paths.length; i++) {
if (_obj.paths[i].fill === _keyColourString) {
_obj.paths[i].setFill(_fillColourString);
console.log("colour found");
} else {
console.log(_obj);
console.log(_obj.paths[i].fill);
}
}
}
}
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script>
<canvas id="canvas" width="800" height="500"></canvas>
I have a block of code as the following
<body id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
</script>
</body>
This line theLeftSide.lastChild.onclickwill throw an error, saying that "cannot set property 'onclick' of null", because at the time javascript engine scans through it, it hasn't has any child yet. This problem can be solved by putting this code inside $(document).ready, I know.
However, I also tried IIFE, which means that wrapping all those code inside
(function(){
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
})()
and also see that the problem is fixed, but cannot figure out why. Any one can explain me ?
Here's the full original code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>part4</title>
<style>
div{
position:absolute;
}
#left_side{
width:500px; height: 500px; border-right:#000 thin inset;
float: left;
}
#right_side{
width:500px; height: 500px;
float:left; left:500px;
}
img{
position: absolute;
}
body{
margin:0px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body onload="generateFace()" id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
var e = event;
var theBody= document.getElementById("main");
var post_left =0;
var post_top=0;
var quan = 4;
function generateFace(){
var i =0;
for(i=0; i<= quan; i++){
var img = document.createElement("img");
img.src="smile.png"; post_top=getRandom(); post_left=getRandom();
img.style.top = post_top + "px";
img.style.left = post_left +"px";
theRightSide.appendChild(img);
var clone = img.cloneNode(true);
theLeftSide.appendChild(clone);
}
//var clone = theRightSide.cloneNode(true);
//theLeftSide.appendChild(clone);
var extra = document.createElement("img");
extra.src="smile.png"; post_top=getRandom(); post_left=getRandom();
extra.style.top = post_top + "px";
extra.style.left = post_left +"px";
theLeftSide.appendChild(extra);
};
function getRandom(){
var i = Math.random() * 400 +1;
return Math.floor(i);
};
function dele(){
while(theLeftSide.firstChild != null){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild != null){
theRightSide.removeChild(theRightSide.firstChild);
}
};
theBody.onclick = function gameOver() {
alert("Game Over!");
dele();
theBody.onclick = null;
theLeftSide.lastChild.onclick = null;
};
function nextLevel(event){
event.stopPropagation();
quan+=5;
delse();
generateFace();
}
</script>
</body>
</html>
and with IIFE:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>part4</title>
<style>
div{
position:absolute;
}
#left_side{
width:500px; height: 500px; border-right:#000 thin inset;
float: left;
}
#right_side{
width:500px; height: 500px;
float:left; left:500px;
}
img{
position: absolute;
}
body{
margin:0px;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
</head>
<body id="main">
<h1>Matching Game</h1>
<p>Click on the extra smile face on the left</p>
<div id="left_side"></div>
<div id="right_side"></div>
<script>
(function(){
var theLeftSide = document.getElementById("left_side");
var theRightSide = document.getElementById("right_side");
var e = event;
var theBody= document.getElementById("main");
var post_left =0;
var post_top=0;
var quan = 4;
generateFace();
function generateFace(){
var i =0;
for(i=0; i<= quan; i++){
var img = document.createElement("img");
img.src="smile.png"; post_top=getRandom(); post_left=getRandom();
img.style.top = post_top + "px";
img.style.left = post_left +"px";
theRightSide.appendChild(img);
var clone = img.cloneNode(true);
theLeftSide.appendChild(clone);
}
//var clone = theRightSide.cloneNode(true);
//theLeftSide.appendChild(clone);
var extra = document.createElement("img");
extra.src="smile.png"; post_top=getRandom(); post_left=getRandom();
extra.style.top = post_top + "px";
extra.style.left = post_left +"px";
theLeftSide.appendChild(extra);
};
function getRandom(){
var i = Math.random() * 400 +1;
return Math.floor(i);
};
function dele(){
while(theLeftSide.firstChild != null){
theLeftSide.removeChild(theLeftSide.firstChild);
}
while(theRightSide.firstChild != null){
theRightSide.removeChild(theRightSide.firstChild);
}
};
theBody.onclick = function gameOver() {
alert("Game Over!");
dele();
//theBody.onclick = undefined;
//theLeftSide.lastChild.onclick = undefined;
};
theLeftSide.lastChild.onclick = function nextLevel(event){
event.stopPropagation();
quan+=5;
dele();
generateFace();
}
})();
</script>
</body>
</html>
In the original piece of code, generateFace() is called on page load. In the second piece of code, generateFace() is called directly. There is no relation with the IIFE. Please forget it! :-P Here is a simplified version of what you are doing in each case (open your browser console before running the snippets):
Original code (throws a TypeError)
console.log('attempting to initialize onclick');
document.getElementById('clickable').onclick = function () {
alert(this.id);
};
console.log('onclick initialized successfully');
function gendiv () {
console.log('gendiv was called');
document.body.innerHTML = '<div id="clickable">click me</div>';
}
<body onload="gendiv()"></body>
Modified code
gendiv();
console.log('trying to initialize onclick');
document.getElementById('clickable').onclick = function () {
alert(this.id);
};
console.log('onclick initialized successfully');
function gendiv () {
console.log('gendiv was called');
document.body.innerHTML = '<div id="clickable">click me</div>';
}
<body></body>
I'm attempting to draw boxes onto a canvas using JavaScript; my code works, but I'm having trouble with my arrays. Say I have a multi-demensional array called map and it is declared like so:
var map = [
[0,1,1],
[0,0,1],
[0,1,1],
];
Where 1 is a box and 0 is blank space, but when I run my code the output looks like the following:
0,0,0
1,0,1
1,1,1
Is there any way to fix this so the output matches map? My code looks like this:
var canvas = null;
var ctx = null;
var x,y,count,inc,ax,ay;
var map = [
[0,0,0],
[1,0,1],
[1,1,1],
];
window.onload = function () {
canvas = document.getElementById("gameArea");
ctx = canvas.getContext("2d");
y=0;
x=0;
ax=0;
ay=0;
count=0;
inc=0;
for(;count<3;count++){
if(count>0){
inc = inc + 40;
console.log("inc:"+inc);
console.log();
}
ay=count;
console.log("ay:"+ay);
console.log();
y = y + inc;
console.log("y:"+y);
console.log();
for(;ax<3;x=x+40,ax++){
if(map[ax][ay]==1){
console.log(ax+","+ay)
console.log(map[ax][ay]);
console.log();
ctx.strokeRect(x,y,40,40);
console.log("block:"+x+","+y);
}
}
console.log();
x=0;
y=0;
ax=0;
}
};
And the HTML is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Single Stage</title>
<script src="js/game.js" type="text/javascript">
</script>
<style type="text/css">
#gameArea{
display:block;
margin:0 auto;
background-color:#FFFFFF;
border: 1px solid black;
}
</style>
</head>
<body>
<canvas id="gameArea" width='800' height='480'></canvas>
</body>
</html>
You've just mixed up your rows and columns
try switching map[ax][ay]==1 to map[ay][ax]==1
As i was going through canvas tutorial, i am getting error:" Point is not defined" and My actual output differs from expected output.Iam not able to drag the circle with mouse.
ReferenceError: Point is not defined in logic.js
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Drawing Circles in Canvas</title>
<link rel="stylesheet" href="css/style.css"/>
</head>
<body width="100%" height="100%">
<header>
<h1>Drawing in Canvas</h1>
</header>
<canvas id="game" width="768" height="400">
Sorry, your web browser does not support
Canvas content.
</canvas>
<script src="js/jquery-1.10.2.min.js">
</script>
<script src="js/logic.js"></script>
</body>
</html>
logic.js
var untangleGame={
circle: [],
thinLineThickness: 1,
lines: []
};
function Circle(x,y,radius){
this.x=x;
this.y=y;
this.radius=radius;
}
function Line(startPoint,endPoint,thickness){
this.startPoint=startPoint;
this.endPoint=endPoint;
this.thickness=thickness;
}
function drawcircle(ctx,x,y,radius){
ctx.fillStyle="rgba(200,200,100,.9)";
ctx.beginPath();
ctx.arc(x,y,radius,0,Math.PI*2,true);
ctx.closePath();
ctx.fill();
}
function connectCircles(){
for(var i=0;i<untangleGame.circle.length;i++){
var startPoint=untangleGame.circle[i];
for(var j=0;j<i;j++){
var endPoint=untangleGame.circle[j];
untangleGame.lines.push(new
Line(startPoint,endPoint,untangleGame.thinLineThickness));
}
}
}
function drawLine(ctx,x1,y1,x2,y2,thickness){
ctx.beginPath();
ctx.moveTo(x1,y1);
ctx.lineTo(x2,y2);
ctx.lineWidth=thickness;
ctx.strokeStyle="#cfc";
ctx.stroke();
}
function clear(ctx){
ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
}
$(function(){
var canvas=document.getElementById('game');
var ctx=canvas.getContext('2d');
var circleRadius=10;
var width=canvas.width;
var height=canvas.height;
var circlesCount=5;
for(var i=0;i<circlesCount;i++){
var x=Math.random()*width;
var y=Math.random()*height;
drawcircle(ctx,x,y,circleRadius);
untangleGame.circle.push(new Circle(x,y,circleRadius));
}
connectCircles();
$("#game").mousedown(function(e){
var canvasPosition=$(this).offset();
var mouseX=e.layerX || 0;
var mouseY=e.layerY || 0;
for(var i=0;i<untangleGame.circle.length;i++){
var circleX=untangleGame.circle[i].x;
var circleY=untangleGame.circle[i].y;
var radius=untangleGame.circle[i].radius;
if(Math.pow(mouseX-circleX,2)+Math.pow(mouseY-circleY,2)
<Math.pow(radius,2)){
untangleGame.targetCircle=i;
break;
}
}
});
$("#game").mousemove(function(e){
if(untangleGame.targetCircle != undefined){
var canvasPosition=$(this).offset();
var mouseX=e.layerX || 0;
var mouseY=e.layerY || 0;
var
radius=untangleGame.circle[untangleGame.targetCircle].radius;
untangleGame.circle[untangleGame.targetCircle]=new
Circle(mouseX,mouseY,radius);
}
connectCircles();
});
$("#game").mouseup(function(e){
untangleGame.targetCircle=undefined;
});
setInterval(gameloop,30);
});
function gameloop(){
var canvas=document.getElementById('game');
var ctx=canvas.getContext('2d');
clear(ctx);
for(var i=0;i<untangleGame.lines.length;i++){
var line=untangleGame.lines[i];
var startPoint=line.startPoint;
var endPoint=line.endPoint;
var thickness=line.thickness;
drawLine(ctx,startPoint.x,startPoint.y,endPoint.x,endPoint.y,thickness);
}
for(var i=0;i<untangleGame.circle.length;i++){
var circle=untangleGame.circle[i];
drawcircle(ctx,point.x,point.y,circle.radius);
}
}
style.css
canvas{
background: #333;
}
Output Expected:
Output expected of Image link O/p Expected link
Looks like you are using point instead of circle in the for loop in gameloop
for (var i = 0; i < untangleGame.circle.length; i++) {
var circle = untangleGame.circle[i];
drawcircle(ctx, circle.x, circle.y, circle.radius);
}
Demo: Fiddle