I'm trying to create a two-dimensional board game with canvas for practice.
The goal is to have a game with only html, javascript and php.
I made a first canvas which takes up the entire board.
Currently my second canvas, contains a round pawn which moves as well as a clipping done with the clip () method.
My problem concerns the second canvas. I would like to be able to ensure that my clipping follows the position of the pawn.
But I can't move the clipping so it stays in the same place causing my pawn to appear and then disappear.
Could you tell me how to move this clipping please?
Thank you in advance.
const goUp = 1;
const goDown = 2;
const goLeft = 3;
const goRight = 4;
var canvas = document.getElementById("pawn");
var ctx = canvas.getContext("2d");
var largeurProprietee = 60;
var hauteurProprietee = 90;
x = 45 + 90 + (8 * 60) + 90;
y = 30;
orientation = 1;
pawnHeight = 40;
pawnWidth = 40;
function drawPawn() {
var image = new Image();
image.src = 'img/' + 'zelda' + '/' + 'vert' + '.png'; //adresse de l'image
image.onload = function() {
ctx.drawImage(this, y, x, pawnHeight, pawnWidth);
}
}
function shifting() {
erasePrevious();
cutOut();
drawPawn();
x--;
}
function erasePrevious() {
var previousX;
var previousY;
if (orientation == 1) {
previousX = x;
previousY = y;
ctx.clearRect(previousY, previousX, pawnHeight, pawnWidth);
}
}
function cutOut() {
var rayon = (pawnHeight / 2);
var clipX = (x + rayon);
var clipY = (y + rayon);
ctx.beginPath();
ctx.arc(clipY, clipX, rayon, 0, Math.PI * 2);
ctx.clip();
}
setInterval(shifting, 10);
Related
How to set on click event in moving object in canvas? Also how to move the object bottom to top in canvas.I am newly in javascript i am going to develop the sample like when the page open, objects like square and circle randomly come from bottom of the page and move to top automatically.
You need to establish an array that will have your moving objects in it. When the onclick handler fires, check to see if the coordinates of the click are inside any of the objects in the array.
On each animation frame, move your objects up by subtracting some of the y coordinate from each object.
//width and height of canvas...
var rW = 400;
var rH = 500;
var coinImage = getCoinImage();
var coinsOnScreen = [];
var risingSpeed = 100; //pixels per second...
var coinSize = 75;
var lastAnimationTime = 0;
var howLongUntilNextCoin = 1000;
var nextCoinOnScreen = 0;
function doDraw() {
var can = document.getElementById("myCanvas");
can.width = rW;
can.height = rH;
var context = can.getContext("2d");
//Erase the canvas
context.fillStyle = "#FFFFFF";
context.fillRect(0, 0, rW, rH);
if (new Date().getTime() - nextCoinOnScreen > 0) {
var newX = Math.floor(Math.random() * rW) + 1;
var newY = rH + 50;
var newCoin = {
x: newX,
y: newY
};
coinsOnScreen.push(newCoin);
nextCoinOnScreen = new Date().getTime() + howLongUntilNextCoin;
}
//Now draw the coins
if (lastAnimationTime != 0) {
var deltaTime = new Date().getTime() - lastAnimationTime;
var coinRisePixels = Math.floor((deltaTime * risingSpeed) / 1000);
var survivingCoins = [];
for (var i = 0; i < coinsOnScreen.length; i++) {
var coin = coinsOnScreen[i];
coin.y = coin.y - coinRisePixels;
//the stl variable controlls the alpha of the image
if (coin.y + 50 > 0) {
context.drawImage(coinImage, coin.x, coin.y);
//this coin is still on the screen, so promote it to the new array...
survivingCoins.push(coin);
}
}
coinsOnScreen = survivingCoins;
}
lastAnimationTime = new Date().getTime();
//Wait, and then call this function again to animate:
setTimeout(function() {
doDraw();
}, 30);
}
function setupClickHandler() {
var can = document.getElementById("myCanvas");
//Here is the onclick handler
can.onclick = function(e) {
var x = e.clientX;
var y = e.clientY;
var survivingCoins = [];
for (var i = 0; i < coinsOnScreen.length; i++) {
var coin = coinsOnScreen[i];
//check to see if this coin has been clicked...
if (x > coin.x && x < coin.x + coinSize && y > coin.y && y < coin.y + coinSize) {
//ths coin will disappear because it is not inserted into the new array...
console.log("Coin was clicked!! " + x + " " + y);
} else {
survivingCoins.push(coin);
}
}
coinsOnScreen = survivingCoins;
};
}
doDraw();
setupClickHandler();
function getCoinImage() {
var image = new Image(50, 50);
image.src = "data:image/png;base64,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";
return image;
}
<canvas id="myCanvas"></canvas>
I made this (run snippet below)
var Canvas = document.getElementById('c');
var ctx = Canvas.getContext('2d');
var resize = function() {
Canvas.width = Canvas.clientWidth;
Canvas.height = Canvas.clientHeight;
};
window.addEventListener('resize', resize);
resize();
var elements = [];
var presets = {};
presets.shard = function (x, y, s, random, color) {
return {
x: x,
y: y,
draw: function(ctx, t) {
this.x += 0;
this.y += 0;
var posX = this.x + + Math.sin((50 + x + (t / 10)) / 100) * 5;
var posy = this.y + + Math.sin((55 + x + (t / 10)) / 100) * 7;
ctx.beginPath();
ctx.fillStyle = color;
ctx.moveTo(posX, posy);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+random,posy+random);
ctx.lineTo(posX+0,posy+50);
ctx.closePath();
ctx.fill();
}
}
};
for(var x = 0; x < Canvas.width; x++) {
for(var y = 0; y < Canvas.height; y++) {
if(Math.round(Math.random() * 60000) == 1) {
var s = ((Math.random() * 5) + 1) / 10;
if(Math.round(Math.random()) == 1){
var random = Math.floor(Math.random() * 100) + 10;
var colorRanges = ['#8c8886', '#9c9995'];
var color = colorRanges[Math.floor(Math.random() * colorRanges.length)];
elements.push(presets.shard(x, y, s, random, color));
}
}
}
}
setInterval(function() {
ctx.clearRect(0, 0, Canvas.width, Canvas.height);
var time = new Date().getTime();
for (var e in elements)
elements[e].draw(ctx, time);
}, 10);
<canvas id="c" width="1000" height="1000"\>
I just need to add one feature to be able to use it on the site I'm building it for. Some of the floating shards need to be blurred to give a sense of depth.
Can Canvas do this, and if so, how?
context.filter = 'blur(10px)';
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/filter
I used this few months ago, maybe it could work for you as well :
var canvas = document.getElementById("heroCanvas");
var canvasContext = canvas.getContext("2d");
var canvasBackground = new Image();
canvasBackground.src = "image.jpg";
var drawBlur = function() {
// Store the width and height of the canvas for below
var w = canvas.width;
var h = canvas.height;
// This draws the image we just loaded to our canvas
canvasContext.drawImage(canvasBackground, 0, 0, w, h);
// This blurs the contents of the entire canvas
stackBlurCanvasRGBA("heroCanvas", 0, 0, w, h, 100);
}
canvasBackground.onload = function() {
drawBlur();
}
Here the source : http://zurb.com/playground/image-blur-texture
After trying many different things I have finally gotten a cursor to resize upon entry of a canvas but can't figure out how to save the color.
My mouse is based off of this demo: http://jsfiddle.net/AbdiasSoftware/XcjX9/
function loop() {
var color = 'rgb(' + ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ','
+ ((255 * Math.random())|0) + ')';
makeCursor(color);
setTimeout(loop, 1000);
}
function makeCursor(color) {
var cursor = document.createElement('canvas'),
ctx = cursor.getContext('2d');
cursor.width = 16;
cursor.height = 16;
ctx.strokeStyle = color;
ctx.lineWidth = 4;
ctx.lineCap = 'round';
ctx.moveTo(2, 12);
ctx.lineTo(2, 2);
ctx.lineTo(12, 2);
ctx.moveTo(2, 2);
ctx.lineTo(30, 30)
ctx.stroke();
document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
Here is my current code: http://jsfiddle.net/Vw4yD/
function init(){
var elem = document.getElementById('myCanvas'),
elemLeft = elem.offsetLeft,
elemTop = elem.offsetTop,
context = elem.getContext('2d'),
elements = [];
//Spawn mouse on canvas enter.
elem.addEventListener('mouseover', function() {
makeCursor();
});
//Destroy mouse on canvas exit.
elem.addEventListener('mouseout', function() {
document.body.style.cursor = 'auto';
});
// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
var x = event.pageX - elemLeft,
y = event.pageY - elemTop;
var brushHeight = document.getElementById('brushHeight').value;
var brushWidth = document.getElementById('brushWidth').value;
var brushColor = document.getElementById('brushColor').value;
// Render elements.
elements.forEach(function(element) {
//Listen for controls.
context.fillStyle = brushColor;
context.fillRect(x, y, brushWidth, brushHeight);
});
// Add element.
elements.push({
colour: brushColor,
width: brushWidth,
height: brushHeight,
});
}, false);
//Draw Mouse.
function makeCursor() {
var cursor = document.createElement('canvas'),
cursorctx = cursor.getContext('2d');
var x = event.pageX - elemLeft,
y = event.pageY - elemTop;
var cursorLeft = cursor.offsetLeft;
cursorRight = cursor.offsetTop;
var brushHeight = document.getElementById('brushHeight').value;
var brushWidth = document.getElementById('brushWidth').value;
var brushColor = document.getElementById('brushColor').value;
cursor.width = brushWidth;
cursor.height = brushHeight;
cursorctx.fillStyle = brushColor;
cursorctx.fillRect(x, y, brushWidth, brushHeight);
cursorctx.fill();
document.body.style.cursor = 'url(' + cursor.toDataURL() + '), auto';
}
};
The mouse is supposed to resize (which it does) and change color when entering the canvas, is there anyway you guys know of to get this to work? It has me stumped, I've worked on it for about a full day now and can't find anyway of doing it using rectangles, stroking works but is too complicated for the basic stuff I need done. Sorry if this post is poorly written, I've had very little sleep in the past day.
Here you go http://jsfiddle.net/Vw4yD/1/
I've removed the x and y for the cursor. They should be equal to 0, because it's relative to the cursor canvas, not the main canvas.
Hello I am trying to write a simple program for fun.. But I am not able to get the angle of rotation and convert it into the number where the needle lands after it follows the crusor.I am letting the needle follow inside the dial. I am including my javascript code. Can anybody help me please?
function alienEye(x, y, size, append, img, theNum) {
var self = this;
var i = 0;
var myintID;
this.x = x;
this.y = y;
this.size = size;
//Create the Eye Dom Node using canvas.
this.create = function create(x, y, size, append) {
//Create dom node
var eye = document.createElement('canvas');
eye.width = size;
eye.height = size;
eye.style.position = 'relative';
eye.style.top = y + 'px';
eye.style.left = x + 'px';
document.getElementById(append).appendChild(eye);
//Get canvas
canvas = eye.getContext("2d")
radius = size / 2;
//draw eye
//canvas.beginPath();
//canvas.arc(radius, radius, radius, 0, Math.PI*2, true);
//canvas.closePath();
//canvas.fillStyle = "rgb(255,255,255)";
//canvas.fill();
//draw pupil
//canvas.beginPath();
//canvas.arc(radius, radius/2, radius/4, 0, Math.PI*2, true);
//canvas.closePath();
//canvas.fillStyle = "rgb(0,0,0)";
//canvas.fill();
//var img = new Image();
canvas.drawImage(img, - 20, - 20, 100, 100);
img.onload = function () {
canvas.drawImage(img, - 20, - 20, 100, 100);
}
img.src = 'Stuff/needle.png';
return eye;
}
//Rotate the Dom node to a given angle.
this.rotate = function (x) {
this.node.style.MozTransform = "rotate(" + x + "deg)";
this.node.style.WebkitTransform = "rotate(" + x + "deg)";
this.node.style.OTransform = "rotate(" + x + "deg)";
this.node.style.msTransform = "rotate(" + x + "deg)";
this.node.style.Transform = "rotate(" + x + "deg)";
}
this.letsBegin = function () {
//Update every 100 miliseconds
myintID = setInterval(function () {
//Math!
angleFromEye = Math.atan2((cursorLocation.y - self.my_y), cursorLocation.x - self.my_x) * (180 / Math.PI) + 90;
//Rotate
self.rotate(angleFromEye);
//Refresh own position every 25th time (in case screen is resized)
i++;
if (i > 25) {
self.locateSelf();
i = 0;
}
}, 20);
}
this.letsEnd = function () {
clearInterval(myintID);
}
this.locateSelf = function () {
this.my_x = this.node.offsetLeft + (this.size / 2);
this.my_y = this.node.offsetTop + (this.size / 2);
//If it has offsetParent, add em up to get the objects full position.
if (this.node.offsetParent) {
temp = this.node;
while (temp = temp.offsetParent) {
this.my_x += temp.offsetLeft;
this.my_y += temp.offsetTop;
}
}
}
//Call the node create function when the AlienEye Object is created.
this.node = this.create(x, y, size, append);
this.locateSelf();
//Now the node has been added to the page, lets figure out exact where
//it is relative to the documents top.
//Get the basic position
var cursorLocation = new function () {
this.x = 0;
this.y = 0;
//This function is called onmousemove to update the stored position
this.update = function (e) {
var w = window,
b = document.body;
this.x = e.clientX + (w.scrollX || b.scrollLeft || b.parentNode.scrollLeft || 0);
this.y = e.clientY + (w.scrollY || b.scrollTop || b.parentNode.scrollTop || 0);
}
//Hook onmousemove up to the above update function.
document.onmousemove = function (e) {
cursorLocation.update(e);
};
If that's all your code, all you need to do is call the functions.
I managed to get it running by adding this to the bottom of the script (the body element was given an ID of "body"):
var img = new Image();
img.src = "Stuff/needle.png";
var eye = new alienEye(40, 40, 50, "body", img, 20);
eye.letsBegin();
Edit:
Here's how I got the angle based off two points in my GameAPI. It's a bit verbose... the main angle code is at the bottom:
getAngle : function(point1X, point1Y, point2X, point2Y, hyp) {
//This function uses the arcsine to calculate the angle between
//the points, but only if necessary.
//This function includes some shortcuts for common angles.
if(point1Y == point2Y) {
if(point1X < point2X) return 0;
else return 180;
}
if(point1X == point2X) {
if(point1Y < point2Y) return 90;
else return 270;
}
var xDist = point1X - point2X;
var yDist = point1Y - point2Y;
if(xDist == yDist) {
if(point1X < point2X) return 45;
else return 225;
}
if(-xDist == yDist) {
if(point1X < point2X) return 315;
else return 135;
}
if(hyp==null)
hyp = Math.sqrt( xDist*xDist + yDist*yDist );
var D_TO_R = this.D_TO_R;
if(point1X<point2X) {
//console.log(Math.round(-Math.asin((point1Y-point2Y)/hyp) * D_TO_R));
return Game.Util.fixDirection(-Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R);
} else {
//console.log(Math.round(Math.asin((point1Y-point2Y)/hyp) * D_TO_R + 180));
return Game.Util.fixDirection(Math.asin((point1Y-point2Y)/hyp) * this.D_TO_R+180);
}
}
(The D_TO_R is the constant 180/PI for radian/angle conversion. The Game.Util.fixDirection ensures that the angle is between 0 and 360 The hyp argument is an optional argument for if the hypothenuse of the right triangle is already known, as to save CPU cycles)
I'm experimenting a bit with the new tag and I've already hit my first roadbump. I figured I'd start getting my feet wet by implementing a version of the classic board game Go/Baduk/Weiqi.
I've drawn the xy grid using moveTo() and lineTo(), and I've drawn a wood background using fillRect() that needs to be "under" that XY grid of course.
However, therein lies my problem. The fillRect() background is drawn on top of the grid - thus obscuring the grid.
How do I reverse this? Here's what I'm working with:
var boardSize = 19;
var gridSpacing = 25;
var gridSize = boardSize * gridSpacing;
var xStart = (window.innerWidth / 2) - (gridSize / 2) + 0.5;
var yStart = (window.innerHeight / 2) - (gridSize / 2) + 0.5;
var xEnd = xStart + gridSize;
var yEnd = yStart + gridSize;
var gridContext = canvas.getContext("2d");
gridContext.beginPath();
// Draw the board x lines
for (var x = xStart; x <= xEnd; x += gridSpacing)
{
gridContext.moveTo(x, yStart);
gridContext.lineTo(x, yEnd);
}
// Draw the board y lines
for (var y = yStart; y <= yEnd; y += gridSpacing)
{
gridContext.moveTo(xStart, y);
gridContext.lineTo(xEnd, y);
}
gridContext.strokeStyle = "#000000";
gridContext.stroke();
// Create new image object to use as pattern
var img = new Image();
img.src = 'bg_wood.jpg';
img.onload = function()
{
var boardBG = gridContext.createPattern(img, 'repeat');
gridContext.fillStyle = boardBG;
gridContext.fillRect(xStart, yStart, gridSize, gridSize);
}
Try using gridContext.globalCompositeOperation = 'destination-over'; when drawing the background.