penguin

<body></body>
<script src="http://gamingJS.com/Three.js"></script>
<script src="http://gamingJS.com/Tween.js"></script>
<script src="http://gamingJS.com/ChromeFixes.js"></script>
<body></body><script>
// This is where stuff in our game will happen:
var scene = new THREE.Scene();
// This is what sees the stuff:
var aspect_ratio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000);
camera.position.z = 500;
//scene.add(camera);
// This will draw what the camera sees onto the screen:
var renderer = new THREE.CanvasRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// ******** START CODING ON THE NEXT LINE ********
var marker = new THREE.Object3D();
scene.add(marker);
var cover = new THREE.MeshNormalMaterial();
var body = new THREE.SphereGeometry(100);
var avatar = new THREE.Mesh(body, cover);


//color the background light blue
document.bgColor='#56a5ec';

//define objects

//marker to refer to avatar position by
var marker = new THREE.Object3D();
scene.add(marker);

//creates mesh covers for shapes
var cover = new THREE.MeshNormalMaterial();
var blackCover=new THREE.MeshBasicMaterial({color:0x000000});
var whiteCover=new THREE.MeshBasicMaterial({color:0xFFFFFF});
var orangeCover=new THREE.MeshBasicMaterial({color:0xFFA500});

//creates the body
var body = new THREE.CylinderGeometry(10,90,200);
var avatar = new THREE.Mesh(body, blackCover);
//associates the body to avatar
marker.add(avatar);

//defines the extremeties
var hand = new THREE.CylinderGeometry(60,80,15);
var head=new THREE.SphereGeometry(75);
var mouth=new THREE.CylinderGeometry(0,27,85);
var foot = new THREE.CylinderGeometry(20,55,20);
var belly = new THREE.CylinderGeometry(10,90,170);
var eyeball = new THREE.SphereGeometry(8);


//spawn and position body parts

//hands
var right_hand = new THREE.Mesh(hand, blackCover);
right_hand.position.set(-78,-10,0);
right_hand.rotation.set(0,0,1);
avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand, blackCover);
left_hand.position.set(78,-10,0);
left_hand.rotation.set(0,0,-1);
avatar.add(left_hand);

//feet
var right_foot = new THREE.Mesh(foot, orangeCover);
right_foot.position.set(-75,-125,0,20);
avatar.add(right_foot);

var left_foot = new THREE.Mesh(foot, orangeCover);
left_foot.position.set(75,-125,0,20);
avatar.add(left_foot);

//head
var head_box=new THREE.Mesh(head,blackCover);
head_box.position.set(0,130,0,0);
avatar.add(head_box);

var beak=new THREE.Mesh(mouth,orangeCover);
beak.position.set(0,90,100);
beak.rotation.set(90,0,0);
avatar.add(beak);

//belly
var tummy = new THREE.Mesh(belly,whiteCover);
tummy.position.set(0,-5,1);
avatar.add(tummy);
var back = new THREE.Mesh(belly,blackCover);
back.position.set(0,-5,-5);
avatar.add(back);

//eyes
var right_eye = new THREE.Mesh(eyeball, whiteCover);
right_eye.position.set(25,150,57);
avatar.add(right_eye);

var left_eye = new THREE.Mesh(eyeball, whiteCover);
left_eye.position.set(-25,150,57);
avatar.add(left_eye);


marker.add(camera);
// Trees
makeTreeAt( 500, 0);
makeTreeAt(-500, 0);
makeTreeAt( 750, -1000);
makeTreeAt(-750, -1000);
function makeTreeAt(x, z) {
var trunk = new THREE.Mesh(
new THREE.CylinderGeometry(50, 50, 200),
new THREE.MeshBasicMaterial({color: 0xA0522D})
);
var top = new THREE.Mesh(
new THREE.SphereGeometry(150),
new THREE.MeshBasicMaterial({color: 0x228B22})
);
top.position.y = 175;
trunk.add(top);
trunk.position.set(x, -75, z);
scene.add(trunk);
}
// Now, animate what the camera sees on the screen:
var clock = new THREE.Clock(true);
function animate() {

requestAnimationFrame(animate);
TWEEN.update();
walk();
turn();
acrobatics();
renderer.render(scene, camera);
}
animate();
function walk() {
if (!isWalking()) return;
var position = Math.sin(clock.getElapsedTime()*5) * 50;
right_hand.position.z = position;
left_hand.position.z = -position;
right_foot.position.z = -position;
left_foot.position.z = position;
}
function turn() {
var direction = 0;
if (is_moving_forward) direction = Math.PI;
if (is_moving_back) direction = 0;
if (is_moving_right) direction = Math.PI/2;
if (is_moving_left) direction = -Math.PI/2;
spinAvatar(direction);
}
function spinAvatar(direction) {
new TWEEN.
Tween({y: avatar.rotation.y}).
to({y: direction}, 100).
onUpdate(function () {
avatar.rotation.y = this.y;
}).
start();
}
var is_cartwheeling = false;
var is_flipping = false;
function acrobatics() {
if (is_cartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (is_flipping) {
avatar.rotation.x = avatar.rotation.x + 0.05;
}
}
var is_moving_left, is_moving_right, is_moving_forward, is_moving_back;


function isWalking() {
if (is_moving_right) return true;
if (is_moving_left) return true;
if (is_moving_forward) return true;
if (is_moving_back) return true;
return false;
}
document.addEventListener('keydown', function(event) {
var code = event.keyCode;
if (code == 37) { // left
marker.position.x = marker.position.x-5;
is_moving_left = true;
}
if (code == 38) { // up
marker.position.z = marker.position.z-5;
is_moving_forward = true;
}
if (code == 39) { // right
marker.position.x = marker.position.x+5;
is_moving_right = true;
}
if (code == 40) { // down
marker.position.z = marker.position.z+5;
is_moving_back = true;
}
if (code == 67) is_cartwheeling = !is_cartwheeling; // C
if (code == 70) is_flipping = !is_flipping; // F
});
document.addEventListener('keyup', function(event) {
var code = event.keyCode;
if (code == 37) {
console.log("not left anymore");
is_moving_left = false;
}
if (code == 38) is_moving_forward = false;
if (code == 39) is_moving_right = false;
if (code == 40) is_moving_back = false;
});
</script>