diff --git a/codingEnvironment.html b/codingEnvironment.html
index 2110d6c..d777475 100644
--- a/codingEnvironment.html
+++ b/codingEnvironment.html
@@ -62,7 +62,7 @@ CSE 190 Blockly Playground: Project 3
@@ -97,10 +108,17 @@ CSE 190 Blockly Playground: Project 3
-
-
+
+
+
+
+
+
+
+
+
-
+
@@ -139,11 +157,11 @@ CSE 190 Blockly Playground: Project 3
/********************
* Setup the Canvas *
********************/
- var canvas = document.getElementById("catAnimation");
+ var canvas = document.getElementById("spriteAnimation");
canvas.width = 480;
canvas.height = 480;
- var ctx = document.getElementById('catAnimation').getContext('2d');
+ var ctx = document.getElementById('spriteAnimation').getContext('2d');
var animation = true;
@@ -186,21 +204,48 @@ CSE 190 Blockly Playground: Project 3
var cat1 = sprite({
context: canvas.getContext("2d"),
- width: 500,
+ width: 250,
height: 500,
image: catImage,
x: 0,
y: 0
});
+
+ /********************
+ * Defining the dog *
+ ********************/
+ var dogImage = new Image();
+ dogImage.src = "images/dog1.png";
+
+ var dog1 = sprite({
+ context: canvas.getContext("2d"),
+ width: 250,
+ height: 500,
+ image: dogImage,
+ x: 250,
+ y: 0
+ });
/******************
* Show the cat *
******************/
- cat1.render();
+ cat1.render();
+
+ /******************
+ * Show the dog *
+ *******************/
+ dog1.render();
var indexToArrays = 0;
var numOfInstructions = 0;
- var arrayOfPoses = [];
+ var arrayOfCatPoses = [];
+ var arrayOfDogPoses = [];
+
+ var arrayOfWords = [];
+ var indicesToOutputWords = [];
+ var indexToWords = 0;
+
+
/**************************************
* RUN and STOP buttons on the canvas *
@@ -227,19 +272,49 @@ CSE 190 Blockly Playground: Project 3
window.requestAnimationFrame(animate);
}
- function updatePose(poseNum){
- arrayOfPoses.push(poseNum);
+
+ /**************************
+ ** update the Cat Pose **
+ **************************/
+ function updateCatPose(catPoseNum){
+ arrayOfCatPoses.push(catPoseNum);
numOfInstructions++;
- }
+ }
+
+ /**************************
+ ** update the Dog Pose **
+ **************************/
+ function updateDogPose(dogPoseNum){
+ arrayOfDogPoses.push(dogPoseNum);
+ numOfInstructions++;
+ }
+
+ /*******************
+ ** Say words ******
+ *******************/
+ function say(words) {
+ arrayOfWords.push(words);
+ indicesToOutputWords.push(numOfInstructions);
+ numOfInstructions++;
+ }
function animate() {
setTimeout(function() {
- setcatImage(arrayOfPoses[indexToArrays]);
-
+ clearCanvas();
+ setcatImage(arrayOfCatPoses[indexToArrays]);
+ setDogImage(arrayOfDogPoses[indexToArrays]);
+
+
+ if(indicesToOutputWords.indexOf(indexToArrays) != -1) {
+ setWords(arrayOfWords[indexToWords]);
+ indexToWords++;
+ }
+
indexToArrays++;
if (indexToArrays == numOfInstructions)
indexToArrays = 0;
+ indexToWords = 0;
if (animation) {
window.requestAnimationFrame(animate);
@@ -247,6 +322,8 @@ CSE 190 Blockly Playground: Project 3
}, 1000);
}
+
+
function stopCode() {
animation = false;
}
@@ -254,6 +331,7 @@ CSE 190 Blockly Playground: Project 3
function resetCanvas(){
clearCanvas();
setcatImage(1);
+ setDogImage(1);
}
/*************************************
@@ -275,13 +353,34 @@ CSE 190 Blockly Playground: Project 3
function setcatImage(catIndex){
if(!catIndex)
catIndex = 1;
- clearCanvas();
catImage.src = "images/cat"+catIndex+".png";
ctx.drawImage(cat1.image, cat1.x, cat1.y);
ctx.save();
ctx.restore();
}
+ /****************************
+ * Changing the dog's Pose *
+ ****************************/
+ function setDogImage(dogIndex){
+ if(!dogIndex)
+ dogIndex = 1;
+ dogImage.src = "images/dog"+dogIndex+".png";
+ ctx.drawImage(dog1.image, dog1.x, dog1.y);
+ ctx.save();
+ ctx.restore();
+ }
+
+ /****************************
+ ** set the word on canvas **
+ ****************************/
+ function setWords(words) {
+ ctx.font="30px Arial";
+ ctx.fillText(words, 200, 400);
+ ctx.save();
+ ctx.restore();
+ }
+
/***********************
* Clearing the Canvas *
***********************/
diff --git a/customBlocks.js b/customBlocks.js
index be860fd..c839b53 100755
--- a/customBlocks.js
+++ b/customBlocks.js
@@ -31,7 +31,7 @@ Blockly.Blocks['clearscreen'] = {
Blockly.Blocks['catpose'] = {
init: function() {
this.appendDummyInput()
- .appendField("Change Pose")
+ .appendField("Change Cat Pose")
.appendField(new Blockly.FieldDropdown([["1","1"], ["2","2"], ["3","3"]]), "catIndex");
this.setPreviousStatement(true, null);
this.setNextStatement(true, null);
@@ -41,6 +41,34 @@ Blockly.Blocks['catpose'] = {
}
};
+Blockly.Blocks['dogpose'] = {
+ init: function() {
+ this.appendDummyInput()
+ .appendField("Change Dog Pose")
+ .appendField(new Blockly.FieldDropdown([["1","1"], ["2", "2"], ["3", "3"]]), "dogIndex");
+ this.setPreviousStatement(true, null);
+ this.setNextStatement(true, null);
+ this.setColour(120);
+ this.setTooltip("");
+ this.setHelpUrl("");
+ }
+};
+
+Blockly.Blocks['animalSay'] = {
+ init: function() {
+ this.appendValueInput('text')
+ .setCheck('String')
+ .appendField('Say');
+ this.setNextStatement(true);
+ this.setPreviousStatement(true);
+ this.setInputsInline(true);
+ this.setColour(0);
+ this.setTooltip('Returns number of letters in the provided text.');
+ this.setHelpUrl('http://www.w3schools.com/jsref/jsref_length_string.asp');
+ }
+};
+
+
Blockly.JavaScript['whenrunclicked'] = function(block) {
var statements_name = Blockly.JavaScript.statementToCode(block, 'NAME');
var blockCode = statements_name;
@@ -54,6 +82,20 @@ Blockly.JavaScript['clearscreen'] = function(block) {
Blockly.JavaScript['catpose'] = function(block) {
var dropdown_catindex = block.getFieldValue('catIndex');
- var blockCode = 'updatePose('+dropdown_catindex+');';
+ var blockCode = 'updateCatPose('+dropdown_catindex+');';
+ return blockCode;
+};
+
+Blockly.JavaScript['dogpose'] = function(block) {
+ var dropdown_dogIndex = block.getFieldValue('dogIndex');
+ var blockCode = 'updateDogPose('+dropdown_dogIndex+');';
return blockCode;
};
+
+Blockly.JavaScript['animalSay'] = function(block) {
+ var words = block.getFieldValue('text');
+ var blockCode = 'say('+words+');';
+ return blockCode;
+}
+
+
diff --git a/images/dog1.png b/images/dog1.png
new file mode 100644
index 0000000..4dc57f6
Binary files /dev/null and b/images/dog1.png differ
diff --git a/images/dog1_numbered.png b/images/dog1_numbered.png
new file mode 100644
index 0000000..4dc57f6
Binary files /dev/null and b/images/dog1_numbered.png differ
diff --git a/images/dog2.png b/images/dog2.png
new file mode 100644
index 0000000..780262d
Binary files /dev/null and b/images/dog2.png differ
diff --git a/images/dog2_numbered.png b/images/dog2_numbered.png
new file mode 100644
index 0000000..780262d
Binary files /dev/null and b/images/dog2_numbered.png differ
diff --git a/images/dog3.png b/images/dog3.png
new file mode 100644
index 0000000..ec289ce
Binary files /dev/null and b/images/dog3.png differ
diff --git a/images/dog3_numbered.png b/images/dog3_numbered.png
new file mode 100644
index 0000000..ec289ce
Binary files /dev/null and b/images/dog3_numbered.png differ
+ 
+ 
+ 
+