So, i wanted to create the fruit but now my whole game is gone.
So not like you think i just cant see my Trees and Avatar and the important thing
I CANT SEE MY FRUITS
Yea my Url!:
https://is.gd/qoMPEG
Yikes! It looks like some code got moved around or copied & pasted in the wrong place. But I think it can be fixed.
Lines 70-72 are:
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
var code = event.code;
That is how the sendKeyDown() function is supposed to start, but the following lines are not handling that event code. Instead, the jump() function is defined, followed by a number of other functions.
Sooo… to fix, you’ll want to delete lines 70-72 (or Cut them) and then add them after the animateJumpComplete() function and just above the line: if (code == 'ArrowLeft') {. After that, your code after animateJumpComplete() should be:
function animateJumpComplete() {
avatar.position.y = 0;
}
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
var code = event.code;
if (code == 'ArrowLeft') {
marker.position.x = marker.position.x - 5;
isMovingLeft = true;
}
if (code == 'ArrowRight') {
marker.position.x = marker.position.x + 5;
isMovingRight = true;
}
if (code == 'ArrowUp') {
marker.position.z = marker.position.z - 5;
isMovingForward = true;
}
if (code == 'ArrowDown') {
marker.position.z = marker.position.z + 5;
isMovingBack = true;
}
if (code == 'KeyC') isCartwheeling = !isCartwheeling;
if (code == 'KeyF') isFlipping = !isFlipping;
if (code == 'Space') jump();
if (isColliding()) {
if (isMovingLeft) marker.position.x = marker.position.x + 5;
if (isMovingRight) marker.position.x = marker.position.x - 5;
if (isMovingForward) marker.position.z = marker.position.z + 5;
if (isMovingBack) marker.position.z = marker.position.z - 5;
}
}
That will fix the big problem, but there are still 2 smaller problems.
First, remove the animate-fruit tweens from the shakeTreasureTree() function:
function shakeTreasureTree() {
updateTreasureTreeNumber();
var tween = new TWEEN.Tween({shake: 0});
tween.to({shake: 20 * 2 * Math.PI}, 8*1000);
tween.onUpdate(shakeTreeUpdate);
tween.onComplete(shakeTreeComplete);
tween.onUpdate(animateFruitUpdate);
tween.onComplete(animateFruitComplete);
tween.start();
}
So that it looks like:
function shakeTreasureTree() {
updateTreasureTreeNumber();
var tween = new TWEEN.Tween({shake: 0});
tween.to({shake: 20 * 2 * Math.PI}, 8*1000);
tween.onUpdate(shakeTreeUpdate);
tween.onComplete(shakeTreeComplete);
tween.start();
}
We don’t want to update the fruit while the tree is shaking. We only want to update the fruit when the avatar grabs it from the tree.
The second problem is that the animateFruitUpdate() function is missing the update parameter. Instead of:
function animateFruitUpdate() {
fruit.position.y = update.height;
fruit.rotation.x = update.spin;
}
It should be:
function animateFruitUpdate(update) {
fruit.position.y = update.height;
fruit.rotation.x = update.spin;
}
After making these changes, you should have your code back in working order.
-Chris
can you maybe can copy-paste your code of the fixed code from me.
So i will delete my code and i will copy-paste your code, cuz i am a little
bit confused.
Sure, here’s your code with those fixes included:
<body></body>
<script src="/three.js"></script>
<script src="/tween.js"></script>
<script src="/scoreboard.js"></script>
<script src="/sounds.js"></script>
<script>
// The "scene" is where stuff in our game will happen:
var scene = new THREE.Scene();
var flat = {flatShading: true};
var light = new THREE.AmbientLight('white', 0.8);
scene.add(light);
// The "camera" is what sees the stuff:
var aspectRatio = window.innerWidth / window.innerHeight;
var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000);
camera.position.z = 500;
// The "renderer" draws what the camera sees onto the screen:
var renderer = new THREE.WebGLRenderer({antialias: true});
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 body = new THREE.SphereGeometry(100);
var cover = new THREE.MeshNormalMaterial();
var avatar = new THREE.Mesh(body, cover);
marker.add(avatar);
var hand = new THREE.SphereGeometry(50);
var rightHand = new THREE.Mesh(hand, cover);
rightHand.position.set(-150, 0, 0);
avatar.add(rightHand);
var hand = new THREE.SphereGeometry(50);
var leftHand = new THREE.Mesh(hand, cover);
leftHand.position.set(150, 0, 0);
avatar.add(leftHand);
var foot = new THREE.SphereGeometry(50);
var rightFoot = new THREE.Mesh(foot, cover);
rightFoot.position.set(-75, -125, 0);
avatar.add(rightFoot);
var foot = new THREE.SphereGeometry(50);
var leftFoot = new THREE.Mesh(foot, cover);
leftFoot.position.set(75, -125, 0);
avatar.add(leftFoot);
marker.add(camera);
function isColliding() {
var vector = new THREE.Vector3(0, -1, 0);
var raycaster = new THREE.Raycaster(marker.position, vector);
var intersects = raycaster.intersectObjects(notAllowed);
if (intersects.length > 0) return true;
return false;
}
function jump() {
if (avatar.position.y > 0) return;
checkForTreasure();
animateJump();
}
function checkForTreasure() {
var top = treeTops[treasureTreeNumber];
var tree = top.parent;
var p1 = tree.position;
var p2 = marker.position;
var xDiff = p1.x - p2.x;
var zDiff = p1.z - p2.z;
var distance = Math.sqrt(xDiff*xDiff + zDiff*zDiff);
if (distance < 500) scorePoints();
}
function scorePoints() {
if (scoreboard.getTimeRemaining() == 0) return;
scoreboard.addPoints(10);
Sounds.bubble.play();
animateFruit();
}
function animateJump() {
var tween = new TWEEN.Tween({jump: 0});
tween.to({jump: Math.PI}, 400);
tween.onUpdate(animateJumpUpdate);
tween.onComplete(animateJumpComplete);
tween.start();
}
var fruit;
function animateFruit() {
if (fruit) return;
fruit = new THREE.Mesh(
new THREE.CylinderGeometry(25, 25, 5, 25),
new THREE.MeshBasicMaterial({color: 'gold'})
);
marker.add(fruit);
var tween = new TWEEN.Tween({height: 200, spin: 0});
tween.to({height: 350, spin: 2 * Math.PI}, 500);
tween.onUpdate(animateFruitUpdate);
tween.onComplete(animateFruitComplete);
tween.start();
}
function animateFruitUpdate(update) {
fruit.position.y = update.height;
fruit.rotation.x = update.spin;
}
function animateFruitComplete() {
marker.remove(fruit);
fruit = undefined;
}
function animateJumpUpdate(update) {
avatar.position.y = 100 * Math.sin(update.jump);
}
function animateJumpComplete() {
avatar.position.y = 0;
}
document.addEventListener('keydown', sendKeyDown);
function sendKeyDown(event) {
var code = event.code;
if (code == 'ArrowLeft') {
marker.position.x = marker.position.x - 5;
isMovingLeft = true;
}
if (code == 'ArrowRight') {
marker.position.x = marker.position.x + 5;
isMovingRight = true;
}
if (code == 'ArrowUp') {
marker.position.z = marker.position.z - 5;
isMovingForward = true;
}
if (code == 'ArrowDown') {
marker.position.z = marker.position.z + 5;
isMovingBack = true;
}
if (code == 'KeyC') isCartwheeling = !isCartwheeling;
if (code == 'KeyF') isFlipping = !isFlipping;
if (code == 'Space') jump();
if (isColliding()) {
if (isMovingLeft) marker.position.x = marker.position.x + 5;
if (isMovingRight) marker.position.x = marker.position.x - 5;
if (isMovingForward) marker.position.z = marker.position.z + 5;
if (isMovingBack) marker.position.z = marker.position.z - 5;
}
}
document.addEventListener('keyup', sendKeyUp);
function sendKeyUp(event) {
var code = event.code;
if (code == 'ArrowLeft') isMovingLeft = false;
if (code == 'ArrowRight') isMovingRight = false;
if (code == 'ArrowUp') isMovingForward = false;
if (code == 'ArrowDown') isMovingBack = false;
}
var notAllowed = [];
var treeTops = [];
var scoreboard = new Scoreboard();
scoreboard.countdown(45);
scoreboard.score();
scoreboard.help(
'Pfeiltasten zum Bewegen. ' +
'LeerTaste zum Springen nach dem Obst. ' +
'Achte auf wackelnde Bäume mit Obst. ' +
'Gehe zu dem Baum und springe, bevor das Obst verschwunden ist!'
);
scoreboard.onTimeExpired(timeExpired);
function timeExpired() {
scoreboard.message("Das Spiel ist aus!");
}
function makeTreeAt(x, z) {
var trunk = new THREE.Mesh(
new THREE.CylinderGeometry(50, 50, 200),
new THREE.MeshBasicMaterial({color: 'sienna'})
);
var top = new THREE.Mesh(
new THREE.SphereGeometry(150),
new THREE.MeshBasicMaterial({color: 'forestgreen'})
);
top.position.y = 175;
trunk.add(top);
var boundary = new THREE.Mesh(
new THREE.CircleGeometry(300),
new THREE.MeshNormalMaterial()
);
boundary.position.y = -100;
boundary.rotation.x = -Math.PI/2;
trunk.add(boundary);
notAllowed.push(boundary);
treeTops.push(top);
trunk.position.set(x, -75, z);
scene.add(trunk);
}
makeTreeAt( 500, 0);
makeTreeAt(-500, 0);
makeTreeAt( 750, -1000);
makeTreeAt(-750, -1000);
var treasureTreeNumber;
function updateTreasureTreeNumber() {
var rand = Math.random() * treeTops.length;
treasureTreeNumber = Math.floor(rand);
}
function shakeTreasureTree() {
updateTreasureTreeNumber();
var tween = new TWEEN.Tween({shake: 0});
tween.to({shake: 20 * 2 * Math.PI}, 8*1000);
tween.onUpdate(shakeTreeUpdate);
tween.onComplete(shakeTreeComplete);
//tween.onUpdate(animateFruitUpdate);
//tween.onComplete(animateFruitComplete);
tween.start();
}
function animateFruitUpdate(update) {
fruit.position.y = update.height;
fruit.rotation.x = update.spin;
}
function animateFruitComplete() {
marker.remove(fruit);
fruit = undefined;
}
function shakeTreeUpdate(update) {
var top = treeTops[treasureTreeNumber];
top.position.x = 50 * Math.sin(update.shake);
}
function shakeTreeComplete() {
var top = treeTops[treasureTreeNumber];
top.position.x = 0;
setTimeout(shakeTreasureTree, 2*1000);
}
shakeTreasureTree();
// Now, animate what the camera sees on the screen:
var isCartwheeling = false;
var isFlipping = false;
function acrobatics() {
if (isCartwheeling) {
avatar.rotation.z = avatar.rotation.z + 0.05;
}
if (isFlipping) {
avatar.rotation.x = avatar.rotation.x + 0.05;
}
}
var clock = new THREE.Clock();
var isCartwheeling = false;
var isFlipping = false;
var isMovingRight = false;
var isMovingLeft = false;
var isMovingForward = false;
var isMovingBack = false;
var direction;
var lastDirection;
function animate() {
requestAnimationFrame(animate);
TWEEN.update();
turn();
walk();
acrobatics();
renderer.render(scene, camera);
}
animate();
function turn() {
if (isMovingRight) direction = Math.PI/2;
if (isMovingLeft) direction = -Math.PI/2;
if (isMovingForward) direction = Math.PI;
if (isMovingBack) direction = 0;
if (!isWalking) direction = 0;
if (direction == lastDirection) return;
lastDirection = direction;
var tween = new TWEEN.Tween(avatar.rotation);
tween.to({y: direction}, 600);
tween.start();
}
function walk() {
if (!isWalking()) return;
var speed = 10;
var size = 100;
var time = clock.getElapsedTime();
var position = Math.sin(speed * time) * size;
rightHand.position.z = -position;
leftHand.position.z = position;
rightFoot.position.z = -position;
leftFoot.position.z = position;
}
function isWalking() {
if (isMovingRight) return true;
if (isMovingLeft) return true;
if (isMovingForward) return true;
if (isMovingBack) return true;
return false;
}
// Now, show what the camera sees on the screen:
renderer.render(scene, camera);
</script>
One question i want when the score is smaller than 0 then the scoreboard message
too outputs: Das spiel ist vorbei but i can’t figure it out how to do it.
My code for the substraction for the Score:
function scorePointsSub() {
if (scoreboard.getTimeRemaining() == 0) return;
scoreboard.addPoints( - 10);
if (scoreboard.score > 0) scoreboard.message(“Das spiel ist aus!”);
}
yea i cant figure it out how to do it.
I’d have to see the full code to be sure, but I think all that you need to do is reverse the greater-than sign. That is, instead of a greater-than sign (>) in:
if (scoreboard.score > 0) scoreboard.message(“Das spiel ist aus!”);
}
I think you want a less-than sign (<):
if (scoreboard.score < 0) scoreboard.message(“Das spiel ist aus!”);
}
If that doesn’t work, let me know (and maybe share the whole project).
-Chris
Thanks for helping now its working