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?

Improve this question
3
  • 1
    Please for anything that is holy to you: java is not javascript. They are both very different things. ;) Commented Sep 28, 2017 at 22:54
  • sorry, typo. Meant to be javascript in the title. Commented Sep 28, 2017 at 22:58
  • Welcome to Stack Overflow. You may want to review: stackoverflow.com/help/how-to-ask and stackoverflow.com/help/mcve and then edit your question, in order to assist you in getting answers that will assist you. Commented Sep 28, 2017 at 23:00

3 Answers 3

Reset to default
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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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
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.
Yes, thank you. I think noStroke(); is part of processingJS, which the editor on KhanAcademy had already.
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?
Windows 10, Edge
|
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.

Improve this answer

Comments

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.
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.