HTML5写了个贪吃蛇，1.0版。主要玩玩canvas画画和初体验Web存储-localStorage

最新推荐文章于 2021-06-23 19:53:57 发布

u08070225

最新推荐文章于 2021-06-23 19:53:57 发布

阅读量552

点赞数

本文链接：https://blog.csdn.net/u08070225/article/details/8960384

版权

闲着没事写了个贪吃蛇，前面吃蛇花了个把小时吧，但没什么意思，也不知道加什么。就加了个穿墙的功能和积分的功能，积分用的是htm5新加的window属性localStorage

关于HTML5的web存储，w3c是这么说的：

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

源代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body οnkeydοwn="getComand()">
	<canvas id="snakeMap" width="400px" height="400px"
		style="background-color: #00ff00;">
	</canvas>
	<span id="totalscore"></span>
	<span id="highestscore"></span>
	<span id="score"></span>
	<script type="text/javascript">
		var canvas1 = document.getElementById("snakeMap");
		var cxt = canvas1.getContext("2d");
		var snake = new Array();
		var myfood;
		var totalScore = (typeof(localStorage.totalscore)=="undefined")?0:parseInt(localStorage.totalscore);
		console.log(typeof(totalScore));
		console.log(totalScore);
		var highestScore = (typeof(localStorage.highestscore)=="undefined")?0:parseInt(localStorage.highestscore);
		console.log(highestscore);
		var score = 0;
		$("totalscore").innerText="总分数："+totalScore;
		$("highestscore").innerText="最高分："+highestScore;
		$("score").innerText="本局分数：0";
		window.addEventListener('load', function() {
			for ( var i = 0; i < 5; i++) {
				var head = new food(canvas1.width / 2, canvas1.height / 2 + 10
						* i, 0);
				snake.push(head);
			}
			feed();
		});

		window.onbeforeunload = onbeforeunload_handler;
		function onbeforeunload_handler() {
 		//totalScore += score;
			if (score > highestScore)
				highestScore = score;
			console.log(highestScore); 
			//var info="总分"+totalScore+"最高分："+highestScore;
			//return info;  
			
			window.localStorage.highestscore = highestScore;

			console.log(localStorage.higtestscore);
			window.localStorage.totalscore = totalScore;
			console.log(localStorage.totalscore);
		}

		function drawsnake() {
			cxt.clearRect(0, 0, 600, 400);
			cxt.fillStyle = "red";
			for ( var i = 0; i < snake.length; i++) {
				cxt.fillRect(snake[i].x, snake[i].y, 9, 9);
			}

			cxt.fillRect(myfood.x, myfood.y, 9, 9);
		};

		var scoreInner = document.getElementById("score");
		function run() {

			if (snake[0].x == myfood.x && snake[0].y == myfood.y) {
				snake.push(myfood);
				scoreInner.innerHTML = "分数：" + (++score);
				$("totalscore").innerText="总分数："+(++totalScore);
				feed();
			}
			if (snake[0].x == 0)
				snake[0].x = canvas1.width - 10;
			if (snake[0].x == (canvas1.width))
				snake[0].x = 0;
			if (snake[0].y == 0)
				snake[0].y = canvas1.height - 10;
			if (snake[0].y == (canvas1.height))
				snake[0].y = 0;

			var beforex;
			var beforey;
			for ( var i = 0; i < snake.length; i++) {
				/* var before;
				(i==0)?before=0:before=i-1; */
				var statex = snake[i].x;
				var statey = snake[i].y;
				if (i == 0) {
					switch (snake[0].direct) {
					case 0: //上
						snake[0].y -= 10;
						break;
					case 1: //右
						snake[0].x += 10;
						break;
					case 2: //下
						snake[0].y += 10;
						break;
					case 3: //左
						snake[0].x -= 10;
						break;
					}
				} else {
					snake[i].x = beforex;
					snake[i].y = beforey;
				}
				beforex = statex;
				beforey = statey;
			}
		}
		function feed() {
			var x = (Math.floor(Math.random() * 40)) * 10;
			var y = (Math.floor(Math.random() * 40)) * 10;
			//alert(x+"aaa"+y);
			myfood = new food(x, y, 0);
		}

		var timerPaint = window.setInterval("drawsnake()", 100);
		var timerRun = window.setInterval("run()", 100);
		function getComand() {
			var code = event.keyCode;
			switch (code) {
			case 87: //w
				snake[0].direct = 0;
				break;
			case 68: //d
				snake[0].direct = 1;
				break;
			case 83: //s
				snake[0].direct = 2;
				break;
			case 65: //a
				snake[0].direct = 3;
				break;
			}
		};
		function food(x, y, direct) {
			this.x = x;
			this.y = y;
			this.direct = direct;
		}
		function $(id) {
			return document.getElementById(id);
		}
	</script>

</body>
</html>

u08070225

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5写了个贪吃蛇，1.0版。主要玩玩canvas画画和初体验Web存储-localStorage

闲着没事写了个贪吃蛇，前面吃蛇花了个把小时吧，但没什么意思，也不知道加什么。就加了个穿墙的功能和积分的功能，积分用的是htm5新加的window属性localStorage 关于HTML5的web存储，w3c是这么说的：HTML5 提供了两种在客户端存储数据的新方法：localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session
复制链接

扫一扫