Question

这是我正在制作的游戏。我无法弄清楚它为什么不起作用。我这里有JS小提琴http://jsfiddle.net/aa68u/4/

    // Create the canvas
 var canvas = document.createElement("canvas");
 var ctx = canvas.getContext("2d");
 canvas.width = 512;
  canvas.height = 480;
 document.body.appendChild(canvas);



 // Background image
 var bgReady = false;
 var bgImage = new Image();
 bgImage.onload = function () {
     bgReady = true;
 };
 bgImage.src = "http://6269-9001.zippykid.netdna-cdn.com/wp-content/uploads/2013/11/Woods-Wallpaper.jpg";

 // Ship image
 var shipReady = false;
 var shipImage = new Image();
 shipImage.onload = function () {
     shipImage = true;
 };
 shipImage.src = "http://s29.postimg.org/3widtojzn/hero.png";

 // Astroid image
 var astroidReady = false;
 var astroidImage = new Image();
 astroidImage.onload = function () {
     astroidReady = true;
 };
 astroidImage.src = "http://s29.postimg.org/4r4xfprub/monster.png";

 // Game objects
 var ship = {
     speed: 256; 
 };
 var astroid = {};


 var health = 100;

 window.keyStates = {}; 

 addEventListener('keydown',  function (e) {
     keyStates[e.keyCode || e.key] = true;
     e.preventDefault();
     e.stopPropagation();
 }, true);

 addEventListener('keyup',  function (e) {
      keyStates[e.keyCode || e.key] = false;
     e.preventDefault();
     e.stopPropagation();
 }, true);



 var reset = function () {

     astroid.width = 10;
     astroid.height = 10;
     astroid.x = 32 + (Math.random() * (canvas.width - 64));
     astroid.y = 32 + (Math.random() * (canvas.height - 64));

     ship.speed = 256;

     for (var p in keyStates) keyStates[p]= false;
 };



 // Update game objects
 function update (modifier) {
     if (keyStates[38] ==true) { // Player holding up
         astroid.x -= ship.speed * modifier;
     }
     if (keyStates[40]==true) { // Player holding down
         astroid.x += ship.speed * modifier;
     }
     if (keyStates[37]==true) { // Player holding left
         astroid.y -= ship.speed * modifier;
     }
     if (keyStates[39]==true) { // Player holding right
         astroid.y += ship.speed * modifier;
     }
     if (astroid.width) < 200{
         astroid.width +=10;
         astroid.height += 10;
     }
     if (astroid.width) > 200{
         reset();
     }
     // Are they touching?
if (keyStates[32] == true && ship.x <= (astroid.x + 32) && astroid.x <= (ship.x + 32) && ship.y <= (astroid.y + 32) && astroid.y <= (ship.y + 32)) {
    monstersCaught += 1;
    reset();
}



 };


 // Draw everything
 var render = function () {
    if (bgReady) {
    ctx.drawImage(bgImage, 0, 0);
}



if (shipReady) {
    ctx.drawImage(heroImage, hero.x, hero.y);
}

if (astroidReady) {
    ctx.drawImage(monsterImage, monster.x, monster.y);
}

// Score
ctx.fillStyle = "rgb(250, 250, 250)";
ctx.font = "24px Helvetica";
ctx.textAlign = "left";
ctx.textBaseline = "top";
ctx.fillText("Your Health: " + health, 32, 32);

 };

 // The main game loop
 var main = function () {
var now = Date.now();
var delta = now - then;
if (delta > 20) delta = 20;

update(delta / 1000);
render();

then = now;
 };

 // Let's play this game!
 reset();
 var then = Date.now();
 setInterval(main, 1); // Execute as fast as possible

游戏应该是一艘船（鞋子图像），它可以避免变大（蚂蚁）的星号，但是当你移动你的船（鞋）停留在同一个地方并且星形（蚂蚁）移动时。蚂蚁/星状物也会变得更大，就像你靠近它们一样。

Answer 1

var ship = {
    speed: 256; 
};

删除值后的;。

if astroid.width < 200{

和

if astroid.width > 200{

需要围绕if条件的括号。

错误控制台很有帮助！但现在它只是停留在monsterImage is not defined的无限循环中。只是...回去，更仔细地编写代码，使用错误控制台！这是有原因的！

Javascript Html5画布问题

1 个答案: