您的位置：首页 > Web前端 > HTML5

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

2013-05-22 14:56 489 查看
闲着没事写了个贪吃蛇，前面吃蛇花了个把小时吧，但没什么意思，也不知道加什么。就加了个穿墙的功能和积分的功能，积分用的是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 onkeydown="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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航