Hello everyone,
I am new here. I have zero knowledge about coding. But, I love it. Today I was trying to copy pokemon battle it into vs code. But it wasn’t working. I have linked the css and js file with the html file. But still it won’t working. Can anyone please help me with it?
Thanks
Welcome to the forum!
We kinda need to see how exactly did you link all this to procced with help
(post deleted by author)
well, there is a typo in href attribute
Can you please explain it ? 
or if you please wrote how it should be then it will great for me
in the link tag
replace herf with href
and add to this tag another attribute: rel='stylesheet'
oh thanks, I did it. But it still not working 
Yeah
You know you can paste your code here. Screenshots are hard to deal with.
<html lang="en">
<head>
<title>Document</title>
<link rel='stylesheet' href="style.scss">
<script src="script.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
<header>
<img class="logo" title="Reset Game" src="https://upload.wikimedia.org/wikipedia/commons/thumb/9/98/International_Pok%C3%A9mon_logo.svg/2000px-International_Pok%C3%A9mon_logo.svg.png" alt="Pokemon">
</header>
<main>
<div class="instructions">
<p>Choose your hero</p>
</div>
<section class="characters"></section>
<section class="stadium">
<section class="enemy"></section>
<section class="hero"></section>
</section>
<ul class="attack-list"></ul>
</main>
<div class="audio">
<audio class="sfx"></audio>
<audio class="music" loop></audio>
</div>
<div class="modal-out">
<div class="modal-in">
<header></header>
<section></section>
<footer></footer>
</div>
</div>
</body>
</html>
body{
font-family: 'helvetica neue', helvetica, arial, sans-serif;
font-size: 16px;
padding-top: 30px;
}
header{
text-align: center;
img{
max-height: 100px;
cursor: pointer;
}
}
strong{
font-weight: 600;
line-height: 1.5em;
}
.type{
display: inline-block;
height: 30px;
width: 30px;
margin: 10px;
background-image: url('http://orig15.deviantart.net/24d8/f/2011/057/3/5/ge___energy_type_icons_by_aschefield101-d3agp02.png');
background-repeat: no-repeat;
background-size: 500% 400%;
&.electric{
background-position: 100% 0;
}
&.fire{
background-position: 25% 33%;
}
&.water{
background-position: 63% 100%;
}
&.grass{
background-position: 100% 33%;
}
&.fighting{
background-position: 0 33%;
}
}
.row{
display: block;
min-height: 50px;
}
.instructions{
text-align: center;
padding: 20px 0;
p{
font-size: 2em;
}
}
.characters{
display: flex;
justify-content: space-around;
transition: visibility 0.3s ease, opacity 0.3s ease, height 0.3s ease;
&.hidden{
visibility: hidden;
opacity: 0;
height: 0;
}
}
.char-container{
width: 25%;
text-align: center;
padding: 25px 0;
cursor: pointer;
img{
max-height: 100px;
margin-bottom: 13px;
transition: transform 0.3s ease, margin 0.3s ease;
}
h2{
text-transform: capitalize;
font-size: 1.5em;
font-weight: 600;
transition: font-size 0.3s ease;
}
&:hover{
img{
transform: scale(1.3);
margin-bottom: 17px;
}
h2{
font-size: 1.2em;
}
}
}
.stadium{
background: #7DCD79;
>section{
display: block;
box-sizing: border-box;
.char{
height: 175px;
position: relative;
> *{
position: absolute;
text-transform: capitalize;
}
img{
height: 150px;
}
.data{
background: #CCC;
width: 20vw;
padding: 15px 2%;
box-sizing: border-box;
top: 25px;
progress{
width: 100%;
}
p{
text-align: right;
}
}
}
}
.enemy{
img{
right: 15vw;
}
.data{
left: 15vw;
}
}
.hero{
img{
left: 15vw;
}
.data{
right: 15vw;
}
}
}
.attack-list{
display: flex;
flex-wrap: wrap;
background: #FFFAFA;
position: initial;
transtion: opacity 0.3s ease;
text-transform: capitalize;
&.disabled{
opacity: 0.5;
position: relative;
z-index: -1;
cursor: initial;
}
li{
width: 50%;
text-align: center;
padding: 25px 0;
box-sizing: border-box;
border: 1px solid #666;
cursor: pointer;
transition: background 0.3s ease;
&:hover{
background: #EEE;
}
}
}
.modal-out{
display: none;
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: rgba(33,33,33,0.75);
z-index: 900;
.modal-in{
position: fixed;
top: 15vh;
left: 0;
right: 0;
width: 50vw;
height: 70vh;
margin: 0 auto;
background: #FFFAFA;
header{
position: relative;
min-height: 30px;
text-align: center;
padding: 10px 3%;
box-sizing: border-box;
h1{
font-size: 2.2em;
}
}
.close{
cursor: pointer;
position: absolute;
top: 13px;
right: 13px;
}
section{
box-sizing: border-box;
padding: 25px 3%;
}
}
}
/////////////////////////////////////////////
// CONTENTS
/////////////////////////////////////////////
// VARIABLES
// UTILITIES
// RANDOM NUMBER GENERATOR
// CHARACTER BUILD
// ATTACK MULTIPLIER
// SFX PLAYER
// HP BAR ANIMATION
// RESET
// CHARACTER CHOICE
// HERO ATTACK
// ENEMY ATTACK
// ATTACK SEQUENCE
// MODAL CONTROLS
/////////////////////////////////////////////
// VARIABLES
/////////////////////////////////////////////
var music = {},
typeSprite = '',
types = [],
gameData = {}
attackName = '',
curAttack = {},
randInt = 0,
enemyAttack = {},
characters = [],
defendProgressInt = null,
defendProgressComplete = 0,
progressInt = null,
progressComplete = 0;
function buildVars(){
// all the music for the game
// http://downloads.khinsider.com/game-soundtracks/album/pokemon-gameboy-sound-collection
music = {
opening: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/aipycrsoym/101-opening.mp3",
battle: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/fllwdebjsg/107-battle-vs-wild-pokemon-.mp3",
victory: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/csqodhnibz/108-victory-vs-wild-pokemon-.mp3",
pikachu: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/hpjacpzwof/170-pikachu.mp3",
charmander: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/wfwdwleyga/149-charmander.mp3",
squirtle: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/soagplijvq/152-squirtle.mp3",
bulbasaur: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/gvqmhhryki/146-bulbasaur.mp3",
machop: "http://66.90.91.26/ost/pokemon-gameboy-sound-collection/viaskmobgb/213-machop.mp3"
}
typeSprite = 'http://orig15.deviantart.net/24d8/f/2011/057/3/5/ge___energy_type_icons_by_aschefield101-d3agp02.png';
types = ['bug', 'dark', 'dragon', 'electric', 'fairy', 'fighting', 'fire', 'flying', 'ghost', 'grass', 'ground', 'ice', 'normal', 'poison', 'psychic', 'rock', 'steel', 'water'];
// the data for the game in play
gameData = {
step: 1,
hero: {},
enemy: {}
}
// attack variables
attackName = '';
curAttack = {};
randInt = 0;
enemyAttack = {};
defendProgressInt = null;
defendProgressComplete = 0;
progressInt = null;
progressComplete = 0;
// available characters
characters = [
{
name: "pikachu",
type: 'electric',
weakness: ['fighting'],
resistance: ['steel'],
img: {
default: "http://vignette2.wikia.nocookie.net/all-anime-characters/images/7/7b/Cute_pikachu_with_hat_by_mlpochea-d63xlom.png/revision/latest?cb=20150108111832",
front: "http://rs1263.pbsrc.com/albums/ii631/Pokemon-Vampire-Knight-lover/pikachu_.gif~c200",
back: "http://vignette4.wikia.nocookie.net/pokemon/images/5/5b/Pikachu_Back_XY.gif/revision/latest?cb=20141009080948"
},
hp: {
current: 500,
total: 500
},
attacks: [
{
name: "thunder jolt",
hp: randomNum(40,20),
avail: {
total: 30,
remaining: 30
}
},
{
name: "electro ball",
hp: randomNum(60,45),
avail: {
total: 10,
remaining: 10
}
},
{
name: "volt tackle",
hp: randomNum(75,60),
avail: {
total: 5,
remaining: 5
}
},
{
name: "thunder crack",
hp: randomNum(160, 130),
avail: {
total: 2,
remaining: 2
}
}
]
},
{
name: "charmander",
type: 'fire',
weakness: ['water'],
resistance: ['grass'],
img: {
default: "http://img3.wikia.nocookie.net/__cb20150330015216/pokemon/images/f/f5/004Charmander_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png",
front: "http://rs772.pbsrc.com/albums/yy9/HybridRainbow88/Charmander.gif~c200",
back: "http://vignette1.wikia.nocookie.net/pokemon/images/2/23/Charmander_Back_XY.gif/revision/latest?cb=20141009063457"
},
hp: {
current: 500,
total: 500
},
attacks: [
{
name: "ember",
hp: randomNum(40,20),
avail: {
total: 30,
remaining: 30
}
},
{
name: "flamethrower",
hp: randomNum(60,45),
avail: {
total: 10,
remaining: 10
}
},
{
name: "burning tail",
hp: randomNum(75,60),
avail: {
total: 5,
remaining: 5
}
},
{
name: "fire spin",
hp: randomNum(160, 130),
avail: {
total: 2,
remaining: 2
}
}
]
},
{
name: "squirtle",
type: 'water',
weakness: ['electric','grass'],
resistance: ['normal','fire'],
img: {
default: "http://vignette3.wikia.nocookie.net/ssbb/images/7/79/Squirtle_Rojo_Fuego_y_Verde_Hoja.png/revision/latest?cb=20130907041944&path-prefix=es",
front: "https://66.media.tumblr.com/ddd22fe10a485ed56a46d958c058a970/tumblr_n9lnpepqkW1scncwdo1_500.gif",
back: "http://vignette3.wikia.nocookie.net/pokemon/images/d/d8/Squirtle_XY_Back_Sprite.gif/revision/latest?cb=20141031154426"
},
hp: {
current: 500,
total: 500
},
attacks: [
{
name: "bubble",
hp: randomNum(40,20),
avail: {
total: 30,
remaining: 30
}
},
{
name: "water gun",
hp: randomNum(60,45),
avail: {
total: 10,
remaining: 10
}
},
{
name: "shell attack",
hp: randomNum(75,60),
avail: {
total: 5,
remaining: 5
}
},
{
name: "hydro pump",
hp: randomNum(160, 130),
avail: {
total: 2,
remaining: 2
}
}
]
},
{
name: "bulbasaur",
type: 'grass',
weakness: ['fire'],
resistance: ['water','psychic'],
img: {
default: "http://vignette4.wikia.nocookie.net/pokemon/images/8/81/001Bulbasaur_Pokemon_Mystery_Dungeon_Explorers_of_Sky.png/revision/latest?cb=20150105223818",
front: "https://media.giphy.com/media/iIWW4BM6nNWTu/giphy.gif",
back: "http://rs425.pbsrc.com/albums/pp335/Grasaldrea/ShinyBulbasauranimatedback.gif~c200",
deranged: "http://rs522.pbsrc.com/albums/w348/Richtoon18/b3617568f13aa750c57eacc45d0b2da7.gif~c200",
sleep: "https://31.media.tumblr.com/4dd7682db26ac687ef81f0dd06794652/tumblr_msesq5uAIk1r93jsro1_500.gif"
},
hp: {
current: 500,
total: 500
},
attacks: [
{
name: "tackle",
hp: randomNum(40,20),
avail: {
total: 30,
remaining: 30
}
},
{
name: "vine whip",
hp: randomNum(60,45),
avail: {
total: 10,
remaining: 10
}
},
{
name: "razor leaf",
hp: randomNum(75,60),
avail: {
total: 5,
remaining: 5
}
},
{
name: "solar beam",
hp: randomNum(160, 130),
avail: {
total: 2,
remaining: 2
}
}
]
},
{
name: "machop",
type: 'fighting',
weakness: ['psychic','electric'],
resistance: [],
img: {
default: "http://clipart.toonarific.com/data/media/11/pokemon066.gif",
front: "http://graphics.tppcrpg.net/xy/normal/066F.gif",
back: "http://pokeunlock.com/wp-content/uploads/2015/01/machop-2.gif"
},
hp: {
current: 500,
total: 500
},
attacks: [
{
name: "low kick",
hp: randomNum(40,20),
avail: {
total: 30,
remaining: 30
}
},
{
name: "karate chop",
hp: randomNum(60,45),
avail: {
total: 10,
remaining: 10
}
},
{
name: "seismic toss",
hp: randomNum(75,60),
avail: {
total: 5,
remaining: 5
}
},
{
name: "hundred furious punches",
hp: randomNum(160, 130),
avail: {
total: 2,
remaining: 2
}
}
]
}
];
}
/////////////////////////////////////////////
// UTILITY
/////////////////////////////////////////////
// RANDOM NUMBER GENERATOR
// min is optional
function randomNum(max, min){
// generate a random number
// min not required
if(min === undefined || min === '' || min === null){
// min default value
min = 0;
}
// random number, yay
return Math.floor(Math.random() * (max - min) + min);
}
// CHARACTER BUILD
// build the character UI
function populateChar(container,character){
// which img
var facing = 'front';
if(character === 'hero'){
// we see the back of our hero
// a real hero faces danger
facing = 'back';
}
// build the character
container.append('<section class="char"><img src="'+gameData[character].img[facing]+'" alt="'+gameData[character].name+'"><aside class="data"><h2>'+gameData[character].name+'</h2><div><progress max="'+gameData[character].hp.total+'"></progress><p><span>'+gameData[character].hp.current+'</span>/'+gameData[character].hp.total+'</p></div></aside></section>');
}
// ATTACK MULTIPLIER
// modify attack value for weaknesses & strengths
function attackMultiplier(attacker, curAttack){
var defender = 'enemy';
if(attacker === 'enemy'){
defender = 'hero';
}
if(gameData[defender].weakness.indexOf(gameData[attacker].type) >= 0){
// weakness exists
curAttack.hp *= 2;
}
if(gameData[defender].resistance.indexOf(gameData[attacker].type) >= 0){
// weakness exists
curAttack.hp /= 2;
}
curAttack.hp = Math.floor(curAttack.hp);
return curAttack.hp;
}
// SFX PLAYER
// stops music and plays sfx
function playSound(name){
// load sfx src
$('audio.sfx').attr('src', music[name])
// pause game music
$('audio.music')[0].pause();
// character announce yourself
$('audio.sfx')[0].play();
// timeout to stop music at given point
setTimeout(function(){
// pause the sfx
$('audio.sfx')[0].pause();
// start the music again
$('audio.music')[0].play();
// reset the sfx
$('audio.sfx')[0].currentTime = 0;
},2000);
}
// HP BAR ANIMATION
// stop and set health bar
function setHP(){
// stop health animation and set value
clearInterval(defendProgressInt);
clearInterval(progressInt);
$('.stadium .enemy progress').val(gameData.enemy.hp.current);
$('.stadium .hero progress').val(gameData.hero.hp.current);
}
/////////////////////////////////////////////
// RESET
/////////////////////////////////////////////
function resetGame(){
// set default values for game variables
buildVars();
// clear the stadium
$('.hero').empty();
$('.enemy').empty();
// reset
$('.attack-list li').unbind('click');
$('.attack-list').empty();
$('.stadium .enemy').css({'padding':'0'});
$('.instructions p').text('Choose your hero');
// set & start the opening game music
$('audio.music').attr('src',music["opening"]);
$('audio.music')[0].play();
// empty characters
$('.characters').empty();
$('.characters').removeClass('hidden');
for(var i in characters){
// build the character list
$(".characters").append('<div class="char-container"><img src="'+characters[i].img.default+'" alt="'+characters[i].name+'"><h2>'+characters[i].name+'</h2><span class="type '+characters[i].type+'"></span></div>')
}
characterChoice();
}
resetGame();
$('.logo').click(function(){resetGame();});
/////////////////////////////////////////////
// CHARACTER CHOICE
/////////////////////////////////////////////
function characterChoice(){
$('.characters .char-container').click(function(){
// you have chosen a character
// your chosen character name
var name = $(this).children('h2').text().toLowerCase();
switch(gameData.step){
// switch for the current step in the game
case 1:
// step 1: choose your hero
for(var i in characters){
if(characters[i].name === name){
// find and save your chosen hero's data
gameData.hero = characters[i];
}
}
// remove the character from the available list
var char = $(this).remove();
// build my hero
populateChar($('.stadium .hero'), 'hero');
for(var i in gameData.hero.attacks){
// populate attack list
$('.attack-list').append('<li><p class="attack-name"><strong>'+gameData.hero.attacks[i].name+'</strong></p><p class="attack-count"><small><span>'+gameData.hero.attacks[i].avail.remaining+'</span>/'+gameData.hero.attacks[i].avail.total+'</small></p></li>');
}
$('.attack-list').addClass('disabled');
// update instructions
$('.instructions p').text('Choose your enemy');
// set health bar value
$('.stadium .hero progress').val(gameData.hero.hp.current);
// let your hero roar
playSound(name);
// move on to choosing an enemy
gameData.step = 2;
break;
case 2:
// step 2: choose your enemy
for(var i in characters){
if(characters[i].name === name){
// find and save the enemy data
gameData.enemy = characters[i];
}
}
// remove the enemy from the list
var char = $(this).remove();
// build the enemy
populateChar($('.stadium .enemy'), 'enemy');
// pad the stadium - give them some breathing room
$('.stadium .enemy').css({'padding':'25px 0'});
// update instructions
$('.instructions p').text('Fight!!!');
// hide the hero list
$('.characters').children().slideUp('500', function(){
$('.characters').addClass('hidden');
});
// update enemy health bar value
$('.stadium .enemy progress').val(gameData.enemy.hp.current);
// the enemy whimpers in fear
playSound(name);
// update step to attack phase and bind click events
gameData.step = 3;
attackList();
break;
}
});
}
/////////////////////////////////////////////
// HERO ATTACK
/////////////////////////////////////////////
function attackEnemy(that, callback){
// attack the enemy!!!
// name of your attack
attackName = that.children('.attack-name').children('strong').text().toLowerCase();
for(var i in gameData.hero.attacks){
if(gameData.hero.attacks[i].name === attackName){
// get chosen attack data
curAttack = gameData.hero.attacks[i];
}
}
// if there are attacks left
if(curAttack.avail.remaining > 0){
// attack!!!
$('.attack-list').addClass('disabled');
$('.hero .char img').animate(
{
'margin-left': '-30px',
'margin-top': '10px'
},
50,
'swing'
);
$('.hero .char img').animate(
{
'margin-left': '30px',
'margin-top': '-10px'
},
50,
'swing'
);
$('.hero .char img').animate(
{
'margin-left': '0px',
'margin-top': '0px'
},
50,
'swing'
);
// attack enemy
gameData.enemy.hp.current -= attackMultiplier('hero', curAttack);
if(gameData.enemy.hp.current <= 0){
// Enemy is dead
clearModal();
$('.modal-in header').append('<h1>You Enemy is slain</h1><span class="close">x</span>');
$('.modal-in section').append('<p>Congratulations! Dare you try again?');
$('.modal-out').slideDown('400');
modalControls();
gameData.enemy.hp.current = 0;
// clear the stadium of the dead
$('.enemy').empty();
// show the available characters
$('.characters').removeClass('hidden');
$('.characters').children().slideDown('500');
gameData.enemy = {};
// choose enemy
gameData.step = 2;
// unbind click for reset
$('.attack-list li').unbind('click');
}else{
// enemy is still alive (Attack!!!)
// subtract attack
curAttack.avail.remaining--;
// interval to animate health bar
progressInt = setInterval(function(){
// get current value of health bar
var val = $('.stadium .enemy progress').val();
val--;
// update health bar value
$('.stadium .enemy progress').val(val);
if(val === gameData.enemy.hp.current){
// if you've hit your target clear interval
clearInterval(progressInt);
progressComplete = 1;
}
},1);
// update health numbers
$('.stadium .enemy .data p span').text(gameData.enemy.hp.current);
that.children('.attack-count').children('small').children('span').text(curAttack.avail.remaining);
// wait a second to recover
setTimeout(function(){
// now defend that attack
defend(that);
}, 1000);
}
}
}
/////////////////////////////////////////////
// ENEMY ATTACK (DEFEND)
/////////////////////////////////////////////
function defend(that){
// random attack
randInt = randomNum(gameData.enemy.attacks.length);
enemyAttack = gameData.enemy.attacks[randInt];
// enemy attack animation sequence
$('.enemy .char img').animate(
{
'margin-right': '-30px',
'margin-top': '-10px'
},
50,
'swing'
);
$('.enemy .char img').animate(
{
'margin-right': '30px',
'margin-top': '10px'
},
50,
'swing'
);
$('.enemy .char img').animate(
{
'margin-right': '0px',
'margin-top': '0px'
},
50,
'swing'
);
// attack the hero
gameData.hero.hp.current -= attackMultiplier('enemy', enemyAttack);
if(gameData.hero.hp.current <= 0){
// ding dong the hero's dead
clearModal();
$('.modal-in header').append('<h1>Your Hero has died</h1><span class="close">x</span>');
$('.modal-in section').append('<p>You lose, good day!');
$('.modal-out').slideDown('400');
modalControls()
gameData.hero.hp.current = 0;
resetGame();
}else{
// the hero lives
// subtract attack from enemy count
gameData.enemy.attacks[randInt].avail.remaining--;
// health bar animation
defendProgressInt = setInterval(function(){
// get current val of health bar
var val = $('.stadium .hero progress').val();
val--;
// update health bar value
$('.stadium .hero progress').val(val);
if(val === gameData.hero.hp.current){
// stop the interval when target is attained
clearInterval(defendProgressInt);
defendProgressComplete = 1;
}
},1);
// update health value
$('.stadium .hero .data p span').text(gameData.hero.hp.current);
setTimeout(function(){
if(defendProgressComplete && progressComplete){
$('.attack-list').removeClass('disabled');
}else{
setHP();
$('.attack-list').removeClass('disabled');
}
}, 500);
}
}
/////////////////////////////////////////////
// ATTACK SEQUENCE
/////////////////////////////////////////////
function attackList(){
// attack instantiation
$('.attack-list').removeClass('disabled');
$('.attack-list li').click(function(){
// attack choice is clicked
var doAttack = 1;
if(gameData.step === 3){
// attack step - start attack sequence
attackEnemy($(this));
}
});
setTimeout(function(){
// characters chosen - set & start the battle music
$('audio.music').attr('src',music["battle"]);
$('audio.music')[0].play();
},1500);
}
/////////////////////////////////////////////
// MODAL
/////////////////////////////////////////////
function modalControls(){
$('.modal-out').click(function(){
$(this).slideUp('400');
});
$('.modal-in .close').click(function(e){
$('.modal-out').slideUp('400');
});
$('.modal-in').click(function(e){
e.stopPropagation();
e.preventDefault();
});
}
function clearModal(){
$('.modal-in header').empty();
$('.modal-in section').empty();
$('.modal-in footer').empty();
setHP();
}
here are the css & js file . Please anyone help me to solve the problem 
scss can’t be used directly, you need to compile it to css first
I converted it into a css file, also changed link at style.css but still not working T_T
have you converted the syntax from sass to css?
what’s your new file like?
what’s inside your style.css?
@msarudra It might be easier to help you if you created a github account and pushed the code up to a git repo. Then we could try out your exact code on our systems.
I know that seems like a lot, but it’s really not that bad to just create a repo and push code. And it’s something that is necessary for any professional developer anyway so it can’t hurt to get started. And it’s really easy to get started on that and it would make it so much easier to help you.
