by | September 24, 2013 · 4:06 pm

Fabulous Game! – Chris, Sandra, Ezgi, and Denah

Check out our game!

Chris is the MVP.

Code:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
#container {
background-image: url(scene-02.jpg);
display: inline-block;
width: 500px;
height: 500px;
}
</style>
</head>
<body>
<div id=”container”></div>
<!– KineticJS library –>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js”></script&gt;
<!– script will not run until after the page has loaded –>
<script>
// function drawStick(imageObj) {
// //setting the stage
// var stage = new Kinetic.Stage({
// container: “container”,
// width: 1000,
// height: 1000
// });
// var layer = new Kinetic.Layer();

// background image
// var backgroundImage = new Kinetic.Image({
// image: scene.jpg,
// width: 1000,
// height: 1000,
// draggable: false
// });
// }
var walker;
var x = 6;
var y = 6;
window.onload = function() {
var stage = new Kinetic.Stage({
container: “container”,
width: 500,
height: 500
});

// var backgroundImage = new Kinetic.Image({
// image: scene.jpg,
// width: 1000,
// height: 1000,
// draggable: false
// });

// backgroundImage.src = “scene.jpg”;
// }

var backgroundImage = new Image();
backgroundImage.onload = function() {
backgroundImage = new Kinetic.Image({
x: 0,
y: 0,
image: backgroundImage,
// animation: ‘standright’,
// animations: animations,

});

}
backgroundImage.src = “scene-02.jpg”;

var layer = new Kinetic.Layer();

var animations = {
walkfront: [{
x: 64,
y: 0,
width: 31,
height: 60
}, {
x: 95,
y: 0,
width: 31,
height: 60
}, {
x: 126,
y: 0,
width: 31,
height: 60
}, {
x: 157,
y: 0,
width: 31,
height: 60
}],
standfront: [{ x: 31, y: 0, width: 31, height: 60}],
walkleft: [{
x: 64,
y: 62,
width: 31,
height: 60
}, {
x: 95,
y: 62,
width: 31,
height: 60
}, {
x: 126,
y: 62,
width: 31,
height: 60
}, {
x: 157,
y: 62,
width: 31,
height: 60
}],
standleft: [{ x: 30, y: 63, width: 31, height: 60}],
walkright: [{
x: 64,
y: 192,
width: 31,
height: 60
}, {
x: 95,
y: 192,
width: 31,
height: 60
}, {
x: 126,
y: 192,
width: 31,
height: 60
}, {
x: 157,
y: 192,
width: 31,
height: 60
}],
standright: [{ x: 31, y: 192, width: 31, height: 60}],
walkback: [{
x: 64,
y: 126,
width: 31,
height: 60
}, {
x: 95,
y: 126,
width: 31,
height: 60
}, {
x: 126,
y: 126,
width: 31,
height: 60
}, {
x: 157,
y: 126,
width: 31,
height: 60
}],
standback: [{ x: 31, y: 126, width: 31, height: 60}]

};

var imageObj = new Image();
imageObj.onload = function() {
walker = new Kinetic.Sprite({
x: 30,
y: 400,
image: imageObj,
animation: ‘standright’,
animations: animations,
frameRate: 7
});

layer.add(walker);
stage.add(layer);
walker.start();
}
imageObj.src = “spriteremix.png”;
};

function Walk(fx) {
switch(fx) {
case ‘front’:
if(walker.attrs.animation != ‘walkfront’) {
walker.setAnimation(‘walkfront’);
}
walker.setY(walker.attrs.y + y);
break;

case ‘back’:
if(walker.attrs.animation != ‘walkback’) {
walker.setAnimation(‘walkback’);
}
walker.setY(walker.attrs.y – y);
break;

case ‘right’:
if(walker.attrs.animation != ‘walkright’) {
walker.setAnimation(‘walkright’);
}
walker.setX(walker.attrs.x + x);
break;

case ‘left’:
if(walker.attrs.animation != ‘walkleft’) {
walker.setAnimation(‘walkleft’);
}
walker.setX(walker.attrs.x – x);
break;
}
}

function Stand(fx) {
switch(fx) {
case ‘Back’:
walker.setAnimation(‘standback’);
break;
case ‘Front’:
walker.setAnimation(‘standfront’);
break;
case ‘Left’:
walker.setAnimation(‘standleft’);
break;
case ‘Right’:
walker.setAnimation(‘standright’);
break;
}
}

function doKeyDown(evt) {
switch(evt.keyCode) {
case 38: /* Up arrow was pressed */
Walk(‘back’);
break;
case 40: /* Down arrow was pressed */
Walk(‘front’);
break;
case 37: /* Left arrow was pressed */
Walk(‘left’);
break;
case 39: /* Right arrow was pressed */
Walk(‘right’);
break;
}
}

function doKeyUp(evt) {
switch(evt.keyCode) {
case 38: /* Up arrow was pressed */
Stand(‘Back’);
break;
case 40: /* Down arrow was pressed */
Stand(‘Front’);
break;
case 37: /* Left arrow was pressed */
Stand(‘Left’);
break;
case 39: /* Right arrow was pressed */
Stand(‘Right’);
break;
}
}

window.addEventListener(‘keydown’, doKeyDown, true);
window.addEventListener(‘keyup’, doKeyUp, true);

</script>
</body>
</html>

scene-02 spriteremix

Leave a comment

Filed under Homework

by | September 24, 2013 · 3:19 pm

KineticJS Game Group Project

Link: http://a.parsons.edu/~zhuc966/CC%20lab%20minesweeper/

Members: Cindy, Lucy and Susan

Code:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
background-image:url(‘gamegrid.gif’);
background-repeat: no-repeat;
}
</style>
</head>
<body>
<div id=”container”></div>
<!– KineticJS library –>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js”></script&gt;
<script src=”http://code.jquery.com/jquery-2.0.3.js”></script&gt;
<!– script will not run until after the page has loaded –>
<script defer=”defer”>

function loadImages(sources, callback) {
var images = {};
var loadedImages = 0;
var numImages = 0;
//get num of sources
for(var src in sources) {
numImages++;
}
for(var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if(++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = sources[src];
}

}

function draw(images) {
var stage = new Kinetic.Stage({
container: “container”,
width: 500,
height: 500
});

//layer for background image
var layer = new Kinetic.Layer();

// background image
var gameBoard = new Kinetic.Image({
image: images.board,
width: 80,
height: 80,
draggable: false,
x: 0,
y: 0
});

layer.add(gameBoard);

/* var group = new Kinetic.Group({
draggable: false
});*/

//var x = 0;
//var y = 0;

for (var row = 0; row < 5; row++){
for (var col = 0; col < 5; col++){
(function() {
var i = col;
var j = row;
console.log(i);
var blank = new Kinetic.Rect({
x: i * 16,
y: j * 16,
width: 16,
height: 16,
fillPatternImage: images.blank,
name: i + (j * 5)
});

layer.add(blank);

//changes mouse to a pointer finger
blank.on(‘mouseover’, function() {
document.body.style.cursor = ‘pointer’;
});
//when mouse not on image, changes pointy finger back to arrow
blank.on(‘mouseout’, function() {
document.body.style.cursor = ‘default’;
});

})();

}

}

var bomb = 7;
layer.on(‘click’, function(evt){
var shape = evt.targetNode;
if(shape.index == 8 || shape.index == 10 || shape.index == 11 || shape.index == 18) {
layer.hide();
layer.draw();
alert(“GAME OVER”);

}
else{
shape.hide();
layer.draw();
}
});

stage.add(layer);

};

var sources = {
board: ‘gamegrid.gif’,
blank: ‘blank.gif’
};

loadImages(sources, function(images) {
draw(images);
});

</script>

</body>
</html>

Leave a comment

Filed under Homework

by | September 24, 2013 · 2:57 pm

KineticJS Group HW

Group members: Niamh Parsley, Pierce Wolcott, Saima Mohammad, Stephanie Farah

We started with the Mario examples shown in class and expanded on them further. We were able to add another character: Princess Peach, and alter Mario’s movement. We incorporated an onclick function “handleClick()” to begin the motion and once Mario reaches the same level as Princess Peach hearts appear.

Try it out. Just click on Mario to make the magic happen.

Our code is below:

<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
</style>
</head>
<body>
<div id=”container” onclick=”handleClick();”></div>
<!– KineticJS library –>
<script src=”http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js”></script&gt;
<!– script will not run until after the page has loaded –>
<script defer=”defer”>
var anim;
function drawMario(imageObj) {
//setting the stage
var stage = new Kinetic.Stage({
container: “container”,
width: 1024,
height: 1024
});
var layer = new Kinetic.Layer();

// background image
var backgroundImage = new Kinetic.Image({
image: bgObj,
width: 1024,
height: 1024,
draggable: false
});

//sets mario’s starting Y location
var location = 660;

// mario
var mario = new Kinetic.Image({
image: marioObj,
x: 495,
y: location,
width: 107,
height: 167,
draggable: true
});

// princess peach
var pp = new Kinetic.Image({
image: ppObj,
x: 595,
y: 190,
width: 107,
height: 167,
draggable: true
});

//hearts
var hearts = new Kinetic.Image({
image: heartsObj,
x: 545,
y: 50,
width: 107,
height: 167,
draggable: true
});

//placing layers for images
layer.add(backgroundImage);
layer.add(mario);
layer.add(pp);

stage.add(layer);

//sets max jump
var amplitude = 30;
//sets time in ms
var period = 1000;

//creating new animation
anim = new Kinetic.Animation(
function(frame) {
if (mario.getY() > pp.getY()) {
mario.setY(location – amplitude++ * (1 + Math.sin(frame.time * 2 * Math.PI / period)));
} else {
layer.add(hearts);
anim.stop();
}
},
layer);
}

//create new images
var bgObj = new Image();
var marioObj = new Image ();
var ppObj = new Image ();
var heartsObj = new Image();

//loads images
bgObj.onload = function() {
drawMario(this);
};
marioObj.onload = function() {
drawMario(this);
};
ppObj.onload = function() {
drawMario(this);
};

heartsObj.onload = function(){
anim.stop(this);
};

function handleClick() {
//starts animation
anim.start();
}

//image source
bgObj.src = ‘http://www.lovepaweena.com/CCLab/mario-bg.jpg&#8217;,
marioObj.src = ‘http://www.lovepaweena.com/CCLab/mario.png&#8217;,
ppObj.src = ‘http://images.wikia.com/fantendo/images/b/b5/Princess_Peach_SM3DW.png&#8217;;
heartsObj.src = ‘http://i472.photobucket.com/albums/rr83/dogsandcats23/4hearts.png&#8217;;

</script>

</body>
</html>

ImageImageImage

Leave a comment

Filed under Homework, Uncategorized

Tagged as ,

by | September 24, 2013 · 11:25 am

Week 05: Node.js

Here is the presentation for this week:
week05-js-node

And here is the file we will be looking at today:

http://lovepaweena.com/CCLab/04-chat.js

Leave a comment

Filed under Uncategorized

by | September 23, 2013 · 8:47 pm

#2 HW2 Canvas Animation

I really can’t fully understand canvas, I did a lot of research but it wasn’t enough.  Thank Soohyun for teaching me line by line to let me understand how canvas works.  Definitely give her credit! I love you!

My homework is not prefect at all but I am very happy I can finally make something MOVE in a cool way. I hope it’s creative enough.

I learned a lot from this homework, like the logic of canvas. However, I still have a problem to make an array for animation. Now, I just copy and paste three times in code to make three boxes move.  I want to know how to do it in my work.

Reference:
1. Basic: http://www.sitepoint.com/basic-animation-with-canvas-and-javascript/
2. Soohyun’s homework
3. Array in canvas: http://stackoverflow.com/questions/10513480/html5-canvas-array-of-images-draw-image-to-canvas

ImageImageImageImage

Leave a comment

Filed under Uncategorized

Tagged as

by | September 23, 2013 · 1:45 pm

Sharing Homework Tomorrow

Hello class! Please be prepared to talk about your group assignments tomorrow – working/not working. Thanks!

Leave a comment

Filed under Announcements

by | September 22, 2013 · 1:58 am

Weather

weatehr2 weather1

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>JSON WITH API: Weather Underground</title>

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/cc8f2eca0bb2dcaa//geolookup/conditions/q/NY/New_York.json&#8221;,
dataType : “jsonp”,
success : function(parsed_json) {
var city = parsed_json[‘location’][‘city’];
var state = parsed_json[‘location’][‘state’];
var country = parsed_json[‘location’][‘country’];
var temp = parsed_json[‘current_observation’][‘temp_f’];
var weather = parsed_json[‘current_observation’][‘weather’];
console.log(“Current temperature in ” + city + “, ” +state+”, “+country+” is ” + temp+”.”);

$(“#container”).append(“The current weather conditions in “+ city + “, ” +state+”, “+country+” consist of “+weather+”.”);

}
});
});

 
</script>

</head>

<body>
<section id=”container”>

</section>
</body>
</html>

Leave a comment

Filed under Homework

by | September 17, 2013 · 4:09 pm

Week 3 Hw

Doesn’t really work

<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Hourly Weather</title>

<script type=”text/javascript” src=”js/jquery-1.10.2.min.js”></script>

<script type=”text/javascript”>
$(document).ready(function(){
$.ajax({
url: “http://api.wunderground.com/api/b74a270099f08798/hourly/q/CA/San_Francisco.json&#8221;;,
dataType : “jsonp”,
success : function(parsed_json) {

console.log(“success!”);
var temperature = parsed_json[‘hourly’][‘temp’];
var windSpeed = parsed_json[‘hourly’][‘wspd’];
var windDirection = parsed_json[‘hourly’][‘wdir’];
var humidity = parsed_json[‘hourly’][‘humidity’];
var heatindex = parsed_json[‘hourly’][‘heatindex’];
var feelslike = parsed_json[‘hourly’][‘feelslike’];

console.log(temperature);
//console.log(“forecast = “+ forecast);
//$(“#weather”).append(“The speed of the hurricane is “+ windSpeed);
$(“#weather”).append(“Weather Hour by Hour “+ forecast);

}
});
});
</script>

</head>
<h1> Hourly Weather </h1>

<body>

<section id=”weather”></section>

</body>
</html>

Leave a comment

Filed under Homework

by | September 17, 2013 · 3:31 pm

Homework Week2

Screen shot 2013-09-17 at 3.28.48 PM

 

 

<!DOCTYPE html>
<html>
<head><meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<style>
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<canvas id=”myCanvas” width=”500″ height=”500″></canvas>
<script>
var context;
var x=500;
var y=50;
var x2=500;
var x3=500;
var x4=500;
var x5=500;
var x6=500;
var x7=500;
var x8=500;
var xx=65
var yy=250
var dx=2;
function init()
{
context= myCanvas.getContext(‘2d’);
setInterval(draw,10);
}

function draw()
{

context.clearRect(0,0,500,500);
context.beginPath();
context.strokeStyle=”black”;
context.fillStyle=”white”
context.arc(x,y,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.beginPath();
context.arc(x2,y+200,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.arc(x3,y+400,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.arc(x4,y+300,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.arc(x5,y+250,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.arc(x6,y+100,10,0,Math.PI*2,true);
context.closePath();
context.stroke();
context.beginPath();

context.arc(x7,y+350,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.arc(x8,y+470,10,0,Math.PI*2,true);
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle=”black”
context.arc(xx,yy,50,0*Math.PI,1.5*Math.PI)
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle=”black”
context.arc(xx,yy,20,0*Math.PI,Math.PI,false)
context.closePath();
context.stroke();

context.beginPath();
context.fillStyle=”black”
context.arc(xx+25,yy-25,30,1.3*Math.PI,0.2*Math.PI)
context.closePath();
context.stroke();

if(x<0) x=500;
x-=dx+3;

if(x2<0) x2=500;
x2-=dx+2;

if(x3<0) x3=500;
x3-=dx+1;

if(x4<0) x4=500;
x4-=dx+3;

if(x5<0) x5=500;
x5-=dx+5;

if(x6<0) x6=500;
x6-=dx;

if(x7<0) x7=500;
x7-=dx+4;

if(x8<0) x8=500;
x8-=dx+2;

}
</script>
<body onLoad=”init();”>
</body>

</html>

Leave a comment

Filed under Uncategorized

by | September 17, 2013 · 1:54 pm

Week 04: Advanced Canvas

Here are the slides from Week 04:

week04-js-adv-canvas-paweena

And here are the files to download:

lovepaweena.com/CCLab/week04-examples.zip

Leave a comment

Filed under Presentations