I'm new to Javascript, I'm working on a small game to get a better handle of it. I'm trying to define a character object with methods, but for some reason I'm getting weird errors from my IDE, "Label 'updateHealth' on function statement, Missing name in function declaration". I'm just trying to figure out what I'm doing wrong. In my code, display is how the character's health display's on the screen.
function Character(display) {
this.health = 100;
this.display = display;
// updates the health on the screen
updateHealth: function() {
if(health == 100) {
this.display.innerText = 'HP: ' + health;
}
else if(health > 10 && health < 100) {
this.display.innerText = 'HP: 0' + health;
}
else if(health < 10 && health > 0) {
this.display.innerText = 'HP: 00' + health;
}
else {
this.display.innerText = 'HP: 000';
}
}
// returns true if character has died
checkForDeath: function() {
if(health <= 0) return true;
else return false;
}
// function used when damage is inflicted on
// a character object
takeDamange: function(damage) {
this.health -= damage;
}
// handles the four possible moves
// opponent is null because if player heals
// then it does not make sense for there to be
// an opponent
makeMove: function(move, opponent=null) {
switch(move) {
case 'PUNCH':
opponent.takeDamage(parseInt(Math.random() * 100) % 10);
opponent.updateHealth();
break;
case 'HEAL':
this.health += 20;
break;
case 'KICK':
opponent.takeDamage(parseInt(Math.random() * 100) % 20);
opponent.updateHealth();
break;
case 'EXTERMINATE':
opponent.takeDamage(opponent.health);
opponent.updateHealth();
break;
}
return opponent.checkForDeath();
}
}
Object's can be instantiated via a constructor function such as your Character() function however, you'll need to ensure object methods (such as updateHealth(), etc) are "attached" to the instance of the character object.
One way to achieve that is via the this keyword:
/* Attach the checkForDeath() function as a method of "this" Character instance */
this.checkForDeath = function() {
/* Accessing "this" corresponds to the instance of the character object */
if (this.health <= 0) return true;
else return false;
}
By making these changes, checkForDeath() is now defined as a member function of the corresponding character instance. You'll need to ensure that you access fields on the instance via this, as shown on this line if(this.health <= 0) { ... }
You'll also need to ensure that you instantiate instances of Character via the new operator like this:
const characterInstance = new Character( someElement );
Here is a revised version of your code demonstrating this approach:
function Character(display) {
this.health = 100;
this.display = display;
this.updateHealth = function() {
const health = this.health; /* Add this */
if (this.health == 100) {
this.display.innerText = 'HP: ' + health;
} else if (health > 10 && health < 100) {
this.display.innerText = 'HP: 0' + health;
} else if (health < 10 && health > 0) {
this.display.innerText = 'HP: 00' + health;
} else {
this.display.innerText = 'HP: 000';
}
}
this.checkForDeath = function() {
if (this.health <= 0) return true;
else return false;
}
this.takeDamange = function(damage) {
this.health -= damage;
}
this.makeMove = function(move, opponent = null) {
switch (move) {
case 'PUNCH':
opponent.takeDamage(parseInt(Math.random() * 100) % 10);
opponent.updateHealth();
break;
case 'HEAL':
this.health += 20;
break;
case 'KICK':
opponent.takeDamage(parseInt(Math.random() * 100) % 20);
opponent.updateHealth();
break;
case 'EXTERMINATE':
opponent.takeDamage(opponent.health);
opponent.updateHealth();
break;
}
return opponent.checkForDeath();
}
}
const player = new Character( document.querySelector('p') );
player.takeDamange();
player.updateHealth();
<p></p>
change : to =, and assign it to a local property, such as
this.updateHealth = function() {
...
}
I'd recommend using the class syntax.
class Character {
constructor(display) {
this.health = 100;
this.display = display;
}
// updates the health on the screen
updateHealth() {
this.display.innerText = `HP: ${Math.max(health, 0).toString().padStart(3, '0')}`;
}
// returns true if character has died
checkForDeath() {
return health <= 0;
}
// function used when damage is inflicted on
// a character object
takeDamange(damage) {
this.health -= damage;
}
// handles the four possible moves
// opponent is null because if player heals
// then it does not make sense for there to be
// an opponent
makeMove(move, opponent = null) {
switch (move) {
case 'PUNCH':
opponent.takeDamage(parseInt(Math.random() * 100) % 10);
opponent.updateHealth();
break;
case 'HEAL':
this.health += 20;
break;
case 'KICK':
opponent.takeDamage(parseInt(Math.random() * 100) % 20);
opponent.updateHealth();
break;
case 'EXTERMINATE':
opponent.takeDamage(opponent.health);
opponent.updateHealth();
break;
}
return opponent.checkForDeath();
}
}
I also did some slight refactoring, which should make it easier to understand what is happening.
Related
My game has two players that get random numbers, and the person who has the bigger number gets 1 "win". My while loop is for the "auto-roll" button, and instead of clicking "roll dice" each time, auto-roll will do it for you until one player has wins == game limit # (bestof.value). No matter where I put my setInterval it increases by a bunch at a time. If bestof.value = 10 then each interval displays at least 10 wins for one player at a time.
checkBox.checked = input checkmark that enables auto-roll feature. So this setInterval will only be active while the auto-roll loop is active.
Anyways, what am I doing wrong?
button.addEventListener("click", myFunction);
function myFunction() {
let random = Math.floor((Math.random() * 6) + 1);
let random2 = Math.floor((Math.random() * 6) + 1);
screenID.innerHTML = random;
screenIDD.innerHTML = random2;
if (random > random2){
winNumber.innerHTML = ++a;
} else if(random2 > random){
winNumba1.innerHTML = ++b;
} else {
console.log("Draw");
}
if (a > b){
winNumber.style.color = 'white';
winNumba1.style.color = 'black';
} else if(b > a){
winNumba1.style.color = 'white';
winNumber.style.color = 'black';
} else {
winNumber.style.color = 'black';
winNumba1.style.color = 'black';
}
if (checkBox.checked){
setInterval(myFunction, 2000)
while(a < bestof.value && b < bestof.value){
myFunction();
}};
if (winNumba1.innerHTML == bestof.value){
winAlert.style.display = "flex";
console.log('winNumba1 wins!');
} else if (winNumber.innterHTML == bestof.value){
winAlert.style.display = "flex";
console.log('winNumber wins!');
} else {}
};
I wrote a simplified js only version of your game here since I don't have html at hand, but I am sure you can adjust it to your environment.
Main difference: I check if someone won and use return to stop the function
If no one won and autoplay is activated I autoplay after 500ms again.
let playerA = 0
let playerB = 0
let autoPlay = true
let bestOf = 3
function myFunction() {
let random = Math.floor((Math.random() * 6) + 1);
let random2 = Math.floor((Math.random() * 6) + 1);
console.log("New Round " + random + " vs " + random2)
if (random > random2) {
playerA++
} else if (random2 > random) {
playerB++
} else {
console.log("Draw");
}
if (playerA > playerB) {
console.log("a is winning")
} else if (playerB > playerA) {
console.log("b is winning")
} else {
console.log("There has been a draw")
}
if (playerA == bestOf) {
console.log('A won');
return
} else if (playerB == bestOf) {
console.log('B won');
return
}
if (autoPlay) {
setTimeout(myFunction, 500)
};
};
myFunction()
I'm trying to get 2 objects locations, so I can make the AI I coded to not walk through walls. My problem is that it's ignoring any extra if statements when I add them to the script.
function findEntities() { //Function for finding the players position and setting the playerLeft and playerTop variables
playerLeft = parseInt(player.style.left);
playerTop = parseInt(player.style.top);
enemyLeft = parseInt(enemy.style.left);
enemyTop = parseInt(enemy.style.top);
WallLeft = parseInt(wall.style.left);
WallTop = parseInt(wall.style.top);
chooseMovement();
setTimeout(findEntities, 1000) //starting a loop.
}
findEntities();
function chooseMovement() { //Chooses the direction to move, moves on X-axis first, then Y-axis
if((playerLeft - 64) > enemyLeft) || ((WallLeft - 64) != enemyLeft) {
Right();
} else if((playerLeft + 64) < enemyLeft) {
Left();
} else if((playerTop + 64) < enemyTop) {
Up();
} else if((playerTop - 64) > enemyTop) {
Down();
} else {
damagePlayer();
}}
function Right() { //Moves the enemy right
enemy.style.left = parseInt(enemy.style.left) + 64;
enemyLeft += 64;
}
function Left() { //Moves the enemy left
enemy.style.left = parseInt(enemy.style.left) - 64;
enemyLeft -= 64;
}
function Up() { //Moves the enemy up
enemy.style.top = parseInt(enemy.style.top) - 64;
enemyTop -= 64;
}
function Down() { //Moves the enemy down
enemy.style.top = parseInt(enemy.style.top) + 64;
enemyTop += 64;
}
I'm honestly not sure what exactly is giving you issues, but one thought is to maybe define the "checks" as their own function, for example:
function chooseMovement() {
if(checkMoveRight()) {
Right();
} else if((playerLeft + 64) < enemyLeft) {
Left();
} else if((playerTop + 64) < enemyTop) {
Up();
} else if((playerTop - 64) > enemyTop) {
Down();
} else {
damagePlayer();
}
}
function checkMoveRight(){
if(playerLeft - 64 > enemyLeft){ return true }
if(WallLeft - 64 != enemyLeft){ return true }
return false
}
This introduces it's own set of problems when it comes to complexity and state and what not but extracting things out into their own definitions rather than trying to have everything exist in the primary/singular if/else call thread might be useful.
My task was to try and code the game of Pig. I am trying to have the code use a switch statement to determine which chunk of code to follow but it is skipping case 1 and case 2 and going directly to the default case. The roll.score is coming from this Javascript file:
function Dice(d1, d2){ //d1 = die 1 d2 = die 2
this.d1 = d1?d1:parseInt(Math.random()*6 + 1);
this.d2 = d2?d2:parseInt(Math.random()*6 + 1);
}
Dice.prototype.score = function(){ //d1 = die 1 d2 = die 2
if(this.d1 == 1 || this.d2 == 1){
return 1; //return score 0 for turn
}else if(this.d1 == 1 && this.d2 == 1){
return 2; //return 13 as code to reset score to 0
}else
return parseInt(this.d1 + this.d2);
}
Dice.prototype.toString = function(){
return "Rolled " + this.d1 + " and " + this.d2;
}
What it is supposed to do is return either 1, 2, or whatever the 2 number added together are. Like I mentioned above, no matter what the roll.score() returns, the switch statement always goes to the default case.
var again = true;
do {
var roll = new Dice(parseInt(Math.random() * 6 + 1), parseInt(Math.random() * 6 + 1));
window.alert(roll.toString());
turnCounter++;
switch (roll.score) {
case 1: // 1 die = 1
playerScore = roll.score();
again = false;
rollCounter++;
turnCounter++;
document.write("Enters case 1");
break;
case 2: //2 = snake eyes
playerTotal = 0;
playerScore = 0;
again = false;
rollCounter++;
turnCounter++;
break;
default:
playerScore += roll.score();
rollCounter++;
displayScore();
document.write(roll.score() + "<br/>");
var rollAgain = window.prompt("Do you want to roll again?(Y/N)");
if (rollAgain.toUpperCase() === "N") {
again = false;
playerTotal += playerScore;
displayScore();
turnCounter++;
if (playerScore > highScore)
highScore = playerScore;
}
break;
}
rollCounter++;
}while (again);
switch (roll.score) { is not the same as switch (roll.score()) {
roll.score is a function, whereas you want to switch on the result on the returned result (roll.score()).
We are using createJS and right now I am struggling with a hit test.
I get this error:
"ss.js:203 Uncaught TypeError: Cannot read property 'x' of undefined
at hitTest (ss.js:203)
at doCollisionChecking (ss.js:215)
at heartBeat (ss.js:238)
at Function.b._dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.b.dispatchEvent (createjs-2015.11.26.min.js:12)
at Function.a._tick (createjs-2015.11.26.min.js:12)
at a._handleTimeout (createjs-2015.11.26.min.js:12)"
I think the problem has to the with the 2 objects x position, but one is a player controlled character and the other object have random x value.
All the hit test example i found always consist of a static object and a moving, but this time they are both moving and i have no idea what to do.
var stage, hero, queue, circle, coin;
var coins = [];
var Score, tekst1, tekst2;
var speed = 3;
var keys = {
u: false,
d: false,
l: false,
r: false
};
var settings = {
heroSpeed: 15
};
function preload() {
"use strict";
stage = new createjs.Stage("ss");
queue = new createjs.LoadQueue(true);
queue.installPlugin(createjs.Sound);
queue.loadManifest([
{
id: 'Vacuum',
src: "img/Vacuum.png"
},
{
id: 'Dust',
src: "img/dust.png"
},
{
id: 'Pickup',
src: "sounds/pickup.mp3"
},
{
id: 'Suger',
src: "sounds/suger.wav"
},
]);
queue.addEventListener('progress', function () {
console.log("hi mom, preloading");
});
queue.addEventListener('complete', setup);
}
function setup() {
"use strict";
window.addEventListener('keyup', fingerUp);
window.addEventListener('keydown', fingerDown);
circle = new createjs.Bitmap("img/Vacuum.png");
circle.width = 40;
circle.height = 90;
stage.addChild(circle);
circle.y = 570;
circle.x = 460;
Score = new createjs.Text("0", "25px Impact", "white");
Score.x = 900;
Score.y = 680;
Score.textBaseline = "alphabetic";
stage.addChild(Score);
tekst1 = new createjs.Text("Score", "25px Impact", "white");
tekst1.x = 740;
tekst1.y = 680;
tekst1.textBaseline = "alphabetic";
stage.addChild(tekst1);
tekst2 = new createjs.Text("Bombs fallin", "40px Impact", "white");
tekst2.x = 10;
tekst2.y = 50;
tekst2.textBaseline = "alphabetic";
stage.addChild(tekst2);
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener('tick', heartBeat)
}
function addCoins() {
coin = new createjs.Bitmap("img/dust.png");
coin.x = Math.random() * 900;
coin.width = 36;
coin.height = 50;
coins.push(coin);
stage.addChild(coin);
}
function moveCoins() {
for (var i = 0; i < coins.length; i++) {
coins[i].y += speed;
}
for (var j = 0; j < coins.length; j++) {
if (coins[j].y > 650) {
console.log("hejsa");
stage.removeChild(coins[j]);
coins.splice(j, 1);
}
}
}
function maybeAddCoin() {
var rand = Math.random() * 500;
if (rand < 5) {
addCoins();
}
}
function fingerUp(e) {
"use strict";
//createjs.Sound.stop("Suger")
switch (e.keyCode) {
case 37:
keys.l = false;
break;
case 38:
keys.u = false;
break;
case 39:
keys.r = false;
break;
case 40:
keys.d = false;
break;
}
}
function fingerDown(e) {
"use strict";
switch (e.keyCode) {
case 37:
keys.l = true;
break;
case 38:
keys.u = true;
break;
case 39:
keys.r = true;
break;
case 40:
keys.d = true;
break;
}
}
function moveSlime() {
"use strict";
if (keys.l) {
circle.x -= settings.heroSpeed;
if (circle.x < 0) {
circle.x = 0;
}
if (circle.currentDirection != "left") {
circle.currentDirection = "left";
//createjs.Sound.play("Suger");
keys.u = false;
keys.r = false;
keys.d = false;
}
}
if (keys.r) {
circle.x += settings.heroSpeed;
if (circle.x > 960) {
circle.x = 960;
}
if (circle.currentDirection != "right") {
circle.currentDirection = "right";
//createjs.Sound.play("Suger")
keys.u = false;
keys.l = false;
keys.d = false;
}
}
}
function hitTest(rect1, rect2) {
if (rect1.x >= rect2.x + rect2.width || rect1.x + rect1.width <= rect2.x ||
rect1.y >= rect2.y + rect2.height || rect1.y + rect1.height <= rect2.y)
{
return false;
}
return true;
}
function doCollisionChecking() {
for (var k = coins.length - 1; k >= 0; k--) {
if (hitTest(circle, coin[k])) {
console.log("ramt");
}
}
}
function scoreTimer() {
//Score.text = parseInt(Score.text + 10);
}
function heartBeat(e) {
"use strict";
doCollisionChecking()
maybeAddCoin()
//addCoins()
moveCoins()
scoreTimer()
moveSlime()
stage.update(e);
}
window.addEventListener('load', preload);
Clearly one of your elements is undefined (either circle or coins[k]). I would start with figuring out which one.
Open your debugger.
Turn on "Pause on Exceptions" and re-run your code. When the error happens, your debugger will pause and you can inspect your code
Determine what is undefined. This should shed some light on what is causing the error
One important thing I noticed is that you are looking for rect.width when collision checking. EaselJS elements don't have a width property, so you should instead use getBounds(), which will work with Bitmaps once they are loaded.
// Example
var bounds = rect.getBounds();
var w = bounds.width, h = bounds.height;
Hope that helps!
Here's the problem:
function doCollisionChecking() {
for (var k = coins.length - 1; k >= 0; k--) {
if (hitTest(circle,
coin[k] // your array is coins, not coin
)) {
console.log("ramt");
}
}
}
It might help you in the future to pass arguments through the function instead of relying on global objects. They help you by keeping modifications to your data on tight track. With global variables, anything can modify coins from anywhere and you won't be able to tell what function it is if you have 50+ different functions editing that variable.
Here is a program that asks the user for a number (variable r) to find the positive root of, and then asks for a starting interval [a,b]. This is done in some HTML code. The javascript below it has the code for linear interpolation inside a while loop.
function everything() {
r= document.getElementById('ri').value*1;
a= document.getElementById('ai').value*1;
b= document.getElementById('bi').value*1;
bisect(function(x){return x*x-r;},a,b);
}
function bisect(f,a,b) {
var avg,fa,fb;
avg = NaN;
while (Math.abs(a-b)>1e-10) {
fa=f(a);
fb=f(b);
if(fa*fb<0) {
grad=(fb-fa)/(b-a);
avg=a-(fa/grad);
favg=f(avg);
} else {
alert('There has been an error. Redifine the interval A to B');
break;
}
if (fa*favg<0) {
b=avg;
} else {
a=avg;
}
}
alert(avg);
}
The problem with this code is it returns the error text, and the final value for avg at the end. This is a problem.
Chris said
while (Math.abs(a - b) > 1e-5) {
fa = f(a);
fb = f(b);
if (Math.abs(fa) < 1e-10) {
avg = a;
break;
}
if (Math.abs(fb) < 1e-10) {
avg = b;
break;
}
if (fa * fb < 0) {
grad = (fb - fa) / (b - a);
avg = a - fa / grad;
favg = f(avg);
//alert([a,fa,b,fb])
} else {
alert("There has been an error. Redifine the interval A to B");
break;
}
if (fa * favg < 0) {
b = avg;
} else {
a = avg;
}
}
alert(avg);