变量++不起作用

时间:2017-11-19 00:34:31

标签: javascript html

好的,所以我有这个游戏,我想要更新高分,但每当我设置我的currentScore值为++时,它都不会增加。我不知道发生了什么,我相信这是一个简单的解决方案,如果有人能帮助我,我将不胜感激。问题出在第212行。我真的想解决这个问题,我希望能够快速简单地修复,以便我可以回去设计我的网站。



<!DOCTYPE html>
<html>
  <head>
  </head>
  <body onload ="checkScore">
          <script>
              
          </script>
            <p><span style="color:red">Your</span> <span style="color:orange">current</span> <span style="color:gold">High</span> <span style="color:green">Score</span> <span style="color:blue">is:</span>
            <span id="SCORES" style="color:purple">0</span>
            <input id="currentScore" value="0"> 
  	<script>
    var cookie;

              function setCookie(cname,cvalue,exdays) {
                  var d = new Date();
                  d.setTime(d.getTime() + (exdays*365*7*24*60*60*1000));
                  var expires = "expires=" + d.toGMTString();
                  cookie = encodeURI(cname + "=" + cvalue + ";" + expires + ";path=/");
              }

              function getCookie(cname) {
                  var name = cname + "=";
                  var decodedCookie = decodeURIComponent(cookie);
                  var ca = decodedCookie.split(';');
                  for(var i = 0; i < ca.length; i++) {
                      var c = ca[i];
                      while (c.charAt(0) == ' ') {
                          c = c.substring(1);
                      }
                      if (c.indexOf(name) == 0) {
                          return c.substring(name.length, c.length);
                      }
                  }
                  return "";
              }

              function checkScore() {
                // get current score
                let currentScore = document.getElementById('currentScore').value;

                //get high score from the "cookie"
                let highScore = getCookie('highscore');

                // if current score is bigger then high score - set new high score and update cookie
                if (highScore < currentScore) {
                  highScore = currentScore;
                  setCookie("highscore", highScore, 365);
                }

                // update DOM
                document.getElementById("SCORES").innerHTML = highScore;
              }

              // set inital cookie for this example to work
              setCookie("highscore", 0, 365);
    
    
    
    
    
    
    
    
    
    
    
    
  	var
  	COLS = 26,
  	ROWS = 26,
  	EMPTY = 0,
  	SNAKE = 1,
  	FRUIT = 2,
  	LEFT  = 0,
  	UP    = 1,
  	RIGHT = 2,
  	DOWN  = 3,
  	KEY_LEFT  = 65,
  	KEY_UP    = 87,
  	KEY_RIGHT = 68,
  	KEY_DOWN  = 83,

  	canvas,
  	ctx,
  	keystate,
  	frames,
  	score;
    currentScore;
  	grid = {
  		width: null,
  		height: null,
  		_grid: null,
  		init: function(d, c, r) {
  			this.width = c;
  			this.height = r;
  			this._grid = [];
  			for (var x=0; x < c; x++) {
  				this._grid.push([]);
  				for (var y=0; y < r; y++) {
  					this._grid[x].push(d);
  				}
  			}
  		},
  		set: function(val, x, y) {
  			this._grid[x][y] = val;
  		},
  		get: function(x, y) {
  			return this._grid[x][y];
  		}
  	}
  	snake = {
  		direction: null,
  		last: null,
  		_queue: null,
  		init: function(d, x, y) {
  			this.direction = d;
  			this._queue = [];
  			this.insert(x, y);
  		},
  		insert: function(x, y) {
  			this._queue.unshift({x:x, y:y});
  			this.last = this._queue[0];
  		},
  		remove: function() {
  			return this._queue.pop();
  		}
  	};
  	function setFood() {
  		var empty = [];
  		for (var x=0; x < grid.width; x++) {
  			for (var y=0; y < grid.height; y++) {
  				if (grid.get(x, y) === EMPTY) {
  					empty.push({x:x, y:y});
  				}
  			}
  		}
  		var randpos = empty[Math.round(Math.random()*(empty.length - 1))];
  		grid.set(FRUIT, randpos.x, randpos.y);
  	}
  	function main() {
  		canvas = document.createElement("canvas");
  		canvas.width = COLS*20;
  		canvas.height = ROWS*20;
  		ctx = canvas.getContext("2d");
  		document.body.appendChild(canvas);
  		ctx.font = "18px Helvetica";
  		frames = 0;
  		keystate = {};
  		document.addEventListener("keydown", function(evt) {
  			keystate[evt.keyCode] = true;
  		});
  		document.addEventListener("keyup", function(evt) {
  			delete keystate[evt.keyCode];
  		});
  		init();
  		loop();
  	}
  	function init() {
  		score = 0;
        currentScore = 0;
  		grid.init(EMPTY, COLS, ROWS);
  		var sp = {x:Math.floor(COLS/2), y:ROWS-1};
  		snake.init(UP, sp.x, sp.y);
  		grid.set(SNAKE, sp.x, sp.y);
  		setFood();
  	}
  	function loop() {
  		update();
  		draw();
  		window.requestAnimationFrame(loop, canvas);
  	}
  	function update() {
  		frames++;
  		if (keystate[KEY_LEFT] && snake.direction !== RIGHT) {
  			snake.direction = LEFT;
  		}
  		if (keystate[KEY_UP] && snake.direction !== DOWN) {
  			snake.direction = UP;
  		}
  		if (keystate[KEY_RIGHT] && snake.direction !== LEFT) {
  			snake.direction = RIGHT;
  		}
  		if (keystate[KEY_DOWN] && snake.direction !== UP) {
  			snake.direction = DOWN;
  		}
  		if (frames%5 === 0) {
  			var nx = snake.last.x;
  			var ny = snake.last.y;
  			switch (snake.direction) {
  				case LEFT:
  					nx--;
  					break;
  				case UP:
  					ny--;
  					break;
  				case RIGHT:
  					nx++;
  					break;
  				case DOWN:
  					ny++;
  					break;
  			}
  			if (0 > nx || nx > grid.width-1  ||
  				0 > ny || ny > grid.height-1 ||
  				grid.get(nx, ny) === SNAKE
  			) {
  				return init();
  			}
  			if (grid.get(nx, ny) === FRUIT) {
  				score++;
          currentScore++;
          checkScore();
  				setFood();
  			} else {
  				var tail = snake.remove();
  				grid.set(EMPTY, tail.x, tail.y);
  			}
  			grid.set(SNAKE, nx, ny);
  			snake.insert(nx, ny);
  		}
  	}
  	function draw() {
  		var tw = canvas.width/grid.width;
  		var th = canvas.height/grid.height;
  		for (var x=0; x < grid.width; x++) {
  			for (var y=0; y < grid.height; y++) {
  				switch (grid.get(x, y)) {
  					case EMPTY:
  						ctx.fillStyle = "#000";
  						break;
  					case SNAKE:
  						ctx.fillStyle = "#4aa024";
  						break;
  					case FRUIT:
  						ctx.fillStyle = "#f00";
  						break;
  				}
  				ctx.fillRect(x*tw, y*th, tw, th);
  			}
  		}
  		ctx.fillStyle = "#49c2ff";
  		ctx.fillText("SCORE: " + score, 10, canvas.height-10);
  	}
  	main();
  	</script>
  </body>
</html>
&#13;
&#13;
&#13;

3 个答案:

答案 0 :(得分:0)

我不知道第212行是什么,我不会指望。我看到的是这个:

score++;
currentScore++;
checkScore();

其中checkScore()然后将值重置为UI元素中的值。

let currentScore = document.getElementById('currentScore').value;

答案 1 :(得分:0)

你有一个全局变量框架,问题是window.frames也存在。因此,您不能将frames用作变量。将其更改为其他内容。

答案 2 :(得分:0)

答案确实如此 let currentScore = document.getElementById('currentScore').value = score; 再次感谢马特的帮助!