Changing text in crafty.js - javascript

I have two variables (the enemies and players helath) that change when a certain event happens, the problem is that I dont know how to change text, or remove text, so I cant change the displayed health on the screen (currently I am just placing the new health ontop of the old one). Here is the relevant component.
//player character during combat
//This also controls player input during combat and resolves most of the combat
//Will display and take inputs for quesions eventually
Crafty.c('BattlePlayer', {
init:function() {
var OpPos = 1;
var HealthPas = 100 + ',' + 100;
var FightOver = false;
//Displays options for the first time with attack selected
this.requires('Actor, spr_BattlePlayer, SpriteAnimation, Keyboard')
.bind('KeyDown', function () { if (this.isDown('SPACE')) Crafty.scene('World');})
.bind('KeyDown', function () { if (this.isDown('ENTER')) HealthPas = this.BattleSelect(OpPos, HealthPas, FightOver);})
.bind('KeyDown', function () { if (this.isDown('S')) if (OpPos < 3){OpPos = OpPos + 1}; this.MenuMove(OpPos); })
.bind('KeyDown', function () { if (this.isDown('W')) if (OpPos > 1) {OpPos = OpPos - 1}; this.MenuMove(OpPos); });
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 150 })
.text(100);
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 100 })
.text(100);
Crafty.e('AttackSel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
var MenuPos = 1;
},
//function for displaying what option is currently selected
MenuMove: function(OpPos) {
switch (OpPos)
{
case 1:
//Attack case
Crafty.e('AttackSel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
break;
case 2:
//Defend case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendSel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
break;
case 3:
//Run case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunSel').at(3,18);
break;
default:
//Incorrect input case
Crafty.e('AttackUnsel').at(3,8);
Crafty.e('DefendUnsel').at(3,13);
Crafty.e('RunUnsel').at(3,18);
}
},
//function for carrying out battle options
//Within this function Num[0] represents players health and Nums[1] represents the Enemy Health.
BattleSelect: function(OpPos, HealthPas, FightOver) {
var Nums = HealthPas.split(',');
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 150 })
.text(Nums[0]);
switch (OpPos)
{
case 1:
//Attack case
if (FightOver == false)
{
Nums[1] = Nums[1] - 20;
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 100 })
.text(Nums[1]);
Crafty.audio.play('attack');
this.EndCheck(Nums[0], Nums[1], FightOver);
Nums[0] = Nums[0] - 10;
}
break;
case 2:
//Heal case
//as this was originaly a string, minus 1 to change it to an integer
Nums[0] = Nums[0] - 1 + 21;
this.EndCheck(Nums[0], Nums[1], FightOver);
break;
case 3:
//Run case
//switch checks what room the player is in the transport them back there
switch (Location)
{
case 1:
Crafty.scene('World');
break;
case 2:
Crafty.scene('HubWorld');
break;
case 3:
Crafty.scene('Yr10Tp1');
break;
case 3.1:
Crafty.scene('Yr10Tp1_1');
break;
case 3.11:
Crafty.scene('Yr10Tp1_1.1');
break;
case 3.12:
Crafty.scene('Yr10Tp1_1.2');
break;
case 3.2:
Crafty.scene('Yr10Tp1_2');
break;
case 3.3:
Crafty.scene('Yr10Tp1_1.3');
break;
case 4:
Crafty.scene('Yr10Tp2');
break;
case 5:
Crafty.scene('Yr10Tp3');
break;
case 6:
Crafty.scene('Yr11Tp1');
break;
case 7:
Crafty.scene('Yr11Tp2');
break;
case 8:
Crafty.scene('Yr11Tp3');
break;
default:
Crafty.scene('World');
}
default:
this.EndCheck(Nums[0], Nums[1]);
Nums[0] = Nums[0] - 10;
}
HealthPas = Nums[0] + ',' + Nums[1];
return HealthPas;
},
//function to check for winning conditions
EndCheck : function(PlayerHealth, EnemyHealth, FightOver)
{
if (EnemyHealth < 1)
{
FightOver = true;
monsterBeat = true;
}
else if (PlayerHealth < 1)
{
FightOver = true;
}
if (FightOver == true)
{
Crafty.e('2D, DOM, Text')
.attr({ x: 500, y: 150 })
.text('Victory!');
}
return FightOver;
},
});

Make sure to look at the documentation for text.
To set the text directly, you just call the text method of the entity. So whenever the base property changes, you could do this -- either by calling the method directly, or setting up an "UpdateHealth" event.
So, a text component might look like this:
Crafty.e('2D, DOM, Text')
.attr({ x: 200, y: 150 })
.text(Nums[0]);
.bind("UpdatePlayerHealth", function(health){this.text(health)});
And then when the player took damage, it would trigger that event with code that looks something like this:
Crafty.trigger("UpdatePlayerHealth", this.health);
The advantage of using events like this is that you don't need to carry around a reference to the text object, and you could modify other aspects of the game when a player's health changed.
If you wanted, you could pass more info in the event by using an object, such as:
Crafty.trigger("UpdatePlayerHealth", {health: this.health, damage: damageValue});
(Although of course you'd also need to adjust the bound function on the text display, since it would be passed an object rather than just a number.)

Related

Problem with a string: how to do a rating with javascript

I can't implement the function tipPercentage that takes the argument rating as a string and return the values:
terrible or poor, then returns 3
good or great, then returns 10
excellent, returns 20
none of the above, returns 0
the input format for custom testing must be that the first line contains a integer, n, denoting the value of rating
HELP FOR A BEGGINNER!!!
You can use a switch statement to do this relatively easily, we check the input rating, then return the relevant tip percentage.
If we don't have a tip percentage for the rating, we'll fall back to the default condition, and return 0.
One could also use a map, though a switch statement is probably more flexible.
// Takes rating as a string and return the tip percentage as an integer.
function tipPercentage(rating) {
switch ((rating + "").toLowerCase()) {
case "terrible":
case "poor":
return 3;
case "good":
case "great":
return 10;
case "excellent":
return 20;
default:
return 0;
}
}
let ratings = ["excellent", "good", "great", "poor", "terrible", "meh", null];
for(let rating of ratings) {
console.log(`tipPercentage(${rating}):`, tipPercentage(rating))
}
function tipPercentage(rating) {
switch(rating) {
case "terrible":
case "poor":
return 3; break;
case "good":
case "great":
return 10; break;
case "excellent":
return 20; break;
default:
return 0;
}
}
Instead of a switch statement you could simply use an object:
const tipPercentage = {
'excellent': 20,
'good': 10,
'great': 10,
'terrible': 3,
'poor': 3,
}
const myRatings = [
"excellent",
"good",
"great",
"terrible",
"whatever",
undefined
];
for (let rating of myRatings) {
// Tip percentage, or 0 if it doesn't exist
console.log(rating, tipPercentage[rating] || 0)
}

JavaScript, I can not understand switch parameter

I recently started to study javascript
I'm currently watching Javascript course in Udemy.
While code challenging, There's something I cant get it about parameter of 'switch'
let john = {
fullName: 'John Smith',
bills: [124, 48, 268, 180, 42],
calcTips: function() {
this.tips = [];
this.finalValues = [];
for (let i = 0; i < this.bills.length; i++) {
let percentage;
let bill = this.bills[i]
switch (bill) { // If I put parameter as 'bill' variation, The result is only defalut.
case bill < 50:
percentage = 0.2;
break;
case bill >= 50 && bill < 200:
percentage = 0.15;
break;
default:
percentage = 0.1;
}
this.tips[i] = bill * percentage;
this.finalValues[i] = bill + bill * percentage;
}
}
}
john.calcTips();
console.log(john);
However
let john = {
fullName: 'John Smith',
bills: [124, 48, 268, 180, 42],
calcTips: function() {
this.tips = [];
this.finalValues = [];
for (let i = 0; i < this.bills.length; i++) {
let percentage;
let bill = this.bills[i]
switch (true) { // If I put 'ture' as a parameter, It work's. Why?
case bill < 50:
percentage = 0.2;
break;
case bill >= 50 && bill < 200:
percentage = 0.15;
break;
default:
percentage = 0.1;
}
this.tips[i] = bill * percentage;
this.finalValues[i] = bill + bill * percentage;
}
}
}
john.calcTips();
console.log(john);
I've searched in google about this problem.
But I can't find specific way to solve this issue.
I'll appreciate your help.
Switch statements compare values strictly. Which means that you can compare for the exact value of the switch variable.
switch (x) {
case 1: console.log(1); break;
case 2: console.log(2); break;
}
You can do a trick however if you want to make the switch statement work on numerical ranges like this:
var x = this.dealer;
switch (true) {
case (x < 5):
alert("less than five");
break;
case (x < 9):
alert("between 5 and 8");
break;
case (x < 12):
alert("between 9 and 11");
break;
default:
alert("none");
break;
}
The implementation works on the strict comparison of booleans. The switch statement is for true and will match wherever the case is true.
Related question: Switch on ranges of integers in JavaScript
The switch statement tests the value of a variable and compares it with multiple cases. Once the case match is found, a block of statements associated with that particular case is executed. So in this case you switching on a constant value.
More detail :
javascript: using a condition in switch case

How do you dynamically update a snake in a Snake Game in Javascript?

I'm not sure if this has been asked already, but my code is a bit different than the usual snake code. I basically have some parts working already, which are:
Generate and render the board
Snake movement (with no eating and dying)
Generate a fruit randomly inside the board
Generate a fruit randomly again after being eaten
My issue now is to make the snake update and re-render itself inside the tick() every time it eats a fruit.
/**
* #returns {TickReturn}
*/
tick() {
// very simple movement code which assumes a single length snake
// no eating or dieing implemented yet.
let oldPosition = { ...this._snake[0]
};
switch (this._direction) {
case Direction.Up:
this._snake[0].y -= 1;
break;
case Direction.Down:
this._snake[0].y += 1;
break;
case Direction.Left:
this._snake[0].x -= 1;
break;
case Direction.Right:
this._snake[0].x += 1;
break;
}
if (this.eating(this._fruit)) {
this._fruit = this.nextFruitFn(); // update the position of the fruit
this.update(); // nothing's being done yet
}
return {
gameOver: this._isGameOver,
eating: false, // currently static, not doing anything yet
changes: [{
position: oldPosition,
tileValue: Tiles.Empty
},
{
position: this._snake[0],
tileValue: Tiles.Snake
},
{
position: this._fruit,
tileValue: Tiles.Fruit
}
]
};
}
eating(pos) {
let hasEaten = false;
this._snake.map((s, idx) => {
// if snake and position merged indices,
// then fruit has been eaten
hasEaten = (s.y === pos.y && s.x === pos.x) ? true : false;
if (hasEaten) {
this._board[pos.x][pos.y] = Tiles.Empty;
// make sure to clear the tile after eating
}
});
return hasEaten;
}
I am lost with two things here:
How do you update the snake array? Do you simply get the current x,y index and reduce both of them by 1? { y: y-1, x: x-1 }?
Once I successfully added the new array inside the snake, how do I properly render it in the TickReturn object? Currently, it is simply updating this._snake[0] at a position.
How do I update the switch case that will include the succeeding parts of the snake? At the moment, it can only move itself fixed at index 0, like so:
switch (this._direction) {
case Direction.Up:
this._snake[0].y -= 1;
break;
case Direction.Down:
this._snake[0].y += 1;
break;
case Direction.Left:
this._snake[0].x -= 1;
break;
case Direction.Right:
this._snake[0].x += 1;
break;
}
Is this also a similar approach if I start considering the walls? Here's a screenshot of what I have so far:

Word search game : grid generating takes too long

I'm working on a Word Search puzzle game, and I'm struggling with generating the grid with letters. At the moment, I'm able to generate the grid, but the performance is very slow (way too slow for a decent usage, it can take up to 30-40 seconds before generating the grid).
To fit words into the grid, I'm using a recursive function that tries to fit the last word from a given list, then the one before it, etc, and if it doesn't fit, backtracks to the previous word and changes its place, then tries again. I guess I'm not doing this right, because it keeps going back and forth.
I tried to use weighed probabilities for directions, so that the generating is made in a "smarter" way, but I'm not getting any results yet.
My question :
How can I optimize this code to make it more performant and reliable? I accept any suggestions, even if it makes me do a lot of changes (if there is an iterative solution for example instead of a recursive one, or if I'm not reasoning correctly in the function...).
Here is the function:
function tryWord(grid, wordList, index, gridLength){
var valid = false;
var clear = false;
if(index==(wordList.length-1)){
/* Clear grid for current index */
for(var j=0; j<gridLength.x; j++){
grid[index][j] = [];
for (var k=0; k<gridLength.y; k++){
grid[index][j][k] = '';
}
}
var nbIterations = 0;
// Try current word
while(valid == false){
// Impossible to resolve this grid
if(nbIterations>500){
return false;
}
nbIterations++;
var initX = Math.floor(Math.random() * gridLength.x); // x coord of first letter of the word
var initY = Math.floor(Math.random() * gridLength.y); // y coord of first letter of the word
var direction = Math.floor(Math.random() * 8); // direction of the word (0=top-left; 1=top; 2=top-right; 3=right; 4=bottom-right; 5=bottom; 6=bottom-left; 7=left)
valid = checkValidWord(wordList[index].length, initX, initY, direction, gridLength);
}
clear = checkClearWord(wordList[index], initX, initY, direction, grid[index]);
if(!clear){
return false;
}
var x = initX;
var y = initY;
for(var j=0; j<wordList[index].length; j++){
grid[index][x][y] = wordList[index].charAt(j);
switch(direction){
case 0:
x--;
y--;
break;
case 1:
y--;
break;
case 2:
x++;
y--;
break;
case 3:
x++;
break;
case 4:
x++;
y++;
break;
case 5:
y++;
break;
case 6:
x--;
y++;
break;
case 7:
x--;
break;
default:
break;
}
}
return grid;
}
else if(index!=(wordList.length-1)){
var emptyGrid = true;
for(var p=0; p<grid[index].length; p++){
for(var q=0; q<grid[index][p].length; q++){
if(grid[index][p][q]!=''){
emptyGrid = false;
}
}
}
if(emptyGrid || $scope.nbIterations>50){
$scope.nbIterations=0;
grid = tryWord(grid, wordList, index+1, gridLength);
}
/* Prepare grid for current index */
grid[index] = grid[index+1];
if(grid!=false){
// Try current word
while(valid == false){
var initX = Math.floor(Math.random() * gridLength.x); // x coord of first letter of the word
var initY = Math.floor(Math.random() * gridLength.y); // y coord of first letter of the word
var direction = Math.floor(Math.random() * 8); // direction of the word (0=top-left; 1=top; 2=top-right; 3=right; 4=bottom-right; 5=bottom; 6=bottom-left; 7=left)
valid = checkValidWord(wordList[index].length, initX, initY, direction, gridLength); // Check that word fits in the grid
}
clear = checkClearWord(wordList[index], initX, initY, direction, grid[index]);
// If word is obstructed by other words
if(!clear){
$scope.nbIterations++;
return tryWord(grid, wordList, index, gridLength); // Try again
}
else{
var x = initX;
var y = initY;
for(var j=0; j<wordList[index].length; j++){
grid[index][x][y] = wordList[index].charAt(j);
switch(direction){
case 0:
x--;
y--;
break;
case 1:
y--;
break;
case 2:
x++;
y--;
break;
case 3:
x++;
break;
case 4:
x++;
y++;
break;
case 5:
y++;
break;
case 6:
x--;
y++;
break;
case 7:
x--;
break;
default:
break;
}
}
return grid;
}
}
else{
return false;
}
}
}
Parameters of the function :
grid : at the beginning, just a 10x11x11 array filled with '' string.
wordList : an array of words to put in the grid
index : 0 when calling the function for the first time, then it's used to check how deep we are in the wordList
gridLength : an array : {x:11, y:11}, giving the grid length
Some more precisions about the function :
The function checkValidWord checks if a given word going to a given direction fits in a grid with a given size. Returns true or false.
The function checkClearWord checks if a given word going to a given direction fits in the grid with other words already in it (no obstruction etc). Returns true or false.
The function tryWord is supposed to output a 3-dimensional array of size [wordList.length;11;11]. I then use the grid[0] as my 2 dimensional grid for the game.

Javascript: for, switch and Math.rand in one and not working right

I'm currently working on an idle game and have encountered a problem.
I'm trying to create a function that will lessen the value of 1 of 6 variables (each represents a type of worker) a number of times. However, if one of these 6 variables is at 0, I need it to pick one of the other 5, and I can't get that to work.
With fiddling around, I have gotten this:
function killWorker(amount){
var job;
for (var i=0;i<amount;i++){
job = Math.floor((Math.random()*6)+1);
switch (job){
case 1:
if(unass_workers>0){
unass_workers -= 1;
}else{
i-=1;
}
case 2:
if(farm_workers>0){
farm_workers -= 1;
}else{
i-=1;
}
break;
case 3:
if(tree_workers>0){
tree_workers -= 1;
}else{
i-=1;
}
break;
case 4:
if(metMine_workers>0){
metMine_workers -= 1;
}else{
i-=1;
}
break;
case 5:
if(golMine_workers>0){
golMine_workers -= 1;
}else{
i-=1;
}
break;
case 6:
if(paper_workers>0){
paper_workers -= 1;
}else{
i-=1;
}
break;
default:
console.log("error: killWorker() didn't work properly");
break;
}
}
}
This worked when I did low amounts, but when I increased the amount higher the whole thing crashed. I'd be quite happy to drastically change the function if it would work better, and I am using jquery too if that could help get an easier or more effective solution.
As i said, what probably happens is that amount is larger than the sum of X_workers, resulting in an infinite loop.
A fix that keeps your logic correct would be to check that enough workers can be killed:
function killWorker(amount){
if (amount < unass_workers + farm_workers + ...) return "Genocide";
var job;
for (var i=0;i<amount;i++){
...
}
A better way to organize your data structures could be:
var workerNames = [ 'unass', 'farm', 'tree', 'metMine', 'golMine', 'paper' ];
var workers = {
unass : 23,
farm : 45,
tree : 6,
metMine : 99,
golMine : 3,
paper: 43
}
function getRandomLiveJobName() {
var jobs = workerNames.filter(function(name) {
return workers[name] > 0;
});
return jobs[Math.floor(Math.random()*jobs.length)];
}
function killWorkers(amount) {
for (;amount--;) {
var job = getRandomLiveJobName();
if (!job) return "Genocide";
workers[job]--;
}
}
killWorkers(150);
console.log(workers); // { farm: 0, golMine: 0, metMine: 64, paper: 5, tree: 0, unass: 0 }
Of course it could be optimized by not creating a new array each time you need a random live job by updating a single array inside killWorkers, but i think it's easier to read now.

Categories

Resources