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

闲着没事写了个贪吃蛇,前面吃蛇花了个把小时吧,但没什么意思,也不知道加什么。就加了个穿墙的功能和积分的功能,积分用的是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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值