master

分支 (1)

管理

管理

master

database-advanced-class-notes
/
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>贪吃蛇</title>
<style>
P{
font-size:20pt;
font-family:宋体;
text-align:center;
}
#line{
border:1px solid #CCC;
}
.box1{
float:left;
margin-left:700px;
margin-top:10px;
}
.box2{
float:right;
margin-right:700px;
margin-top:10px;
}
canvas{
border:1px solid;
margin-left:700px;
margin-top:20px;
}
button{
width:100px;
height:30px;
color:white;
font-size:15pt;
background-color:#F96;
margin-left:900px;
margin-top:10px;
}
</style>
<script type="text/javascript">
function gameStart(){
//生成画布
var canvas = document.getElementById("canvas");
var cxt = canvas.getContext("2d");
//画布长宽
var width = 500;
var height = 500;
//单位大小
var w = 10;
//蛇坐标
var x = Math.floor(Math.random() * width / w) * w;
var y = Math.floor(Math.random() * height / w) * w;
//食物坐标
var foodX = 0;
var foodY = 0;
//蛇前进方向
var direction = 37 + Math.floor(Math.random() * 4);
//蛇坐标集合
var snakeMap = [];
//蛇长度
var size = 1;
//得分
var grade = 0;
//蛇速度
var speed = 200;
showBestScore();
//蛇移动
var interval = window.setInterval(gameRefresh,speed);

function gameRefresh(){
switch(direction){
case 37: x-=w; break;
case 38: y-=w; break;
case 39: x+=w; break;
case 40: y+=w; break;
}

if(x > width || y > height || x < 0 || y < 0){
alert("游戏结束！");
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
if(bestScore < grade){
document.getElementById("bestScore").innerHTML = grade;
localStorage.setItem("bestScore",grade);
}
window.location.reload();
}

for(var i = 0;i < snakeMap.length;i++){
if(parseInt(snakeMap[i].x) == x && parseInt(snakeMap[i].y) == y){
alert("游戏结束！");
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
if(bestScore < grade){
document.getElementById("bestScore").innerHTML = grade;
localStorage.setItem("bestScore",grade);
}
window.location.reload();
}
}

if(snakeMap.length >= size){
var lastBox = snakeMap.shift();
cxt.clearRect(lastBox['x'],lastBox['y'],w,w);
}

snakeMap.push({'x':x,'y':y});
cxt.fillStyle = "blue";
cxt.fillRect(x,y,w,w);
if(foodX == x && foodY == y){
drawFood();
size++;
grade += 10;
document.getElementById("currentScore").innerHTML = grade;
}
}

document.onkeydown = function(e){
if(e.keyCode == 37 || e.keyCode == 38 || e.keyCode == 39 || e.keyCode == 40){
direction = e.keyCode;
}
}

function drawFood(){
foodX = Math.floor(Math.random() * width / w) * w;
foodY = Math.floor(Math.random() * height / w) * w;
cxt.fillStyle = "red";
cxt.fillRect(foodX,foodY,w,w);
}

function showBestScore(){
var bestScore = localStorage.getItem("bestScore");
if(bestScore == null){
bestScore = 0;
}
var best = document.getElementById("bestScore");
best.innerHTML = bestScore;
}

drawFood();

}
</script>
</head>

<body onload="gameStart()">
<p>基于HTML5的贪吃蛇小游戏</p>
<div id="line"></div>
<div id="status">
<div class="box1">
历史最高分：<span id="bestScore">0</span>
</div>
<div class="box2">
当前分数：<span id="currentScore">0</span>
</div>
</div>
<canvas width=500 height=500 id="canvas"></canvas>
<div id="btn">
<button onclick="window.location.reload()">重新开始</button>
</div>
</body>
</html>