javascript - 无法绘制 Canvas

Question

我对 html5 有一些疑问。我创建了一个新网页并在该页面的中间添加了 Canvas 。然后创建了具有 Canvas 脚本的新 js 文件并将其导入网页，但网页的 Canvas 仍然没有任何反应。

这是我的代码。根文件夹中的 index.html，css/中的 style.css，js/中的 script.js

function startnewgame(){
  score =0;
  player.hp =10;
  timewhenlasthit = Date.now();
  timewhengamestart = Date.now();
  frameCount =0;
  enemylist ={} ;
  bulletlist ={};
  upgradelist ={};
  randomspwanenemy();

}
function update(){
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  ctx.fillText("Score = "+score,200,30);
  score ++;
  frameCount++;

  if(frameCount % 100 === 0)random

spwanenemy();
  if(frameCount % 75 === 0)randomspwanupgrade();

  player.attackcounter += player.atkspd;
  updateplayerposition();
  drawplayer(player);
  for(var i in bulletlist){
    updateplayer(bulletlist[i]);
    bulletlist[i].timer++;
    var toRemove = false ;
    if (bulletlist[i].timer > 100) {
      toRemove = true;
    }
    for (var j in enemylist) {
        var cod = getdistant(bulletlist[i],enemylist[j]);
        if(cod){
          toRemove = true;
          delete enemylist[j];
          score+=1000;
          break;
        }
    }
    if(toRemove)delete bulletlist[i];
  }
  for(var i in upgradelist){
    updateplayer(upgradelist[i]);
    var temp = getdistant(player,upgradelist[i]);
    if(temp){
      if(upgradelist[i].type === 'score'){
        score += 100;
      }
      if(upgradelist[i].type ==='atkspd'){
        player.atkspd +=5;
      }
      delete upgradelist[i];
    }
  }
  for(var i in enemylist){
  updateplayer(enemylist[i]);

  var temp = getdistant(player,enemylist[i]);
  death(temp);
  }
}
function drawplayer(x){
      ctx.save();
      ctx.fillStyle = x.color;
      ctx.fillRect(x.x-x.width/2,x.y-x.height/2,x.width,x.height);
      ctx.restore();
      ctx.fillText("HP = "+player.hp,20,30);
      ctx.fillText("bullet = "+player.attackcounter,20,80);
 }
 function drawenemy(x){
   ctx.save();
      ctx.fillStyle = x.color;
      ctx.fillRect(x.x-x.width/2,x.y-x.height/2,x.width,x.height);
      ctx.restore();
 }
function updateplayer(x){
  if(x.x+x.width/2>=WIDTH){
    x.x=WIDTH-x.width/2;
    x.spdX=-x.spdX;
  }
  if(x.x-x.width/2<=0){
    x.x = x.width/2;
    x.spdX=-x.spdX;
  }
  if(x.y+x.height/2>=HEIGHT){
    x.y = HEIGHT-x.height/2;
    x.spdY=-x.spdY;
  }
  if(x.y-x.height/2<=0){
    x.y = x.height/2;
    x.spdY=-x.spdY;
  }
    x.x+=x.spdX;
    x.y+=x.spdY;
  drawenemy(x);

 }
function adde(id,x,y,spdX,spdY,width,height){
    var earth ={
    name:'A',
    x : x,
    spdX :spdX,
    y : y,
    spdY : spdY,
    id : id,
    width : width,
    height : height,
    color : 'red'
    };
    enemylist[id]= earth;
}
function addupgrade(id,x,y,spdX,spdY,width,height,color,type){
    var earth ={
    name:'A',
    x : x,
    spdX :spdX,
    y : y,
    spdY : spdY,
    id : id,
    width : width,
    height : height,
    color : color,
    type : type
    };
    upgradelist[id]= earth;
}
function addbullet(id,x,y,spdX,spdY,width,height){
    var earth ={
    name:'A',
    x : x,
    spdX :spdX,
    y : y,
    spdY : spdY,
    id : id,
    width : width,
    height : height,
    color : 'black',
    timer: 0
    };
    bulletlist[id]= earth;
}
function getdistant(earth1,earth2){
  var rect1 ={
    x:earth1.x-earth1.width/2,
    y:earth1.y-earth1.height/2,
    width:earth1.width,
    height:earth1.height
  };
  var rect2 ={
    x:earth2.x-earth2.width/2,
    y:earth2.y-earth2.height/2,
    width:earth2.width,
    height:earth2.height
  };
  return testcol(rect1,rect2);
}
function death(x){
  if(x){
    player.hp -= 1;
    if(player.hp == 0){
      var ttime = Date.now() - timewhengamestart;
      timewhengamestart = Date.now();
      console.log("DEAD!! you score "+ score );
    startnewgame();
    }

  }

}
function randomspwanenemy(){
  var x = Math.random()*WIDTH;
  var y = Math.random()*HEIGHT;
  var height = 10 +Math.random()*30;
  var width= 10 + Math.random()*30;
  var spdY = Math.random()*5 +5;
  var spdX = Math.random()*5 +5;
  var id = Math.random();
  //console.log(x,y,height,width,spdX,spdY);
  adde(id,x,y,spdX,spdY,width,height);
 }
 function randomspwanupgrade(){
   var x = Math.random()*WIDTH;
   var y = Math.random()*HEIGHT;
   var height = 10 ;
   var width= 10 ;
   var spdY = 0;
   var spdX = 0;
   var id = Math.random();
   var sample = Math.random();
   if(sample >0.5){
     var type = 'score';
      var color ='lightblue';
   }
   else {
     var type = 'atkspd';
      var color = 'purple';
   }
   addupgrade(id,x,y,spdX,spdY,width,height,color,type);
  }
  function randomspwanbullet(earth,overangle){
    var x = player.x;
    var y = player.y;
    var height = 10 ;
    var width= 10 ;
    //var tid = pp(Math.random());
    var angle = earth.aimAngle;
    if (overangle !== undefined) {
      angle = overangle;
    }
    var spdY = (Math.sin(angle)*10 );
    var spdX = (Math.cos(angle)*10 );
    var id = Math.random();
    addbullet(id,x,y,spdX,spdY,width,height);
   }
function testcol(earth1,earth2){
  var lasthit = Date.now()-timewhenlasthit;
   if( earth1.x <= earth2.x+earth2.width
       && earth2.x <= earth1.x+earth1.width
       && earth1.y <= earth2.y+earth2.height
       && earth2.y <= earth1.y+earth1.height
       && lasthit >= 1000)
       {
         timewhenlasthit=Date.now();
         return 1;
       }
}
function pp(x){
  if(x>0.5)return 1;
  else return -1;
}

var canvas = document.getElementById("ctx")
var ctx = canvas.getContext('2d');
var frameCount =0;
ctx.font = '30 px Arial';
var score =0
var HEIGHT = 500;
var WIDTH = 500;
var timewhengamestart = Date.now();
var timewhenlasthit = Date.now();
document.onmousemove = function(mouse){
  var mouseX = mouse.clientX- document.getElementById('ctx').getBoundingClientRect().left;
    var mouseY = mouse.clientY-document.getElementById('ctx').getBoundingClientRect().top;;
  mouseX -= player.x;
  mouseY -= player.y;
  player.aimAngle = Math.atan2(mouseY,mouseX) ;
  /*  if(mouseX <player.width/2)mouseX=player.width/2;
    if(mouseX>WIDTH-player.width/2)mouseX = WIDTH-player.width/2;
    if(mouseY<player.height/2)mouseY=player.height/2;
    if(mouseY>HEIGHT-player.height/2)mouseY = HEIGHT-player.height/2;
    player.x = mouseX;
    player.y = mouseY;*/
  }
document.onclick = function(mouse){
  if (player.attackcounter > 25) {
    randomspwanbullet(player,player.aimAngle);
    player.attackcounter = 0;
  }
}
document.oncontextmenu = function(mouse){
  if (player.attackcounter > 1000) {
    for (var i = 1; i < 361; i++) {
      randomspwanbullet(player,i);
    }
    player.attackcounter = 0;
  }
  mouse.preventDefault();
}
document.onkeydown = function(event){
  if (event.keyCode===68) {
    player.pressingRight = true;
  }
  else if (event.keyCode===83) {
    player.pressingDown = true ;
  }
  else if (event.keyCode===65) {
    player.pressingLeft = true ;
  }
  else if (event.keyCode===87) {
    player.pressingUp = true ;
  }
}
document.onkeyup = function(event){
  if (event.keyCode===68) {
    player.pressingRight = false;
  }
  else if (event.keyCode===83) {
    player.pressingDown = false ;
  }
  else if (event.keyCode===65) {
    player.pressingLeft = false ;
  }
  else if (event.keyCode===87) {
    player.pressingUp = false ;
  }
}
function updateplayerposition() {
  if(player.pressingRight)player.x+=10
  if(player.pressingLeft)player.x-=10
  if(player.pressingUp)player.y-=10
  if(player.pressingDown)player.y+=10
  if(player.x <player.width/2)player.x=player.width/2;
  if(player.x>WIDTH-player.width/2)player.x = WIDTH-player.width/2;
  if(player.y<player.height/2)player.y=player.height/2;
  if(player.y>HEIGHT-player.height/2)player.y = HEIGHT-player.height/2;
}
var player = {
   name  :'E' ,
   x  : 40 ,
   spdX  : 30 ,
   y  : 40 ,
   spdY : 5 ,
   hp  : 10 ,
   width  : 20 ,
   height  : 20,
   atkspd : 1,
   color : 'green',
   attackcounter : 0,
   pressingDown : false,
   pressingUp : false,
   pressingLeft : false,
   pressingRight : false,
   aimAngle : 0
  };
var enemylist ={};
var upgradelist = {};
var bulletlist = {};
function drawCanvas() {
  startnewgame();
  setInterval(update,40);
}

#header{
  background: #202020 ;
  font-size: 36px;
  text-align: center;
  padding:0;
  margin: 0;
  font-style: italic;
  color: #FFFFFF;
}
#ctx{
  border: 2px solid #000000;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  margin-top: 20px;
  position: absolute;
  background: #ffffff;
}

#leftmenu{
  margin-top: 20px;
  margin-bottom: 65px;
  padding-right: 10px;
  float: left;
  width: 300px;
  height: 580px;
  background: #C8C8C8;
  border-radius: 10px;
  border: 10px solid #002699;

}

nav#leftmenu h2{
  text-align: center;
  font-size: 30px;
}

nav#leftmenu ul{
  list-style: none;
  padding: 0;
}

nav#leftmenu li{
  list-style: none;
  font-size: 24px;
  margin-top: 20px;
  border-bottom: 2px dashed #000;
  margin-left: 0px;
  text-align: center;
}

nav#leftmenu a{
  text-decoration: none;
  font-weight: bold;
  color: #1c478e;
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>A Awesome Game</title>
    <link href="css/style.css" rel="stylesheet">
    <script src="js/script.js"  type="text/javascript"></script>
  </head>
  <body onload="drawCanvas();" style="background: linear-gradient(to bottom left, #0000ff -10%, #33ccff 100%);">
    <h1 id="header">Welcome to my GAME!!</h1>
    <!--Canvas-->
    <canvas id ="ctx" width ="800" height="600" style = "border:1px solid #000000;"></canvas>

    <!--leftMenu-->
    <section>
      <nav id="leftmenu">
        <h2>Menu</h2>
        <ul>
          <li><a href="#" onclick="startnewgame();">New Game</a></li>
          <li><a href="#">Pause Game</a></li>
          <li><a href="#">Option</a></li>
          <li><a href="#" onclick="alert('Game End')">End it now</a></li>
        </ul>
      </nav>
    </section>
  </body>
  </html>

附言。这是我的第一篇文章，如果我做错了什么，抱歉。

编辑:从canvas到ctx的canvas id

Answer 1

这是一个可以正常工作和绘制的片段。这只是更新函数中的一个小错字，写成这样:

    if (frameCount % 100 === 0) random
spwanenemy();

代替:

    if (frameCount % 100 === 0) randomspwanenemy();

所以，是的，只是一个小错字!从开发人员控制台 (F12) 了解错误并找出错误是一项重要技能。继续练习!

function startnewgame() {
  score = 0;
  player.hp = 10;
  timewhenlasthit = Date.now();
  timewhengamestart = Date.now();
  frameCount = 0;
  enemylist = {};
  bulletlist = {};
  upgradelist = {};
  randomspwanenemy();

}

function update() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.fillText("Score = " + score, 200, 30);
  score++;
  frameCount++;

  if (frameCount % 100 === 0) randomspwanenemy();
  if (frameCount % 75 === 0) randomspwanupgrade();

  player.attackcounter += player.atkspd;
  updateplayerposition();
  drawplayer(player);
  for (var i in bulletlist) {
    updateplayer(bulletlist[i]);
    bulletlist[i].timer++;
    var toRemove = false;
    if (bulletlist[i].timer > 100) {
      toRemove = true;
    }
    for (var j in enemylist) {
      var cod = getdistant(bulletlist[i], enemylist[j]);
      if (cod) {
        toRemove = true;
        delete enemylist[j];
        score += 1000;
        break;
      }
    }
    if (toRemove) delete bulletlist[i];
  }
  for (var i in upgradelist) {
    updateplayer(upgradelist[i]);
    var temp = getdistant(player, upgradelist[i]);
    if (temp) {
      if (upgradelist[i].type === 'score') {
        score += 100;
      }
      if (upgradelist[i].type === 'atkspd') {
        player.atkspd += 5;
      }
      delete upgradelist[i];
    }
  }
  for (var i in enemylist) {
    updateplayer(enemylist[i]);

    var temp = getdistant(player, enemylist[i]);
    death(temp);
  }
}

function drawplayer(x) {
  ctx.save();
  ctx.fillStyle = x.color;
  ctx.fillRect(x.x - x.width / 2, x.y - x.height / 2, x.width, x.height);
  ctx.restore();
  ctx.fillText("HP = " + player.hp, 20, 30);
  ctx.fillText("bullet = " + player.attackcounter, 20, 80);
}

function drawenemy(x) {
  ctx.save();
  ctx.fillStyle = x.color;
  ctx.fillRect(x.x - x.width / 2, x.y - x.height / 2, x.width, x.height);
  ctx.restore();
}

function updateplayer(x) {
  if (x.x + x.width / 2 >= WIDTH) {
    x.x = WIDTH - x.width / 2;
    x.spdX = -x.spdX;
  }
  if (x.x - x.width / 2 <= 0) {
    x.x = x.width / 2;
    x.spdX = -x.spdX;
  }
  if (x.y + x.height / 2 >= HEIGHT) {
    x.y = HEIGHT - x.height / 2;
    x.spdY = -x.spdY;
  }
  if (x.y - x.height / 2 <= 0) {
    x.y = x.height / 2;
    x.spdY = -x.spdY;
  }
  x.x += x.spdX;
  x.y += x.spdY;
  drawenemy(x);

}

function adde(id, x, y, spdX, spdY, width, height) {
  var earth = {
    name: 'A',
    x: x,
    spdX: spdX,
    y: y,
    spdY: spdY,
    id: id,
    width: width,
    height: height,
    color: 'red'
  };
  enemylist[id] = earth;
}

function addupgrade(id, x, y, spdX, spdY, width, height, color, type) {
  var earth = {
    name: 'A',
    x: x,
    spdX: spdX,
    y: y,
    spdY: spdY,
    id: id,
    width: width,
    height: height,
    color: color,
    type: type
  };
  upgradelist[id] = earth;
}

function addbullet(id, x, y, spdX, spdY, width, height) {
  var earth = {
    name: 'A',
    x: x,
    spdX: spdX,
    y: y,
    spdY: spdY,
    id: id,
    width: width,
    height: height,
    color: 'black',
    timer: 0
  };
  bulletlist[id] = earth;
}

function getdistant(earth1, earth2) {
  var rect1 = {
    x: earth1.x - earth1.width / 2,
    y: earth1.y - earth1.height / 2,
    width: earth1.width,
    height: earth1.height
  };
  var rect2 = {
    x: earth2.x - earth2.width / 2,
    y: earth2.y - earth2.height / 2,
    width: earth2.width,
    height: earth2.height
  };
  return testcol(rect1, rect2);
}

function death(x) {
  if (x) {
    player.hp -= 1;
    if (player.hp == 0) {
      var ttime = Date.now() - timewhengamestart;
      timewhengamestart = Date.now();
      console.log("DEAD!! you score " + score);
      startnewgame();
    }

  }

}

function randomspwanenemy() {
  var x = Math.random() * WIDTH;
  var y = Math.random() * HEIGHT;
  var height = 10 + Math.random() * 30;
  var width = 10 + Math.random() * 30;
  var spdY = Math.random() * 5 + 5;
  var spdX = Math.random() * 5 + 5;
  var id = Math.random();
  //console.log(x,y,height,width,spdX,spdY);
  adde(id, x, y, spdX, spdY, width, height);
}

function randomspwanupgrade() {
  var x = Math.random() * WIDTH;
  var y = Math.random() * HEIGHT;
  var height = 10;
  var width = 10;
  var spdY = 0;
  var spdX = 0;
  var id = Math.random();
  var sample = Math.random();
  if (sample > 0.5) {
    var type = 'score';
    var color = 'lightblue';
  } else {
    var type = 'atkspd';
    var color = 'purple';
  }
  addupgrade(id, x, y, spdX, spdY, width, height, color, type);
}

function randomspwanbullet(earth, overangle) {
  var x = player.x;
  var y = player.y;
  var height = 10;
  var width = 10;
  //var tid = pp(Math.random());
  var angle = earth.aimAngle;
  if (overangle !== undefined) {
    angle = overangle;
  }
  var spdY = (Math.sin(angle) * 10);
  var spdX = (Math.cos(angle) * 10);
  var id = Math.random();
  addbullet(id, x, y, spdX, spdY, width, height);
}

function testcol(earth1, earth2) {
  var lasthit = Date.now() - timewhenlasthit;
  if (earth1.x <= earth2.x + earth2.width && earth2.x <= earth1.x + earth1.width && earth1.y <= earth2.y + earth2.height && earth2.y <= earth1.y + earth1.height && lasthit >= 1000) {
    timewhenlasthit = Date.now();
    return 1;
  }
}

function pp(x) {
  if (x > 0.5) return 1;
  else return -1;
}

var canvas = document.getElementById("ctx")
var ctx = canvas.getContext('2d');
var frameCount = 0;
ctx.font = '30 px Arial';
var score = 0
var HEIGHT = 500;
var WIDTH = 500;
var timewhengamestart = Date.now();
var timewhenlasthit = Date.now();
document.onmousemove = function(mouse) {
  var mouseX = mouse.clientX - document.getElementById('ctx').getBoundingClientRect().left;
  var mouseY = mouse.clientY - document.getElementById('ctx').getBoundingClientRect().top;;
  mouseX -= player.x;
  mouseY -= player.y;
  player.aimAngle = Math.atan2(mouseY, mouseX);
  /*  if(mouseX <player.width/2)mouseX=player.width/2;
    if(mouseX>WIDTH-player.width/2)mouseX = WIDTH-player.width/2;
    if(mouseY<player.height/2)mouseY=player.height/2;
    if(mouseY>HEIGHT-player.height/2)mouseY = HEIGHT-player.height/2;
    player.x = mouseX;
    player.y = mouseY;*/
}
document.onclick = function(mouse) {
  if (player.attackcounter > 25) {
    randomspwanbullet(player, player.aimAngle);
    player.attackcounter = 0;
  }
}
document.oncontextmenu = function(mouse) {
  if (player.attackcounter > 1000) {
    for (var i = 1; i < 361; i++) {
      randomspwanbullet(player, i);
    }
    player.attackcounter = 0;
  }
  mouse.preventDefault();
}
document.onkeydown = function(event) {
  if (event.keyCode === 68) {
    player.pressingRight = true;
  } else if (event.keyCode === 83) {
    player.pressingDown = true;
  } else if (event.keyCode === 65) {
    player.pressingLeft = true;
  } else if (event.keyCode === 87) {
    player.pressingUp = true;
  }
}
document.onkeyup = function(event) {
  if (event.keyCode === 68) {
    player.pressingRight = false;
  } else if (event.keyCode === 83) {
    player.pressingDown = false;
  } else if (event.keyCode === 65) {
    player.pressingLeft = false;
  } else if (event.keyCode === 87) {
    player.pressingUp = false;
  }
}

function updateplayerposition() {
  if (player.pressingRight) player.x += 10
  if (player.pressingLeft) player.x -= 10
  if (player.pressingUp) player.y -= 10
  if (player.pressingDown) player.y += 10
  if (player.x < player.width / 2) player.x = player.width / 2;
  if (player.x > WIDTH - player.width / 2) player.x = WIDTH - player.width / 2;
  if (player.y < player.height / 2) player.y = player.height / 2;
  if (player.y > HEIGHT - player.height / 2) player.y = HEIGHT - player.height / 2;
}
var player = {
  name: 'E',
  x: 40,
  spdX: 30,
  y: 40,
  spdY: 5,
  hp: 10,
  width: 20,
  height: 20,
  atkspd: 1,
  color: 'green',
  attackcounter: 0,
  pressingDown: false,
  pressingUp: false,
  pressingLeft: false,
  pressingRight: false,
  aimAngle: 0
};
var enemylist = {};
var upgradelist = {};
var bulletlist = {};

function drawCanvas() {
  startnewgame();
  setInterval(update, 40);
}

#header {
  background: #202020;
  font-size: 36px;
  text-align: center;
  padding: 0;
  margin: 0;
  font-style: italic;
  color: #FFFFFF;
}
#ctx {
  border: 2px solid #000000;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  margin-top: 20px;
  position: absolute;
  background: #ffffff;
}
#leftmenu {
  margin-top: 20px;
  margin-bottom: 65px;
  padding-right: 10px;
  float: left;
  width: 300px;
  height: 580px;
  background: #C8C8C8;
  border-radius: 10px;
  border: 10px solid #002699;
}
nav#leftmenu h2 {
  text-align: center;
  font-size: 30px;
}
nav#leftmenu ul {
  list-style: none;
  padding: 0;
}
nav#leftmenu li {
  list-style: none;
  font-size: 24px;
  margin-top: 20px;
  border-bottom: 2px dashed #000;
  margin-left: 0px;
  text-align: center;
}
nav#leftmenu a {
  text-decoration: none;
  font-weight: bold;
  color: #1c478e;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>A Awesome Game</title>
  <link href="css/style.css" rel="stylesheet">
  <script src="js/script.js" type="text/javascript"></script>
</head>

<body onload="drawCanvas();" style="background: linear-gradient(to bottom left, #0000ff -10%, #33ccff 100%);">
  <h1 id="header">Welcome to my GAME!!</h1>
  <!--Canvas-->
  <canvas id="ctx" width="800" height="600" style="border:1px solid #000000;"></canvas>

  <!--leftMenu-->
  <section>
    <nav id="leftmenu">
      <h2>Menu</h2>
      <ul>
        <li><a href="#" onclick="startnewgame();">New Game</a>
        </li>
        <li><a href="#">Pause Game</a>
        </li>
        <li><a href="#">Option</a>
        </li>
        <li><a href="#" onclick="alert('Game End')">End it now</a>
        </li>
      </ul>
    </nav>
  </section>
</body>

</html>