how to add multiple canvas on same html page - html

I copied a puzzle code. Now i need to add more puzzles in the same page how i can do that with this javascript. Please anyone guide me to how to handle this code for making multiple puzzles, I have basic skill in javascript, I am trying to add another variable for new puzzle it's not working...
const PUZZLE_DIFFICULTY = 2;
const PUZZLE_HOVER_TINT = '#009900';
var _stage;
var _canvas;
var _img;
var _pieces;
var _puzzleWidth;
var _puzzleHeight;
var _pieceWidth;
var _pieceHeight;
var _currentPiece;
var _currentDropPiece;
var _mouse;
function init() {
_img = new Image();
_img.addEventListener('load', onImage, false);
_img.src = "http://lorempixel.com/output/animals-q-g-640-480-3.jpg";
}
function onImage(e) {
_pieceWidth = Math.floor(_img.width / PUZZLE_DIFFICULTY)
_pieceHeight = Math.floor(_img.height / PUZZLE_DIFFICULTY)
_puzzleWidth = _pieceWidth * PUZZLE_DIFFICULTY;
_puzzleHeight = _pieceHeight * PUZZLE_DIFFICULTY;
setCanvas();
initPuzzle();
}
function setCanvas() {
_canvas = document.getElementById('puzzle');
_stage = _canvas.getContext('2d');
_canvas.width = _puzzleWidth;
_canvas.height = _puzzleHeight;
_canvas.style.border = "1px solid black";
}
function initPuzzle() {
_pieces = [];
_mouse = {
x: 0,
y: 0
};
_currentPiece = null;
_currentDropPiece = null;
_stage.drawImage(_img, 0, 0, _puzzleWidth, _puzzleHeight, 0, 0, _puzzleWidth, _puzzleHeight);
createTitle("Click to Start Puzzle");
buildPieces();
}
function createTitle(msg) {
_stage.fillStyle = "#000000";
_stage.globalAlpha = .4;
_stage.fillRect(100, _puzzleHeight - 40, _puzzleWidth - 200, 40);
_stage.fillStyle = "#FFFFFF";
_stage.globalAlpha = 1;
_stage.textAlign = "center";
_stage.textBaseline = "middle";
_stage.font = "20px Arial";
_stage.fillText(msg, _puzzleWidth / 2, _puzzleHeight - 20);
}
function buildPieces() {
var i;
var piece;
var xPos = 0;
var yPos = 0;
for (i = 0; i < PUZZLE_DIFFICULTY * PUZZLE_DIFFICULTY; i++) {
piece = {};
piece.sx = xPos;
piece.sy = yPos;
_pieces.push(piece);
xPos += _pieceWidth;
if (xPos >= _puzzleWidth) {
xPos = 0;
yPos += _pieceHeight;
}
}
document.onmousedown = shufflePuzzle;
}
function shufflePuzzle() {
_pieces = shuffleArray(_pieces);
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var i;
var piece;
var xPos = 0;
var yPos = 0;
for (i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
piece.xPos = xPos;
piece.yPos = yPos;
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, xPos, yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(xPos, yPos, _pieceWidth, _pieceHeight);
xPos += _pieceWidth;
if (xPos >= _puzzleWidth) {
xPos = 0;
yPos += _pieceHeight;
}
}
document.onmousedown = onPuzzleClick;
}
function onPuzzleClick(e) {
if (e.layerX || e.layerX == 0) {
_mouse.x = e.layerX - _canvas.offsetLeft;
_mouse.y = e.layerY - _canvas.offsetTop;
} else if (e.offsetX || e.offsetX == 0) {
_mouse.x = e.offsetX - _canvas.offsetLeft;
_mouse.y = e.offsetY - _canvas.offsetTop;
}
_currentPiece = checkPieceClicked();
if (_currentPiece != null) {
_stage.clearRect(_currentPiece.xPos, _currentPiece.yPos, _pieceWidth, _pieceHeight);
_stage.save();
_stage.globalAlpha = .9;
_stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
_stage.restore();
document.onmousemove = updatePuzzle;
document.onmouseup = pieceDropped;
}
}
function checkPieceClicked() {
var i;
var piece;
for (i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
if (_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {
//PIECE NOT HIT
} else {
return piece;
}
}
return null;
}
function updatePuzzle(e) {
_currentDropPiece = null;
if (e.layerX || e.layerX == 0) {
_mouse.x = e.layerX - _canvas.offsetLeft;
_mouse.y = e.layerY - _canvas.offsetTop;
} else if (e.offsetX || e.offsetX == 0) {
_mouse.x = e.offsetX - _canvas.offsetLeft;
_mouse.y = e.offsetY - _canvas.offsetTop;
}
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var i;
var piece;
for (i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
if (piece == _currentPiece) {
continue;
}
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
if (_currentDropPiece == null) {
if (_mouse.x < piece.xPos || _mouse.x > (piece.xPos + _pieceWidth) || _mouse.y < piece.yPos || _mouse.y > (piece.yPos + _pieceHeight)) {
//NOT OVER
} else {
_currentDropPiece = piece;
_stage.save();
_stage.globalAlpha = .4;
_stage.fillStyle = PUZZLE_HOVER_TINT;
_stage.fillRect(_currentDropPiece.xPos, _currentDropPiece.yPos, _pieceWidth, _pieceHeight);
_stage.restore();
}
}
}
_stage.save();
_stage.globalAlpha = .6;
_stage.drawImage(_img, _currentPiece.sx, _currentPiece.sy, _pieceWidth, _pieceHeight, _mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
_stage.restore();
_stage.strokeRect(_mouse.x - (_pieceWidth / 2), _mouse.y - (_pieceHeight / 2), _pieceWidth, _pieceHeight);
}
function pieceDropped(e) {
document.onmousemove = null;
document.onmouseup = null;
if (_currentDropPiece != null) {
var tmp = {
xPos: _currentPiece.xPos,
yPos: _currentPiece.yPos
};
_currentPiece.xPos = _currentDropPiece.xPos;
_currentPiece.yPos = _currentDropPiece.yPos;
_currentDropPiece.xPos = tmp.xPos;
_currentDropPiece.yPos = tmp.yPos;
}
resetPuzzleAndCheckWin();
}
function resetPuzzleAndCheckWin() {
_stage.clearRect(0, 0, _puzzleWidth, _puzzleHeight);
var gameWin = true;
var i;
var piece;
for (i = 0; i < _pieces.length; i++) {
piece = _pieces[i];
_stage.drawImage(_img, piece.sx, piece.sy, _pieceWidth, _pieceHeight, piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
_stage.strokeRect(piece.xPos, piece.yPos, _pieceWidth, _pieceHeight);
if (piece.xPos != piece.sx || piece.yPos != piece.sy) {
gameWin = false;
}
}
if (gameWin) {
setTimeout(gameOver, 500);
}
}
function gameOver() {
document.onmousedown = null;
document.onmousemove = null;
document.onmouseup = null;
initPuzzle();
alert("you Won")
}
function shuffleArray(o) {
for (var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
<body onload="init();">
<canvas id="puzzle"></canvas>
</body>

Related

How to Get (& Set) cell values from one sheet to another in Google Sheets?

Looking to get values from several cells in the first sheet (POTemplate) of my Google Sheet file that serves as an order entry form. Line 22 is the first line in the form that collects data from our user regarding items requested for order.
The tab to which I'd like to set these values (POHistory) will serve as a running log of all order details keyed into the POTemplate tab with each order. Each entry recorded in the PO template log should include each orders' unique PO No. (found in cell N3 of the POTemplate tab) & PO Date (cell N4 of the POTemplate tab). I sincerely appreciate the help.
function submit() {
var app = SpreadsheetApp;
var tplSheet = app.getActiveSpreadsheet().getSheetByName("POTemplate");
var tplFRow = 22, tplLRow = tplSheet.getLastRow();
var tplRowsNum = tplLRow - tplFRow + 1;
var tplFCol = 1, tplLCol = 16;
var tplColsNum = tplLCol - tplFCol + 1;
var rangeData = tplSheet.getRange(22, 1, tplRowsNum, tplColsNum).getValues();
var colIndexes = [0, 3, 10, 12, 15];
var fData = filterByIndexes(rangeData, colIndexes);
var target = "POHistory";
var targetSheet = app.getActiveSpreadsheet().getSheetByName(target);
var tgtRow = targetSheet.getLastRow() + 1;
var tgtRowsNum = fData.length - tgtRow + 1;
var tgtCol = 1;
var tgtColsNum = fData[0].length - 1 + 1;
targetSheet.getRange(tgtRow, tgtCol, tgtRowsNum,
tgtColsNum).setValues(fData);
}
function filterByIndexes(twoDArr, indexArr) {
var fData = [];
twoDArr = twoDArr.transpose();
for(var i=0; i<indexArr.length; i++) {
fData.push(twoDArr[indexArr[i]]);
}
return fData.transpose();
}
Array.prototype.transpose = function() {
var a = this,
w = a.length ? a.length : 0,
h = a[0] instanceof Array ? a[0].length : 0;
if (h === 0 || w === 0) {return [];}
var i, j, t = [];
for (i = 0; i < h; i++) {
t[i] = [];
for (j = 0; j < w; j++) {
t[i][j] = a[j][i];
}
}
return t;
}
I can offer you a modification of the submit() function you have given.
function process(){
submit();
submitDate();
}
function submitDate() {
var app = SpreadsheetApp;
var tplSheet = app.getActiveSpreadsheet().getSheetByName("POTemplate");
var tplFRow = 1, tplLRow = 21;
var tplRowsNum = tplLRow - tplFRow + 1;
var tplFCol = 1, tplLCol = 16;
var tplColsNum = tplLCol - tplFCol + 1;
var rangeData = tplSheet.getRange(tplFRow, tplFCol, tplLRow, tplColsNum).getValues();
var colIndexes = [13];
var fData = filterByIndexes(rangeData, colIndexes);
var target = "POHistory";
var targetSheet = app.getActiveSpreadsheet().getSheetByName(target);
var tgtRow = targetSheet.getLastRow() + 1;
var tgtRowsNum = fData.length - tgtRow + 1;
var tgtCol = 1;
var tgtColsNum = fData[0].length - 1 + 1;
Logger.log(fData)
fData=fData.transpose();
Logger.log(fData)
targetSheet.getRange(tgtRow-1, 5, fData.length,
fData[0].length).setValues(fData);
}
function submit() {
var app = SpreadsheetApp;
var tplSheet = app.getActiveSpreadsheet().getSheetByName("POTemplate");
var tplFRow = 22, tplLRow = tplSheet.getLastRow();
var tplRowsNum = tplLRow - tplFRow + 1;
var tplFCol = 1, tplLCol = 16;
var tplColsNum = tplLCol - tplFCol + 1;
var rangeData = tplSheet.getRange(22, 1, tplRowsNum, tplColsNum).getValues();
var colIndexes = [0, 3, 10, 12, 15];
var fData = filterByIndexes(rangeData, colIndexes);
var target = "POHistory";
var targetSheet = app.getActiveSpreadsheet().getSheetByName(target);
var tgtRow = targetSheet.getLastRow() + 1;
var tgtRowsNum = fData.length - tgtRow + 1;
var tgtCol = 1;
var tgtColsNum = fData[0].length - 1 + 1;
targetSheet.getRange(tgtRow, tgtCol, tgtRowsNum,
tgtColsNum).setValues(fData);
}
function filterByIndexes(twoDArr, indexArr) {
var fData = [];
twoDArr = twoDArr.transpose();
for(var i=0; i<indexArr.length; i++) {
fData.push(twoDArr[indexArr[i]]);
}
return fData.transpose();
}
Array.prototype.transpose = function() {
var a = this,
w = a.length ? a.length : 0,
h = a[0] instanceof Array ? a[0].length : 0;
if (h === 0 || w === 0) {return [];}
var i, j, t = [];
for (i = 0; i < h; i++) {
t[i] = [];
for (j = 0; j < w; j++) {
t[i][j] = a[j][i];
}
}
return t;
}
Basically, similar code runs twice. I could be criticized for doing this, but perhaps it is convenient for you this way.

HTML5 canvas drawing, allow multiple touch inputs

I would like to create an web based guestbook for an 84" multi-touch device. I know how to create a canvas which allows a user to draw, but I wonder if the same is possible for multiple users? I have found some information on html5 multi-touch input, but all of it is related to gestures.
Since the surface is large enough and the device supports it, ideally I would like for several users to draw something onto the canvas simultaneously.
Here is whole program. There is no nothing to allow multiple touch inputs.
You only need to access event.changedTouches
Navigate with mobile device and test demo.
I made also button click detection example (HUB BUTTON).
Source: https://github.com/zlatnaspirala/multi-touch-canvas-handler/blob/master/index.html
function MOBILE_CONTROL () {
this.X = null;
this.Y = null;
this.LAST_X_POSITION = null;
this.LAST_Y_POSITION = null;
this.MULTI_TOUCH = 'NO';
this.MULTI_TOUCH_X1 = null;
this.MULTI_TOUCH_X2 = null;
this.MULTI_TOUCH_X3 = null;
this.MULTI_TOUCH_X4 = null;
this.MULTI_TOUCH_X5 = null;
this.MULTI_TOUCH_Y1 = null;
this.MULTI_TOUCH_Y2 = null;
this.MULTI_TOUCH_Y3 = null;
this.MULTI_TOUCH_Y4 = null;
this.MULTI_TOUCH_Y5 = null;
this.MULTI_TOUCH_X6 = null;
this.MULTI_TOUCH_X7 = null;
this.MULTI_TOUCH_X8 = null;
this.MULTI_TOUCH_X9 = null;
this.MULTI_TOUCH_X10 = null;
this.MULTI_TOUCH_Y6 = null;
this.MULTI_TOUCH_Y7 = null;
this.MULTI_TOUCH_Y8 = null;
this.MULTI_TOUCH_Y9 = null;
this.MULTI_TOUCH_Y10 = null;
this.MULTI_TOUCH_INDEX = 1;
this.SCREEN = [window.innerWidth , window.innerHeight];
this.SCREEN.W = this.SCREEN[0];
this.SCREEN.H = this.SCREEN[1];
//Application general
this.AUTOR = "Nikola Lukic";
this.APPLICATION_NAME = "TestApplication";
this.SET_APPLICATION_NAME = function (value) {
if (typeof value != 'string')
throw 'APPLICATION_NAME must be a string!';
if (value.length < 2 || value.length > 20)
throw 'APPLICATION_NAME must be 2-20 characters long!';
this.APPLICATION_NAME = value;
};
this.APP = function(){/*construct*/};
this.APP.BODY = document.getElementsByTagName('body')[0];
this.APP.BODY.SET_STYLE = function (string) {this.style = string;}
this.APP.BODY.SET_BACKGROUND_COLOR = function (color) {this.style.backgroundColor = color;}
this.APP.BODY.SET_COLOR = function (color) {this.style.Color = color;}
this.APP.BODY.ADD_DIV = function (id , style , innerHTML) {
var n = document.createElement('div');
var divIdName = id;
n.setAttribute('id',divIdName);
n.setAttribute('style',style);
n.innerHTML = innerHTML;
this.appendChild(n);
};
this.APP.BODY.ADD_2DCANVAS = function (id,width_,height_) {
var n = document.createElement('canvas');
var divIdName = id;
n.setAttribute('id',divIdName);
n.setAttribute('width',width_);
n.setAttribute('height',height_);
//n.innerHTML = 'Element is here';
this.appendChild(n);
};
console.log('<MOBILE_CONTROL JavaScript class>');
console.log('status:MOBILE_CONTROL FINISH LOADING');
console.log('EASY_IMPLEMENTATION!');
}
function CANVAS_DRAW() {
var run = true;
var timer = null;
window.addEventListener('touchstart', MDPORT, false);
function MDPORT(){
if (run) {
clearInterval(timer);
run = false;
} else {
timer = setInterval(makeHarmonograph, 1);
run = true;
}
}
var A1 = 200, f1 = 2, p1 = 1/16, d1 = 0.02;
var A2 = 10, f2 = 4, p2 = 3 / 2, d2 = 0.0315;
var A3 = 200, f3 = 4, p3 = 13 / 15, d3 = 0.00012;
var A4 = 10, f4 = 4, p4 = 1, d4 = 0.012;
var r = 10, g =10, b = 0;
var UPDOWN = 1,CONTROL_WIDTH = 0;
var ctx = document.getElementById("canvas").getContext("2d");
setInterval(randomColor, 5000);
timer = setInterval(makeHarmonograph, 1);
function randomColor() {
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
}
function makeHarmonograph() {
f1 = (f1 / 10) % 10;
f2 = (f2 / 40) % 10;
f3 = (f3 + Math.random() / 80) % 10;
f4 = (f4 + Math.random() / 411) % 10;
p1 += 0.5 % (Math.PI*2)
drawHarmonograph();
}
function drawHarmonograph() {
ctx.clearRect(0, 0, 850, 450);
ctx.save();
ctx.fillStyle = "#000000";
ctx.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(0, 0, 1100, 400);
ctx.translate(511, 0);
ctx.rotate(1.57);
///////////
// Draw guides
ctx.strokeStyle = '#09f';
ctx.lineWidth = A1 ;
ctx.translate(111, 1);
ctx.rotate(0.01);
if (CONTROL_WIDTH == 0) { UPDOWN=UPDOWN+1;}
if (UPDOWN>51){CONTROL_WIDTH=1; }
if (CONTROL_WIDTH == 0) { UPDOWN=UPDOWN-0.1;}
if (UPDOWN<1){CONTROL_WIDTH=0; }
// Set line styles
ctx.strokeStyle = '#099909';
ctx.lineWidth = UPDOWN;
// check input
ctx.miterLimit = UPDOWN;
// Draw lines
ctx.beginPath();
ctx.moveTo(111,100);
for (i=0;i<121;i++){
var dy = i%2==0 ? 25 : -25 ;
ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
}
ctx.stroke();
return false;
ctx.translate(444, 333);
ctx.fillStyle='lime';
ctx.font="30px Arial";
ctx.fillText("Overlapping harmonics with JavaScript, wait secund.",5,25);
ctx.stroke();
}
}
function CANVAS_DRAW_1(){
var run = true;
var timer = null;
timer = setInterval(makeHarmonograph, 1);
run = true;
var A1 = 200, f1 = 2, p1 = 1/16, d1 = 0.02;
var A2 = 10, f2 = 4, p2 = 3 / 2, d2 = 0.0315;
var A3 = 200, f3 = 4, p3 = 13 / 15, d3 = 0.00012;
var A4 = 10, f4 = 4, p4 = 1, d4 = 0.012;
var r = 10, g =10, b = 0;
var UPDOWN = 1,CONTROL_WIDTH = 0;
var ctx = document.getElementById("canvas_1").getContext("2d");
setInterval(randomColor, 5000);
timer = setInterval(makeHarmonograph, 1);
function randomColor() {
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
}
function makeHarmonograph() {
f1 = (f1 / 10) % 10;
f2 = (f2 / 40) % 10;
f3 = (f3 + Math.random() / 80) % 10;
f4 = (f4 + Math.random() / 411) % 10;
p1 += 0.5 % (Math.PI*2)
drawHarmonograph();
}
function drawHarmonograph() {
ctx.clearRect(0, 0, 850, 450);
ctx.save();
ctx.fillStyle = "#000000";
ctx.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(0, 0, 800, 400);
ctx.translate(0, 250);
ctx.beginPath();
if (A1 > 100) {}
for (var t = 0; t < 100; t+=0.1) {
var x = A1 * Math.sin(f1 * t + Math.PI * p1) * Math.exp(-d1 * t) + A2 * Math.sin(f2 * t + Math.PI * p2) * Math.exp(-d2 * t);
var y = A3 * Math.sin(f3 * t + Math.PI * p1) * Math.exp(-d3 * t) + A4 * Math.sin(f4 * t + Math.PI * p4) * Math.exp(-d4 * t);
//ctx.lineTo(x*x, y/x);
ctx.lineTo(x*x+1, y+1/x);
}
ctx.stroke();
ctx.translate(A1, 0);
ctx.rotate(1.57);
ctx.beginPath();
for (var t = 0; t < 100; t+=0.1) {
var x = A1 * A3* Math.sin(f1 * t + Math.PI * p1) * Math.exp(-d1 * t) + A2 * Math.sin(f2 * t + Math.PI * p2) * Math.exp(-d2 * t);
var y = A3 * Math.sin(f3 * t + Math.PI * p1) * Math.exp(-d3 * t) + A4 * Math.sin(f4 * t + Math.PI * p4) * Math.exp(-d4 * t);
ctx.lineTo(x*x+1, y+1/x);
}
ctx.stroke();
ctx.restore();
// Draw guides
ctx.strokeStyle = '#09f';
ctx.lineWidth = A1;
if (CONTROL_WIDTH == 0) { UPDOWN=UPDOWN+1;}
if (UPDOWN>51){CONTROL_WIDTH=1; }
if (CONTROL_WIDTH == 0) { UPDOWN=UPDOWN-0.1;}
if (UPDOWN<1){CONTROL_WIDTH=0; }
// Set line styles
ctx.strokeStyle = '#099909';
ctx.lineWidth = UPDOWN;
// check input
ctx.miterLimit = 5;
// Draw lines
ctx.beginPath();
ctx.moveTo(0,100);
for (i=0;i<124;i++){
var dy = i%2==0 ? 25 : -25 ;
ctx.lineTo(Math.pow(i,1.5)*2,75+dy);
}
ctx.stroke();
return false;
ctx.translate(A1, 210);
ctx.fillStyle='lime';
ctx.font="30px Arial";
ctx.fillText("Overlapping harmonics with JavaScript, wait secund.",5,25);
}
}
function CANVAS_DRAW_2(){
var timer = null;
var A1 = 200, f1 = 2, p1 = 1/16, d1 = 0.02;
var A2 = 10, f2 = 4, p2 = 3 / 2, d2 = 0.0315;
var A3 = 200, f3 = 4, p3 = 13 / 15, d3 = 0.00012;
var A4 = 10, f4 = 4, p4 = 1, d4 = 0.012;
var r = 10, g =10, b = 0;
var ctx = document.getElementById("canvas_2").getContext("2d");
setInterval(randomColor, 5000);
timer = setInterval(t, 1);
function randomColor() {
r = Math.floor(Math.random() * 256);
g = Math.floor(Math.random() * 256);
b = Math.floor(Math.random() * 256);
}
function t() {
r1();
}
function r1() {
ctx.clearRect(0, 0, CONTROL.SCREEN.W, CONTROL.SCREEN.H);
ctx.save();
ctx.strokeStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillStyle = "#000000";
ctx.fillRect(0, 0, CONTROL.SCREEN.W, CONTROL.SCREEN.H);
ctx.beginPath();
var x = CONTROL.X;
var y = CONTROL.Y;
ctx.fillStyle = "rgb(" + r + "," + g + "," + b + ")";
ctx.fillRect(x, y-400, 1, 2500);
ctx.fillRect(x-400, y, 2500, 1);
ctx.fillText(" ( targetX:" + CONTROL.X + " ( targetY: "+ CONTROL.Y + " ) ",x,y);
ctx.fillStyle = "#00FF00";
ctx.font="10px Arial";
ctx.fillText(" JavaScript ",x- CONTROL.SCREEN.W/3,y - CONTROL.SCREEN.H/3.4);
ctx.fillText(" welcome here , canvas example with MOBILE_TOUCH() ",x - CONTROL.SCREEN.W/3,y - CONTROL.SCREEN.H/3.2);
ctx.fillText(" no css files need, pure js ",x - CONTROL.SCREEN.W/3,y - CONTROL.SCREEN.H/3);
if (CONTROL.X > CONTROL.SCREEN.W/2.2 && CONTROL.X < CONTROL.SCREEN.W/2.2 + 300 && CONTROL.Y > CONTROL.SCREEN.H/2.2 && CONTROL.Y < CONTROL.SCREEN.H/2.2 + 100) {
ctx.strokeStyle = "lime";
}
else{
ctx.strokeStyle = "red";
}
ctx.strokeRect( CONTROL.SCREEN.W/2.2, CONTROL.SCREEN.H/2.2, 300, 100);
ctx.fillText(" HUB DETECT ", CONTROL.SCREEN.W/2, CONTROL.SCREEN.H/2);
if (CONTROL.MULTI_TOUCH_X1 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X1 , CONTROL.MULTI_TOUCH_Y1-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X1 -400 , CONTROL.MULTI_TOUCH_Y1 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X2 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X2 , CONTROL.MULTI_TOUCH_Y2-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X2 -400 , CONTROL.MULTI_TOUCH_Y2 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X3 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X3 , CONTROL.MULTI_TOUCH_Y3-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X3 -400 , CONTROL.MULTI_TOUCH_Y3 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X4 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X4 , CONTROL.MULTI_TOUCH_Y4-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X4 -400 , CONTROL.MULTI_TOUCH_Y4 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X5 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X5 , CONTROL.MULTI_TOUCH_Y5-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X5 -400 , CONTROL.MULTI_TOUCH_51 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X6 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X6 , CONTROL.MULTI_TOUCH_Y6-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X6 -400 , CONTROL.MULTI_TOUCH_Y6 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X7 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X7 , CONTROL.MULTI_TOUCH_Y8-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X7 -400 , CONTROL.MULTI_TOUCH_Y8 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X9 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X9 , CONTROL.MULTI_TOUCH_Y9-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X9 -400 , CONTROL.MULTI_TOUCH_Y9 , 2500, 1);
}
if (CONTROL.MULTI_TOUCH_X10 !== 'undefined'){
ctx.fillRect(CONTROL.MULTI_TOUCH_X10 , CONTROL.MULTI_TOUCH_Y10-400 , 1, 2500);
ctx.fillRect(CONTROL.MULTI_TOUCH_X10 -400 , CONTROL.MULTI_TOUCH_Y10 , 2500, 1);
}
// Draw lines
ctx.fillStyle='lime';
ctx.font="30px Arial";
ctx.fillText("MOBILE_TOUCH example ",5,25);
}
}
//definition
var CONTROL = new MOBILE_CONTROL();
//CONTROL.APP.BODY.ADD_2DCANVAS("canvas");
//CONTROL.APP.BODY.ADD_2DCANVAS("canvas_1");
CONTROL.APP.BODY.ADD_2DCANVAS("canvas_2",CONTROL.SCREEN.W,CONTROL.SCREEN.H);
CONTROL.APP.BODY.SET_STYLE('margin-left:-10px;padding:0;border:none;');
//CANVAS_DRAW();
//CANVAS_DRAW_1();
CANVAS_DRAW_2();
//<!-- SCREEN.prototype.sayHello = function(){alert ('hello' + "sss" );}; -->
//###################################################################
//EVENTS
//###################################################################
document.addEventListener('touchstart', function(event)
{
if (CONTROL.MULTI_TOUCH == 'NO') {
var touch = event.touches[0];
CONTROL.X = touch.pageX;
CONTROL.Y = touch.pageY;
console.log('TOUCH START AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
}
else if (CONTROL.MULTI_TOUCH == 'YES') {
var touches_changed = event.changedTouches;
for (var i=0; i<touches_changed.length;i++) {
//CONTROL.MULTI_TOUCH_X1
console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
switch(CONTROL.MULTI_TOUCH_INDEX)
{
case 1:
CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
break;
case 2:
CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
break;
case 3:
CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
break;
case 4:
CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
break;
case 5:
CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
break;
case 6:
CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
break;
case 7:
CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
break;
case 8:
CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
break;
case 9:
CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
break;
case 10:
CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
break;
default:
//code to be executed if n is different from case 1 and 2
}
CONTROL.MULTI_TOUCH_INDEX = CONTROL.MULTI_TOUCH_INDEX + 1;
}
}
CONTROL.MULTI_TOUCH = 'YES';
},false);
////////////////////////////////////////////////////////
document.addEventListener('touchmove', function(event)
{
var touch = event.touches[0];
CONTROL.X = touch.pageX;
CONTROL.Y = touch.pageY;
console.log('TOUCH MOVE AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
//#############
if (CONTROL.MULTI_TOUCH == 'YES') {
var touches_changed = event.changedTouches;
for (var i=0; i<touches_changed.length;i++) {
//CONTROL.MULTI_TOUCH_X1
console.log("multi touch : x" + CONTROL.MULTI_TOUCH_INDEX + ":(" +touches_changed[i].pageX + ")");
switch(i)
{
case 1:
CONTROL.MULTI_TOUCH_X1=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y1=touches_changed[i].pageY;
break;
case 2:
CONTROL.MULTI_TOUCH_X2=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y2=touches_changed[i].pageY;
break;
case 3:
CONTROL.MULTI_TOUCH_X3=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y3=touches_changed[i].pageY;
break;
case 4:
CONTROL.MULTI_TOUCH_X4=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y4=touches_changed[i].pageY;
break;
case 5:
CONTROL.MULTI_TOUCH_X5=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y5=touches_changed[i].pageY;
break;
case 6:
CONTROL.MULTI_TOUCH_X6=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y6=touches_changed[i].pageY;
break;
case 7:
CONTROL.MULTI_TOUCH_X7=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y7=touches_changed[i].pageY;
break;
case 8:
CONTROL.MULTI_TOUCH_X8=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y8=touches_changed[i].pageY;
break;
case 9:
CONTROL.MULTI_TOUCH_X9=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y9=touches_changed[i].pageY;
break;
case 10:
CONTROL.MULTI_TOUCH_X10=touches_changed[i].pageX;
CONTROL.MULTI_TOUCH_Y10=touches_changed[i].pageY;
break;
default:
//code to be executed if n is different from case 1 and 2
}
}}
//#############
event.preventDefault();
},false);
////////////////////////////////////////////////////////
document.addEventListener('touchend', function(event)
{
CONTROL.LAST_X_POSITION = CONTROL.X;
CONTROL.LAST_Y_POSITION = CONTROL.Y;
CONTROL.MULTI_TOUCH = 'NO';
CONTROL.MULTI_TOUCH_INDEX = 1;
CONTROL.MULTI_TOUCH_X1 = null;
CONTROL.MULTI_TOUCH_X2 = null;
CONTROL.MULTI_TOUCH_X3 = null;
CONTROL.MULTI_TOUCH_X4 = null;
CONTROL.MULTI_TOUCH_X5 = null;
CONTROL.MULTI_TOUCH_X6 = null;
CONTROL.MULTI_TOUCH_X7 = null;
CONTROL.MULTI_TOUCH_X8 = null;
CONTROL.MULTI_TOUCH_X9 = null;
CONTROL.MULTI_TOUCH_X10 = null;
CONTROL.MULTI_TOUCH_Y1 = null;
CONTROL.MULTI_TOUCH_Y2 = null;
CONTROL.MULTI_TOUCH_Y3 = null;
CONTROL.MULTI_TOUCH_Y4 = null;
CONTROL.MULTI_TOUCH_Y5 = null;
CONTROL.MULTI_TOUCH_Y6 = null;
CONTROL.MULTI_TOUCH_Y7 = null;
CONTROL.MULTI_TOUCH_Y8 = null;
CONTROL.MULTI_TOUCH_Y9 = null;
CONTROL.MULTI_TOUCH_Y10 = null;
console.log('LAST TOUCH POSITION AT:(X' + CONTROL.X + '),(' + CONTROL.Y + ')' );
},false);
////////////////////////////////////////////////////////
document.addEventListener("touchcancel", function(event)
{
console.log('BREAK - LAST TOUCH POSITION AT:(X' + CONTROL.X + '(,(' + CONTROL.Y + ')' );
}, false);
////////////////////////////////////////////////////////

getting y position from canvas is wrong

Sometimes the y-coordinates is greater than height of imagedata. can anybody help me to find my mistake!
Width is 320 px, height is 240px.
Here is my code:
function countPixels(context) {
var nAlive = 0,
all = [];
var w = canvas.width;
var p = context.getImageData(0, 0, canvas.width, canvas.height).data;
for (var y = 0, i = 0; y < canvas.height; y++)
for (var x = 0; x < canvas.width; x++, i += 4) {
if (p[i] == 255 || p[i + 1] == 255 || p[i + 2] == 255) //Not black
{
nAlive++;
var xc = i % w;
var yc = parseInt(i / w, 10);
var pos = {};
pos.x = xc;
pos.y = yc;
all.push(pos);
}
}
var percent = ((canvas.width * canvas.height) / 100) * nAlive;
console.log("Count: " + nAlive + ",percent: " + percent + ",all: " + JSON.stringify(all));
// $("#notifies").append("Count: "+nAlive+",percent: "+ percent+",all: "+JSON.stringify(all));
return {
percentage: parseFloat(percent),
positions: all
};
}
Here is the function call:
var tmp = countPixels(ctx2);
ctx2.strokeStyle = "blue";
$.each(tmp.positions, function(i, value) {
// if (ctx2.isPointInPath(value.x, value.y))
$('div').eq(0).append("i: " + i + " " + value.x + ", " + +value.y + '</br>');
ctx2.rect(value.x, value.y, 5, 5);
});
ctx2.stroke();

Blank Maze Generation

Maze is generating in a weird fashion. I do not know why, but it generates and breaks down every wall.
here is the code:
public class Main extends Sprite
{
//ARRAYS
private var maze:Array = new Array();
private var pos:Array = new Array();
//INTEGERS
private var num:int = 50;
private var cellX:int = 0;
private var cellY:int = 0;
private var mazeX:int = num;
private var mazeY:int = num;
//POINTS
private var startCell:Point = new Point();
//SPRITES
private var mazeSpriteT:Sprite = new Sprite();
private var mazeSpriteB:Sprite = new Sprite();
private var mazeSpriteL:Sprite = new Sprite();
private var mazeSpriteR:Sprite = new Sprite();
//broken wall
private var brWall:Sprite = new Sprite();
public function Main():void
{
//creating the initial grid, cells and points
setMaze();
//calling function to generate maze
generate(startCell);
}
public function setMaze():void
{
//clearing the screen from all graphical images
mazeSpriteT.graphics.clear();
mazeSpriteB.graphics.clear();
mazeSpriteR.graphics.clear();
mazeSpriteL.graphics.clear();
brWall.graphics.clear();
maze = new Array();
pos = new Array();
for (var i:int = 0; i < 10; i++) {
maze[i] = new Array();
pos[i] = new Array();
for (var j:int = 0; j < 10; j++) {
//maze
maze[i][j] = new Cell;
maze[i][j].visited = false;
//pos
pos[i][j] = new Point(cellX, cellY);
//graphics
mazeSpriteT.graphics.lineStyle(5, 0x000000, 1);
mazeSpriteB.graphics.lineStyle(5, 0x000000, 1);
mazeSpriteR.graphics.lineStyle(5, 0x000000, 1);
mazeSpriteL.graphics.lineStyle(5, 0x000000, 1);
//toplines
addChild(mazeSpriteT);
mazeSpriteT.graphics.moveTo(mazeX, mazeY);
mazeSpriteT.graphics.lineTo(mazeX + num, mazeY);
mazeSpriteT = new Sprite();
//bottomlines
addChild(mazeSpriteB);
mazeSpriteB.graphics.moveTo(mazeX, mazeY + num);
mazeSpriteB.graphics.lineTo(mazeX + num, mazeY + num);
mazeSpriteB = new Sprite();
//rightlines
addChild(mazeSpriteR);
mazeSpriteR.graphics.moveTo(mazeX + num, mazeY);
mazeSpriteR.graphics.lineTo(mazeX + num, mazeY + num);
mazeSpriteR = new Sprite();
//leftlines
addChild(mazeSpriteL);
mazeSpriteL.graphics.moveTo(mazeX, mazeY);
mazeSpriteL.graphics.lineTo(mazeX, mazeY + num);
mazeSpriteB = new Sprite();
cellX += 10;
mazeX += num;
}
cellX = 0;
cellY += 10;
mazeX = num;
mazeY += num;
}
//maze entrance
startCell = pos[0][0];
}
public function generate(cell:Point):void
{
var cx:int = cell.x / 10;
var cy:int = cell.y / 10;
maze[cy][cx].visited = true;
var neighbours:Array = new Array();
fillNeighbours(neighbours, cell);
trace(neighbours.length);
while (neighbours.length > 0) {
var index:int = (Math.random() * neighbours.length);
Math.floor(index);
var arr:Array = neighbours.splice(index, 1);
var pnt:Point = new Point(arr[0].x, arr[0].y);
breakWall(cell, pnt);
generate(pnt);
//trace("index: " + index);
//trace("obx: " + arr[0].x + " oby: " + arr[0].y);
//trace("pnt: " + pnt);
}
}
public function fillNeighbours(neighbours:Array, cell:Point):Array
{
var cx:int = cell.x / 10;
var cy:int = cell.y / 10;
/*for (var i:int = 0; i < maze.length; i++) {
for (var j:int = 0; j < maze[i].length; j++) {
//outerwall parameters
maze[0][j].north = false;
maze[maze.length - 1][j].south = false;
maze[i][maze[i].length-1].east = false;
maze[i][0].west = false;
}
} */
//south neigbours
if (cy < maze.length - 1) {
if (maze[cy + 1][cx].visited == true) {
maze[cy][cx].south = false;
} else {
neighbours.push(pos[cy + 1][cx]);
}
}
if (cy > 0) {
//north neighbours
if (maze[cy - 1][cx].visited == true) {
maze[cy][cx].north = false;
} else {
neighbours.push(pos[cy - 1][cx]);
}
}
if (cx < maze.length - 1) {
//east neighbours
if (maze[cy][cx + 1].visited == true) {
maze[cy][cx].east = false;
} else {
neighbours.push(pos[cy][cx + 1]);
}
}
if (cx > 0) {
//west neighbours
if (maze[cy][cx - 1].visited == true) {
maze[cy][cx].west = false;
} else {
neighbours.push(pos[cy][cx - 1]);
}
}
trace("--");
return(neighbours);
}
public function breakWall(cell:Point, pnt:Point):void
{
var cx:int = cell.x / 10;
var cy:int = cell.y / 10;
var px:int = pnt.x / 10;
var py:int = pnt.y / 10;
brWall.graphics.lineStyle(5, 0xFFFFFF, 1); //white walls
addChild(brWall);
trace(cx, px);
if (cy == py) { //horizontal transition
if (cx > px) { //right to left
brWall.graphics.moveTo((cx * num) + num, (cy * num) + num);
brWall.graphics.lineTo((cx * num) + num, (cy * num) + (num * 2));
} else if (cx < px) { //left to right
brWall.graphics.moveTo((cx * num) + (num * 2), (cy * num) + (num * 2));
brWall.graphics.lineTo((cx * num) + (num * 2), (cy * num) + num);
}
}
if (cx == px) { //vertical transition
if (cy > py) { //down to up
brWall.graphics.moveTo((cx * num) + (num * 2), (cy * num) + num);
brWall.graphics.lineTo((cx * num) + num, (cy * num) + num);
} else if (cy < py){ //up to down
brWall.graphics.moveTo((cx * num) + num, (cy * num) + (num * 2));
brWall.graphics.lineTo((cx * num) + (num * 2), (cy * num) + (num * 2));
}
}
brWall = new Sprite();
}
}
}
I have been praying for help. Be the one to answer my prayers (I will give you five internet dollars).
I'm not too sure I understand completely. You're running a loop that breaks down each wall
while (neighbours.length > 0) {
var index:int = (Math.random() * neighbours.length);
Math.floor(index);
var arr:Array = neighbours.splice(index, 1);
var pnt:Point = new Point(arr[0].x, arr[0].y);
breakWall(cell, pnt);
generate(pnt);
//trace("index: " + index);
//trace("obx: " + arr[0].x + " oby: " + arr[0].y);
//trace("pnt: " + pnt);
}
Just remove breakWall(cell,pnt)?

how to convert seconds to minutes:seconds in as3

hi to all i am new in action script 3 in flash cs6 im creating a game with a timer
i want to make the seconds to minutes:seconds format
example:
120 seconds to 2:00
this is my code:
var countDownDec:Number = 1;
var totalSecs = 120;
var countDownSecs = totalSecs;
counter.text = countDownSecs;
var time:Timer = new Timer(countDownDec*1000);
time.addEventListener(TimerEvent.TIMER, tick);
time.reset();
countDownSecs = totalSecs;
counter.text = countDownSecs;
time.start();
var frameLbl:FrameLabel;
function tick(e:TimerEvent):void {
time.start();
if(countDownSecs == 0){
time.stop();
countDownSecs = totalSecs;
gotoAndPlay('timesUp');
TimesUp.play();
}
else{
countDownSecs = countDownSecs - countDownDec;
counter.text = countDownSecs;
}
}
please help me to my problem
Code 100% working :
var count_down_interval:Number = 1
var total_seconds:Number = 120
var count_down_seconds:Number = total_seconds
var timer:Timer = new Timer(count_down_interval * 1000)
timer.addEventListener(TimerEvent.TIMER, timer_on_Tick)
function timer_on_Tick(e:TimerEvent):void {
if(count_down_seconds == 0){
timer.stop()
count_down_seconds = total_seconds
trace('game over')
} else{
count_down_seconds -= count_down_interval
counter.text = convert_time(count_down_seconds)
}
}
timer.start();
counter.text = convert_time(count_down_seconds)
function convert_time(time) {
var h, m, s:Number, t:String, a:Array
if(isNaN(time)){ // 05:37 -> 337 seconds
t = time
a = t.split(':')
if(a.length > 2){
h = int(a[0]), m = int(a[1]), s = int(a[2])
} else {
h = 0, m = int(a[0]), s = int(a[1])
}
return h*3600 + m*60 + s
} else { // 337 -> 05:37
t = ''
h = int(time/3600)
m = int((time-(h*3600))/60)
if(time >= 3600) t += (h<10 ? '0' : '') + h + ':'
t += (m<10 ? '0' : '') + m + ':'
t += (time % 60<10 ? '0' : '') + int(time % 60)
return t
}
}
Divide by 60 and round down for minutes, modulo (%) 60 for seconds
var totalSecs = 120;
var minutes = Math.floor(totalSecs / 60);
var seconds = totalSecs % 60;
var timeInMinutesSeconds = minutes + ":" + seconds;
EDIT:
Try this:
var countDownDec:Number = 1;
var totalSecs:int = 120;
var countDownSecs:int = totalSecs;
counter.text = getCountDownSecsText(countDownSecs);
var time:Timer = new Timer(countDownDec*1000);
time.addEventListener(TimerEvent.TIMER, tick);
var frameLbl:FrameLabel;
function tick(e:TimerEvent):void {
if(countDownSecs == 0) {
time.stop();
countDownSecs = totalSecs;
gotoAndPlay('timesUp');
TimesUp.play();
} else {
countDownSecs = countDownSecs - countDownDec;
counter.text = getCountDownSecsText(countDownSecs);
}
}
private function getCountDownSecsText(currentAmountSecs:int):String{
var minutes:int = Math.floor(currentAmountSecs / 60);
var seconds:int = currentAmountSecs % 60;
var prependString:String = "";
if( minutes > 9 ) {
prependString = "0";
}
return prependString + minutes + ":" + seconds;
}