2

I am pretty new to programming, so in all honesty, I probably just made a really simple mistake. I am trying to run a game made in JavaScript, by using script tags in html. This is the code for the unfinished game:

var bulletDrawn = false;
var bulletShot = false;
var bulletSpeed = 10;
noStroke();
var keys = [];
keyPressed = function(){keys[keyCode]=true;};
keyReleased = function(){keys[keyCode]=false;};
var fScale = 0.45;
var drawBackground = function(){
background(0);
fill(120, 103, 160);
rect(10, 24, 3, 3);
fill(5, 150, 102);
rect(224, 35, 3, 3);
fill(106, 4, 170);
rect(201, 292, 3, 3);
fill(238, 1, 141);
rect(47, 259, 3, 3);
fill(255, 42, 71);
rect(120, 81, 3, 3);
fill(96, 221, 30);
rect(337, 347, 3, 3);
fill(5, 150, 102);
rect(292, 167, 3, 3);
fill(255, 255, 255);
};
var drawFighter = function(x, y){
fill(255, 255, 255);
rect(x, y, 5, 15);
rect(x-5, y+15, 15, 10);
rect(x-5, y+25, 5, 5);
rect(x+5, y+25, 5, 5);
rect(x-25,y+40, 55, 5);
rect(x, y+35, 5, 20);
rect(x-25, y+35, 5, 20);
rect(x+25, y+35, 5, 20);
rect(x-20, y+45, 5, 5);
rect(x+20, y+45, 5, 5);
rect(x-15, y+20, 5, 10);
rect(x+15, y+20, 5, 10);
rect(x-10, y+30, 5, 10);
rect(x+10, y+30, 5, 10);
rect(x-15, y+35, 5, 5);
rect(x+15, y+35, 5, 5);
fill(75, 103, 255);
rect(x-10, y+25, 5, 5);
rect(x+10, y+25, 5, 5);
rect(x-15, y+30, 5, 5);
rect(x+15, y+30, 5, 5);
fill(255, 0, 1);
rect(x-15, y+15, 5, 5);
rect(x+15, y+15, 5, 5);
rect(x+25, y+30, 5, 5);
rect(x-25, y+30, 5, 5);
rect(x, y+25, 5, 10);
rect(x-5, y+30, 5, 10);
rect(x+5, y+30, 5, 10);
rect(x-10, y+45, 10, 5);
rect(x+5, y+45, 10, 5);
};
var drawEnemyFly = function(x, y){
fill(0, 102, 255);
rect(x, y, 2, 4);
rect(x+4, y, 2, 4);
rect(x,y+10, 6, 4);
rect(x, y+16, 6, 2);
fill(255, 255, 255);
rect(x, y+6, 6, 4);
rect(x-2, y+4, 2, 4);
rect(x+2, y+4, 2, 2);
rect(x+6, y+4, 2, 4);
rect(x, y+14, 6, 2);
fill(255, 0, 1);
rect(x, y+4, 2, 2);
rect(x+4, y+4, 2, 2);
rect(x-6, y, 2, 2);
rect(x+10, y, 2, 2);
rect(x-10, y+2, 6, 6);
rect(x+10, y+2, 6, 6);
rect(x-6, y+8, 6, 8);
rect(x+6, y+8, 6, 8);
rect(x-8, y+8, 2, 2);
rect(x+12, y+8, 2, 2);
rect(x-8, y+12, 2, 6);
rect(x+12, y+12, 2, 6);
rect(x-10, y+14, 2, 2);
rect(x+14, y+14, 2, 2);
rect(x-6, y+16, 4, 2);
rect(x+9, y+16, 5, 2);
rect(x-4, y+18, 2, 2);
rect(x+9, y+18, 2, 2);
};

var fighter = {
x:189,
y:750
};
var bullet = {
    x: fighter.x,
    y: fighter.y,
    size:3,
    drawMe: function() {
        fill(250, 250, 250);
        drawBackground();

        rect(bullet.x *fScale, bullet.y*fScale, bullet.size, bullet.size);
        }
};
var enemyFly1 = {
x:230,
y:100,
power:1
};

var checkKeys = function(){
    if(keys[LEFT] && fighter.x>25*1/fScale-25){
    fighter.x=fighter.x-4;
    } 

    if(keys[RIGHT] && fighter.x<370*1/fScale+30){
        fighter.x=fighter.x+4;
    }
    if(keyCode === 32) {
        bulletDrawn = true;
        bulletShot = true;

        bullet.x=fighter.x;
        bullet.y=fighter.y;
        }
    };
var drawBullet = function() {
   fill(255, 255, 255);
    bullet.drawMe();
    bullet.y = bullet.y - bulletSpeed;
};
var checkCollision = function(){

};
var enemyMovement = function(){
 var pFighterX = fighter.x*fScale;
    if(enemyFly1.x>pFighterX){
        enemyFly1.x=enemyFly1.x-enemyFly1.power;
      }
       if(enemyFly1.x<pFighterX){
        enemyFly1.x=enemyFly1.x+1;
      }

};

var drawMenu = function(){};
var drawScene1 = function(){
var gamePlayed = true;
checkKeys();
   enemyMovement();

    if(bulletDrawn && bullet.y <= 750) {
        fill(255, 255, 255);
        drawBullet();
    }
    if(bullet.y < 0) {
        bullet.y=fighter.y;
         bulletDrawn = false;
    }
    drawBackground();
        pushMatrix();
    scale(fScale);
    drawFighter(fighter.x, fighter.y);    
    popMatrix();

    drawEnemyFly(enemyFly1.x, enemyFly1.y);

};

draw = function() {
  drawScene1();

};

After I put this code in HTML tags, saved the file as a .html file, and then ran the file, It opened a blank page, with the title being the file location on my computer. What did I do wrong?

Hans Strausl
  • 605
  • 5
  • 11
KyleGBC
  • 21
  • 5
  • 1
    Please for anything that is holy to you: java is not javascript. They are both very different things. ;) – Dominik Sep 28 '17 at 22:54
  • sorry, typo. Meant to be javascript in the title. – KyleGBC Sep 28 '17 at 22:58
  • Welcome to Stack Overflow. You may want to review: https://stackoverflow.com/help/how-to-ask and https://stackoverflow.com/help/mcve and then edit your question, in order to assist you in getting answers that will assist you. – Degan Sep 28 '17 at 23:00

3 Answers3

2

Put this in your .html file, save it, then open it in a browser:

<html>
hi
<script>
alert("kay");
</script>
</html>

Hi should appear on the screen, and an alert box should appear with the word: "kay".

You're jumping into the deep end of the pool here, you might want to take a course on javascript. https://www.tutorialspoint.com/javascript/

Looks like you need a crash course in javascript debugging. Paste in your code into your something.html as you have it, surrounded by: <script> and </script> tags. Like this:

<script>var bulletDrawn = false;
var bulletShot = false;
var bulletSpeed = 10;
noStroke();
var keys = [];
keyPressed = function(){keys[keyCode]=true;};
keyReleased = function(){keys[keyCode]=false;};
var fScale = 0.45;
var drawBackground = function(){
background(0);
fill(120, 103, 160);
rect(10, 24, 3, 3);
fill(5, 150, 102);
rect(224, 35, 3, 3);
fill(106, 4, 170);
rect(201, 292, 3, 3);
fill(238, 1, 141);
rect(47, 259, 3, 3);
fill(255, 42, 71);
rect(120, 81, 3, 3);
fill(96, 221, 30);
rect(337, 347, 3, 3);
fill(5, 150, 102);
rect(292, 167, 3, 3);
fill(255, 255, 255);
};
var drawFighter = function(x, y){
fill(255, 255, 255);
rect(x, y, 5, 15);
rect(x-5, y+15, 15, 10);
rect(x-5, y+25, 5, 5);
rect(x+5, y+25, 5, 5);
rect(x-25,y+40, 55, 5);
rect(x, y+35, 5, 20);
rect(x-25, y+35, 5, 20);
rect(x+25, y+35, 5, 20);
rect(x-20, y+45, 5, 5);
rect(x+20, y+45, 5, 5);
rect(x-15, y+20, 5, 10);
rect(x+15, y+20, 5, 10);
rect(x-10, y+30, 5, 10);
rect(x+10, y+30, 5, 10);
rect(x-15, y+35, 5, 5);
rect(x+15, y+35, 5, 5);
fill(75, 103, 255);
rect(x-10, y+25, 5, 5);
rect(x+10, y+25, 5, 5);
rect(x-15, y+30, 5, 5);
rect(x+15, y+30, 5, 5);
fill(255, 0, 1);
rect(x-15, y+15, 5, 5);
rect(x+15, y+15, 5, 5);
rect(x+25, y+30, 5, 5);
rect(x-25, y+30, 5, 5);
rect(x, y+25, 5, 10);
rect(x-5, y+30, 5, 10);
rect(x+5, y+30, 5, 10);
rect(x-10, y+45, 10, 5);
rect(x+5, y+45, 10, 5);
};
var drawEnemyFly = function(x, y){
fill(0, 102, 255);
rect(x, y, 2, 4);
rect(x+4, y, 2, 4);
rect(x,y+10, 6, 4);
rect(x, y+16, 6, 2);
fill(255, 255, 255);
rect(x, y+6, 6, 4);
rect(x-2, y+4, 2, 4);
rect(x+2, y+4, 2, 2);
rect(x+6, y+4, 2, 4);
rect(x, y+14, 6, 2);
fill(255, 0, 1);
rect(x, y+4, 2, 2);
rect(x+4, y+4, 2, 2);
rect(x-6, y, 2, 2);
rect(x+10, y, 2, 2);
rect(x-10, y+2, 6, 6);
rect(x+10, y+2, 6, 6);
rect(x-6, y+8, 6, 8);
rect(x+6, y+8, 6, 8);
rect(x-8, y+8, 2, 2);
rect(x+12, y+8, 2, 2);
rect(x-8, y+12, 2, 6);
rect(x+12, y+12, 2, 6);
rect(x-10, y+14, 2, 2);
rect(x+14, y+14, 2, 2);
rect(x-6, y+16, 4, 2);
rect(x+9, y+16, 5, 2);
rect(x-4, y+18, 2, 2);
rect(x+9, y+18, 2, 2);
};

var fighter = {
x:189,
y:750
};
var bullet = {
    x: fighter.x,
    y: fighter.y,
    size:3,
    drawMe: function() {
        fill(250, 250, 250);
        drawBackground();

        rect(bullet.x *fScale, bullet.y*fScale, bullet.size, bullet.size);
        }
};
var enemyFly1 = {
x:230,
y:100,
power:1
};

var checkKeys = function(){
    if(keys[LEFT] && fighter.x>25*1/fScale-25){
    fighter.x=fighter.x-4;
    } 

    if(keys[RIGHT] && fighter.x<370*1/fScale+30){
        fighter.x=fighter.x+4;
    }
    if(keyCode === 32) {
        bulletDrawn = true;
        bulletShot = true;

        bullet.x=fighter.x;
        bullet.y=fighter.y;
        }
    };
var drawBullet = function() {
   fill(255, 255, 255);
    bullet.drawMe();
    bullet.y = bullet.y - bulletSpeed;
};
var checkCollision = function(){

};
var enemyMovement = function(){
 var pFighterX = fighter.x*fScale;
    if(enemyFly1.x>pFighterX){
        enemyFly1.x=enemyFly1.x-enemyFly1.power;
      }
       if(enemyFly1.x<pFighterX){
        enemyFly1.x=enemyFly1.x+1;
      }

};

var drawMenu = function(){};
var drawScene1 = function(){
var gamePlayed = true;
checkKeys();
   enemyMovement();

    if(bulletDrawn && bullet.y <= 750) {
        fill(255, 255, 255);
        drawBullet();
    }
    if(bullet.y < 0) {
        bullet.y=fighter.y;
         bulletDrawn = false;
    }
    drawBackground();
        pushMatrix();
    scale(fScale);
    drawFighter(fighter.x, fighter.y);    
    popMatrix();

    drawEnemyFly(enemyFly1.x, enemyFly1.y);

};

draw = function() {
  drawScene1();

};
</script>

Open it up in chrome and press Ctrl+shift+j to open chrome developer tools. (If firefox, the key combination will vary, find the developer tools to open the console. When you run it, You will get an error:

Uncaught ReferenceError: noStroke is not defined

That's because you haven't defined the method noStroke, and the javascript V8 engine in chrome sees it and halts because that kind of error causes a termination of the script.

Open this link in google chrome browser: https://jsfiddle.net

Paste your code into the javascript section as-is.

Press Ctrl+shift+j to open developer tools.

Hit run. You will get an exception indicating you haven't defined method noStroke() and the browser quits interpreting your javascript on line 4.

If you were to go to college for programming they show you how to get an IDE up and running that takes care of Backend, frontend, database, MVC, html, javascript, css, libraries, all that. But you aren't ready for that since you are unaware of the prerequisites. That's a 2 year endeavor, at minimum.

Eric Leschinski
  • 146,994
  • 96
  • 417
  • 335
  • I'm part way through a javascript course on KhanAcademy. I originally wrote what I have so far on the KhanAcademy project editor. I'm confused as to how I can get it from there, onto an HTML file – KyleGBC Sep 28 '17 at 23:03
  • Are you aware of how to create a file on your computer called `something.html` and open it up in a browser? If not, this is your first priority before you can concern yourself with programming javascript. – Eric Leschinski Sep 28 '17 at 23:09
  • Yes, thank you. I think noStroke(); is part of processingJS, which the editor on KhanAcademy had already. – KyleGBC Sep 28 '17 at 23:13
  • Priority one for you is to discover what file-editing tools you want to use, and which tools you want to itnerpret and debug your javascript. What operating system and browser are you using? – Eric Leschinski Sep 28 '17 at 23:16
  • Windows 10, Edge – KyleGBC Sep 28 '17 at 23:17
  • Figure out how to create a new file called `game.html`. Figure out how to open the file in a file editor to include the text above. Save the file. Tell Windows Edge program to open up your `game.html` file. Press F12 to open the developer tools. Press refresh. You should see an error in the console. Next time you post a question on stack overflow, you should include this error message. Here is a question you should be asking: https://stackoverflow.com/questions/988363/how-can-i-debug-my-javascript-code Using stackoverflow as a debugger is going to get you removed in a hurry. – Eric Leschinski Sep 28 '17 at 23:21
  • Read every word of this page and do what it says: https://msdn.microsoft.com/en-us/library/dn255007(v=vs.85).aspx Use the Edge debugging tool to have the Edge browser tell you what you did wrong. – Eric Leschinski Sep 28 '17 at 23:29
0

You can put it in an script tag like already dicussed:

<script> 
//your code
</script>

Another option is to externally reference it:

<script src="yourfilelocation.js"> </script

The second option is often preferred since you can put your html and javascript in separate files which is better for keeping an overview.

Willem van der Veen
  • 33,665
  • 16
  • 190
  • 155
0
  1. You have to add doctype into your html. Without doctype you can get into some problems with rendering mode and javascript language level.
  2. Without title tag browser will show url - in your case - path to file. Also nonemty title is required to have valid html5 document.
  3. I don't see any modifications of DOM in your script. So even if it was successfully executed, it won't show anything on the page. As there is no any static content, the page would be blank.
Qwertiy
  • 19,681
  • 15
  • 61
  • 128