Start learning now!
Even if you don't go into a field of engineering, problem solving skills will always apply in everyday life!
Embedded Files
Expand and discover every day!
Expand and discover every day!
We work to completely flip the classroom by allowing the kids to discover and understand concepts
We work to completely flip the classroom by allowing the kids to discover and understand concepts
...
...
Project of the week!!
Project of the week!!
...
...
At their own accords through deeper thinking, making connections, and hands on activities!
At their own accords through deeper thinking, making connections, and hands on activities!
Stay creative during quarantine!
Stay creative during quarantine!
Bring your brightest ideas to life
Bring your brightest ideas to life
We'd love to see your creations, email us pictures of your completed activities when you get a BINGO!
We'd love to see your creations, email us pictures of your completed activities when you get a BINGO!
Scramble your brain! Play 'Number Swap'!!
Scramble your brain! Play 'Number Swap'!!
The goal of Number Swap is to rearrange the scrambled sticks in order with the least number of moves! You get two rounds to meet the 'goal count'(number of swaps) before you're sent back to level 1 again. Once you meet 'goal count' you get to level up to the next stick! If you enjoyed it send us your score and a comment about the game at cazcreates22@gmail.com
Game Code:
<html>
<title> NumberSwap - Steinberg @ Caz</title>
<style>
canvas {
border: 5px solid #140E57;
margin: 0 auto;
width: 90%;
display: block;
margin-bottom: 50px;
background-color: #5E5B8F;
}
</style>
<body>
<h2 id="status">0 | 0</h2>
<h2 id="status1">0</h2>
<canvas id="myCanvas" height="600px" width="800px" />
<script type="text/javascript">
////////////////////////////////
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
//EVENT LISTENERS////////////////////////////////////
ctx.canvas.addEventListener('mousemove', mouseControl);
ctx.canvas.addEventListener('click', changeColor);
ctx.canvas.addEventListener('click', swap);
ctx.canvas.addEventListener('click', contClick);
document.addEventListener('keydown', key);
var midX = c.width / 2;
var midY = c.height / 2;
var padx = 200;
var mouseX = 0;
var mouseY = 0;
var positions = [];
var sticks = [];
var level1 = 5;
var vals = [];
var ranVals = [];
var num = 1;
var buttonColor = "grey";
var count = 0;
var clickA = false;
var clickB = false;
var clickC = false;
var extra = 0;
var stickA = 0;
var stickB = 0;
var stickC = 0;
var secondStick = 0;
var firstStick = 0;
var firstValue = 0;
var secondValue = 0;
var par = level1 - 2;
var complete = false;
var check = [];
var checkNums = 1;
var score = count;
var par = level1 - 2;
var canPlay = true;
var starLevel = 1;
var collectScore = 0;
var round = true;
var passLevel = false;
var yellowX = 0;
var yellowY = 0;
var yellowX2 = 0;
var yellowY2 = 0;
var yellowX3 = 0;
var yellowY3 = 0;
var numRound = 1;
var x = c.width / 10;
var xSticksLoc = x;
var contLevel = "none";
//Correct array order
for (var j = 0; j < level1; j++) {
check[j] = checkNums;
checkNums++;
}
//Creates scrambled stick numbers
for (var amt = 0; amt < level1; amt++) {
vals[amt] = num;
num++;
}
for (var amt = 0; amt < level1; amt++) {
var Position = (x / 15) + amt * (x);
sticks[amt] = {
x: Position,
y: c.height - 400,
red: false
};
}
var l = level1;
for (var amt = 0; amt < level1; amt++) {
var randomNumberGen = Math.floor(Math.random() * l);
ranVals[amt] = vals[randomNumberGen];
vals.splice(randomNumberGen, 1);
l--;
}
draw();
function draw() {
ctx.clearRect(0, 0, c.width, c.height);
ctx.font = "30px Arial";
ctx.fillText("Goal count: " + par, x*3.5, x / 2.2);
drawSticks();
drawPositions();
//drawValues(level1);
drawSwapButton();
changeColor();
requestAnimationFrame(draw);
}
function drawStarYellow() {
var base_image = new Image();
base_image.src = 'https://cazenoviacsd.com/wp-content/uploads/2019/06/yellowStar.png';
base_image.onload = function() {
ctx.drawImage(base_image, yellowX, yellowY, 95, 95);
}
}
function drawStarYellow2() {
var image = new Image();
image.src = 'https://cazenoviacsd.com/wp-content/uploads/2019/06/yellowStar.png';
image.onload = function() {
ctx.drawImage(image, yellowX2, yellowY2, 95, 95);
}
}
function drawStarYellow3() {
var image3 = new Image();
image3.src = 'https://cazenoviacsd.com/wp-content/uploads/2019/06/yellowStar.png';
image3.onload = function() {
ctx.drawImage(image3, yellowX3, yellowY3, 95, 95);
}
}
function drawValues(level) {
if (canPlay) {
ctx.fillStyle = "orange";
ctx.font = "30px Arial";
for (var amt = 0; amt < level1; amt++) {
ctx.fillText(ranVals[amt], x / 2.6 + amt * x, c.height / 2.35);
}
checkIfDone();
}
}
function drawSticks() {
if (canPlay) {
for (var amt = 0; amt < level1; amt++) {
ctx.beginPath();
ctx.rect(sticks[amt].x, c.height - (5 * x), x - 15, x * 1.25);
if (sticks[amt].red == true) {
ctx.fillStyle = "red";
} else {
ctx.fillStyle = "green";
}
ctx.fill();
ctx.closePath();
}
drawValues(level1);
}
}
function drawPositions() {
var label = 1;
for (var amt = 0; amt < level1; amt++) {
drawPosition((amt * x), label);
label++;
}
}
function drawPosition(posX, label) {
ctx.beginPath();
ctx.rect(posX, c.height - (x * 3.75), x - (x / 30), c.height);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.fillStyle = "green";
ctx.font = "30px Arial";
ctx.fillText(label, posX + (x / 2.75), (c.height / 1.1));
}
function changeColor(event) {
var mouseX = event.offsetX * c.width / c.clientWidth | 0;
var mouseY = event.offsetY * c.height / c.clientHeight | 0;
if (mouseY > c.height - (x * 3.75)) {
clickA = false;
clickB = false;
clickC = false;
}
if (mouseX < sticks[level1 - 1].x + (x - 15) && mouseY < c.height - (x * 3.75) && mouseY > c.height - (5 * x)) {
for (var amt = 0; amt < level1; amt++) {
if (mouseX > sticks[amt].x && mouseX < sticks[amt].x + (x - 15) && clickA == false){
stickA = amt;
clickA = true;
} else if (mouseX > sticks[amt].x && mouseX < sticks[amt].x + (x - 15) && clickA == true && clickB == false) {
stickB = amt;
clickB = true;
} else if (mouseX > sticks[amt].x && mouseX < sticks[amt].x + (x - 15) && clickA == true && clickB == true) {
sticks[extra].red = false;
stickC = amt;
clickA = false;
clickB = false;
clickC = true;
} else {
drawSticks();
drawValues();
}
}
}
if (clickA == true && clickB == false && clickC == false) {
sticks[stickA].red = true;
drawSticks();
firstStick = stickA;
} else if (clickA == true && clickB == true && clickC == false) {
sticks[stickB].red = true;
secondStick = stickB;
buttonColor = "red";
drawSwapButton();
drawSticks();
} else if (clickA == false && clickB == false && clickC == true) {
sticks[stickA].red = false;
sticks[stickB].red = false;
sticks[stickC].red = true;
extra = stickC;
firstStick = stickC;
clickA = true;
clickC = false;
clickB = false;
drawSticks();
buttonColor = "grey";
drawSwapButton();
} else if (clickA == false && clickB == false && clickC == false) {
sticks[stickA].red = false;
sticks[stickB].red = false;
sticks[stickC].red = false;
buttonColor = "grey";
drawSwapButton();
drawSticks();
}
if (firstStick == secondStick) {
buttonColor = "grey";
drawSwapButton();
}
}
function mouseControl(event) {
var mouseX = event.offsetX * c.width / c.clientWidth | 0;
var mouseY = event.offsetY * c.height / c.clientHeight | 0;
var status = document.getElementById('status');
status.innerHTML = mouseX + " | " + mouseY;
}
function drawSwapButton() {
ctx.beginPath();
ctx.rect(7.55 * x, 0, x * 1.875, (x * 2) / 3);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.fillStyle = buttonColor;
ctx.font = "30px Arial";
ctx.fillText("SWAP", 8 * x, x / 2.2);
ctx.beginPath();
ctx.rect(x / 5.5, 0, x * 1.45, (x * 2) / 3);
ctx.fillStyle = "black";
ctx.fill();
ctx.closePath();
ctx.fillStyle = "green";
ctx.font = "20px Arial";
ctx.fillText("COUNT: " + count, x / 3.5, x / 2.2);
}
function key(event){
if (buttonColor == "red" && firstStick !== secondStick) {
firstValue = ranVals[firstStick];
secondValue = ranVals[secondStick];
ranVals[firstStick] = secondValue;
ranVals[secondStick] = firstValue;
count++;
buttonColor = "grey";
drawSwapButton();
clickA = false;
clickB = false;
clickC = false;
changeColor(event);
checkIfDone();
} else if (buttonColor == "grey") {
ctx.fillStyle = "red";
ctx.font = "30px Arial";
ctx.fillText("NO SWAP", 7.64 * x, x / 2.25);
}
}
function swap(event) {
var mouseX = event.offsetX * c.width / c.clientWidth | 0;
var mouseY = event.offsetY * c.height / c.clientHeight | 0;
if (buttonColor == "red" && mouseX > 7.55 * x && mouseX < (7.55 * x) + (x * 1.875) && mouseY < (x * 2) / 3 && firstStick !== secondStick) {
firstValue = ranVals[firstStick];
secondValue = ranVals[secondStick];
ranVals[firstStick] = secondValue;
ranVals[secondStick] = firstValue;
count++;
buttonColor = "grey";
drawSwapButton();
clickA = false;
clickB = false;
clickC = false;
changeColor(event);
checkIfDone();
} else if (buttonColor == "grey" && mouseX > 7.55 * x && mouseX < (7.55 * x) + (x * 1.875) && mouseY < (x * 2) / 3) {
ctx.fillStyle = "red";
ctx.font = "30px Arial";
ctx.fillText("NO SWAP", 7.64 * x, x / 2.25);
}
}
function checkIfDone() {
for (var i = 0; i < level1; i++) {
if (check[i] !== ranVals[i]) {
complete = false;
i = level1;
} else {
if (i == level1 - 1) {
if (count < 1) {
drawValues();
} else {
complete = true;
showScore();
}
}
}
}
}
function showScore() {
collectScore += count;
if (complete == true) {
ctx.fillStyle = "blue";
ctx.beginPath();
ctx.rect(x * 0.5, x * 0.625, x * 8.75, x * 6.25);
ctx.fill();
canPlay = false;
if (count > par) {
yellowX = x * 2.5;
yellowY = x * 2;
drawStarYellow();
if(level1 == 10){
ctx.fillStyle = "red";
ctx.font = "60px Arial";
ctx.fillText("So close!", x * 3.5, x * 1.4375);
}else{
ctx.fillStyle = "red";
ctx.font = "60px Arial";
ctx.fillText("You solved it!", x * 2.6, x * 1.4375);
}
} else if (count == par) {
yellowX = x * 2.5;
yellowY = x * 2;
drawStarYellow();
yellowX2 = x * 4.5;
yellowY2 = x * 1.625;
drawStarYellow2();
ctx.fillStyle = "red";
ctx.font = "60px Arial";
ctx.fillText("You met goal count!!", x * 1.5, x * 1.4375);
passLevel = true;
} else if (count < par) {
yellowX = x * 2.5;
yellowY = x * 2;
drawStarYellow();
yellowX2 = x * 4.5;
yellowY2 = x * 1.625;
drawStarYellow2();
yellowX3 = x * 6.5;
yellowY3 = x * 2;
drawStarYellow3();
ctx.fillStyle = "red";
ctx.font = "60px Arial";
ctx.fillText("You beat goal count!!!", x * 1.4, x * 1.4375);
passLevel = true;
}
if (level1 == 10 && complete == true && passLevel == true) {
ctx.fillStyle = "orange";
ctx.font = "60px Arial";
ctx.fillText("CONGRATULATIONS!!", x, 4 * x);
ctx.fillStyle = "orange";
ctx.font = "40px Arial";
ctx.fillText("YOU BEAT NUMBER SWAP!!", x * 1.5, x * 4.75);
ctx.fillStyle = "red";
ctx.font = "60px Arial";
ctx.fillText("Total Score: " + collectScore, x * 2.1875, x * 5.5);
ctx.fillStyle = "purple";
ctx.font = "60px Arial";
ctx.fillText("PLAY AGAIN",x * 2.8125, x * 6.5);
} else {
ctx.fillStyle = "orange";
ctx.font = "60px Arial";
ctx.fillText("Level: " + starLevel, x * 2.1875, 4 * x);
ctx.fillStyle = "orange";
ctx.font = "60px Arial";
ctx.fillText("Total Score: " + collectScore, x * 2.1875, x * 4.75);
ctx.fillStyle = "orange";
ctx.font = "60px Arial";
ctx.fillText("Round: " + numRound + " out of 2", x * 2.1875, x * 5.5);
ctx.fillStyle = "purple";
ctx.font = "60px Arial";
ctx.fillText("CONTINUE", x * 2.8125, x * 6.5);
}
//ctx.closepath();
}
}
function contClick(event) {
var mouseX = event.offsetX * c.width / c.clientWidth | 0;
var mouseY = event.offsetY * c.height / c.clientHeight | 0;
if (mouseX > x * 2.8125 && mouseY < x * 6.5 && mouseX < (x * 2.8125) + 310 && mouseY > (x * 6.5) - 60) {
//round = true; is the first round
//round = false; is the second round
//then it resets to true again.
ctx.fillStyle = "purple";
ctx.font = "60px Arial";
ctx.fillText("ENTER CONTINUE CLICK2.0", x * 2.8125, x * 6.5);
if (passLevel == true && level1 == 10) {
levelRestart();
} else if (passLevel == true && round == true) { //met par and 1st round
numRound = 1;
round = true;
levelUp();
} else if (passLevel == true && round == false && level1 !== 10) { // met par and 2nd round
numRound = 1;
round = true;
levelUp();
} else if (passLevel == false && round == true) { //didn't meet par 1st round
numRound = 2;
round = false;
levelRepeat();
} else if (passLevel == false && round == false) { //didn't meet par 2nd round
numRound = 1;
round = true;
levelRestart();
}
}
}
function levelRepeat() {
contLevel = "level repeat";
ctx.font = "30px Arial";
ctx.fillText("Enter levelrepeat", 280, 83);
num = 1;
count = 0;
sticks[stickA].red = false;
sticks[stickB].red = false;
sticks[stickC].red = false;
clickA = false;
clickB = false;
clickC = false;
extra = 0;
stickA = 0;
stickB = 0;
stickC = 0;
secondStick = 0;
firstStick = 0;
firstValue = 0;
secondValue = 0;
complete = false;
checkNums = 1;
par = level1 - 2;
canPlay = true;
collectScore += count;
passLevel = false;
x = c.width / 10;
for (var j = 0; j < level1; j++) {
ctx.font = "20px Arial";
ctx.fillText("Enter first For loop", 400, 325);
check[j] = checkNums;
checkNums++;
}
for (var amt = 0; amt < level1; amt++) {
vals[amt] = num;
num++;
}
for (var amt = 0; amt < level1; amt++) {
var Position = (x / 15) + amt * (x);
sticks[amt] = {
x: Position,
y: c.height - 400,
red: false
};
}
var l = level1;
for (var amt = 0; amt < level1; amt++) {
var randomNumberGen = Math.floor(Math.random() * l);
ranVals[amt] = vals[randomNumberGen];
vals.splice(randomNumberGen, 1);
l--;
}
draw();
}
function levelUp() {
contLevel = "level up";
level1++;
num = 1;
count = 0;
sticks[stickA].red = false;
sticks[stickB].red = false;
sticks[stickC].red = false;
clickA = false;
clickB = false;
clickC = false;
extra = 0;
stickA = 0;
stickB = 0;
stickC = 0;
secondStick = 0;
firstStick = 0;
firstValue = 0;
secondValue = 0;
par = level1 - 2;
complete = false;
checkNums = 1;
par = level1 - 2;
canPlay = true;
starLevel++;
collectScore += count;
passLevel = false;
x = c.width / 10;
for (var j = 0; j < level1; j++) {
ctx.font = "20px Arial";
ctx.fillText("Enter first For loop", 400, 325);
check[j] = checkNums;
checkNums++;
}
for (var amt = 0; amt < level1; amt++) {
vals[amt] = num;
num++;
}
for (var amt = 0; amt < level1; amt++) {
var Position = (x / 15) + amt * (x);
sticks[amt] = {
x: Position,
y: c.height - 400,
red: false
};
}
var l = level1;
for (var amt = 0; amt < level1; amt++) {
var randomNumberGen = Math.floor(Math.random() * l);
ranVals[amt] = vals[randomNumberGen];
vals.splice(randomNumberGen, 1);
l--;
}
draw();
}
function levelRestart() {
contLevel = "level restart";
level1 = 5;
num = 1;
count = 0;
sticks[stickA].red = false;
sticks[stickB].red = false;
sticks[stickC].red = false;
clickA = false;
clickB = false;
clickC = false;
extra = 0;
stickA = 0;
stickB = 0;
stickC = 0;
secondStick = 0;
firstStick = 0;
firstValue = 0;
secondValue = 0;
par = level1 - 2;
complete = false;
checkNums = 1;
par = level1 - 2;
canPlay = true;
starLevel = 1;
collectScore = 0;
passLevel = false;
x = c.width / 10;
//var xSticksLoc = x;
for (var j = 0; j < level1; j++) {
ctx.font = "20px Arial";
ctx.fillText("Enter first For loop", 400, 325);
check[j] = checkNums;
checkNums++;
}
for (var amt = 0; amt < level1; amt++) {
vals[amt] = num;
num++;
}
for (var amt = 0; amt < level1; amt++) {
var Position = (x / 15) + amt * (x);
sticks[amt] = {
x: Position,
y: c.height - 400,
red: false
};
}
var l = level1;
for (var amt = 0; amt < level1; amt++) {
var randomNumberGen = Math.floor(Math.random() * l);
ranVals[amt] = vals[randomNumberGen];
vals.splice(randomNumberGen, 1);
l--;
}
draw();
}
//each player has two rounds/chances to get to the next level. It can be seen either as two channces to meet par or the requirement to complete two levels. But they only need to meet par one out of the two times
//for the function level up, increment level1 and starLevel and reset the canvas and recall the draw function to reset
//when the game restarts reset canplay to be true also reset count to 0
//watchout for the possible bug when someone clicks the stick locations once the score is shown use boolean canPlay to activate or deactive sticks and change color[curremt solution: boolean canPlay;]
//rearrange stick, divide canvas width by levels(10) then each position starts at x and is x-10 long
//in show score, to get the game to continue to the next level, create a continue button for the player to click. This will also includde the for loop
</script>
</body>
</html>
Report abuse