javascript - 在 HTML 中运行 JavaScript

标签 javascript html

我对编程还很陌生，所以说实话，我可能只是犯了一个非常简单的错误。我正在尝试通过在 html 中使用脚本标签来运行用 JavaScript 制作的游戏。这是未完成游戏的代码:

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();

};

将这段代码放入 HTML 标签中，将文件另存为 .html 文件，然后运行该文件，它打开一个空白页面，标题是我计算机上的文件位置。 我做错了什么？

最佳答案

将其放入您的 .html 文件中，保存它，然后在浏览器中打开它:

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

屏幕上应该出现“嗨”，并且会出现一个带有单词“kay”的警告框。

您正在跳入池子的最深处，您可能想参加有关 javascript 的类(class)。 https://www.tutorialspoint.com/javascript/

看来您需要 JavaScript 调试速成类(class)。将您的代码粘贴到您的 Something.html 中，周围是: <script>和</script>标签。像这样:

<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>

在 chrome 中打开它，然后按 Ctrl+shift+j 打开 chrome 开发者工具。 (如果是firefox，组合键会有所不同，找到开发者工具打开控制台，运行时会报错:

Uncaught ReferenceError: noStroke is not defined

那是因为你还没有定义 noStroke 方法，而 chrome 中的 javascript V8 引擎会看到它并停止，因为这种错误会导致脚本终止。

在 google chrome 浏览器中打开此链接:https://jsfiddle.net

将代码按原样粘贴到 javascript 部分。

按 Ctrl+shift+j 打开开发者工具。

点击逃跑。您将收到一个异常，表明您尚未定义方法 noStroke()并且浏览器在第 4 行停止解释您的 javascript。

如果您要上大学学习编程，他们会向您展示如何启动并运行一个 IDE，以处理后端、前端、数据库、MVC、html、javascript、css、库等等。但你还没有准备好，因为你不知道先决条件。这至少需要 2 年的努力。

关于javascript - 在 HTML 中运行 JavaScript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46479353/

上一篇：html - ionic 3 在 Windows 上访问时烦人的始终可见滚动条

下一篇：html - 用于在末尾查找、复制和插入的正则表达式

相关文章：

javascript - innerHTML 没有按预期工作

javascript - Node JS 重定向循环

html - 获取 Google 文档 HTML 内容，然后使用 GmailApp 发送

javascript - 您将如何访问动态生成的表格的特定单元格？

javascript - 我正在努力争取那一天 - Javascript

javascript - 我应该先学习 jQuery 或 Javascript，还是同时学习？

javascript - 为什么异步函数在 Promise 稍后启动后完成执行？

javascript - 移除之前设置的边框颜色

html - 标签内的div是否有任何修复

javascript - 使用 mousemove 显示叠加 ID

©2024 IT工具网  联系我们