<!DOCTYPE html>
<html>
<head>
<title>tank</title>
<style type="text/css">
#map{
position: absolute;
width: 500px;
height: 500px;
top: 50px;
left: 50%;
margin-left: -250px;
border: 5px solid green;
border-collapse:collapse;
}
span{
position: relative;
display: inline-block;
width: 90px;
height: 25px;
margin-left: 20px;
font-size: 14px;
text-align: center;
background-color: #4CAF50;
color: white;
cursor:pointer;
border-radius: 5px;
}
#ifo{
position: absolute;
width: 500px;
height: 40px;
top: 25px;
left: 50%;
margin-left: -250px;
}
#score{
background-color: white;
font-weight: bolder;
color: #4CAF50;
}
</style>
</head>
<body>
<div id="ifo">
<span id="stop">STOP</span>
<span id="restart">RESTART</span>
<span id="speed">SPEED</span>
<span id="score"></span>
</div>
<div id="map"></div>
</body>
<script type="text/javascript">
//map=地图对象;snake=存着蛇身体小方块的数组;food=食物对象;dir=蛇前进方向;score=得分;speed=蛇前行时间间隔;running=游戏状态
var map = document.getElementById("map");
var snake = new Array();
var food;
var dir = "R";
var score = 0;
var scorez = document.getElementById("score");
scorez.innerHTML = "SCORE: "+score;
var speed = 500;
const WIDTH = 500;
const HEIGHT = 500;
var running = "RUN";
//随机位置生成食物
food = randomFood();
//生成蛇
for(var i = 0; i < 3; i++){
var s = create(i*10,0,"red");
//把生成的蛇存入蛇数组中
snake.push(s);
}
//调用蛇移动函数让蛇移动
autoMove();
//-------------定义的各种函数-----------------------------------------
//蛇自动前进函数
function autoMove(){
autoSnake = setInterval(function(){move(dir);},speed);
}
//蛇移动函数
function move(dir){
//如果游戏状态为OVER直接退出
if(running == "OVER"){gameOver();return;}
var l = snake.length;
var y_old = getPostionNumber(snake[l-1],"y");
var x_old = getPostionNumber(snake[l-1],"x");
var x=x_old,y=y_old;
//蛇头下一步的位置
if(dir=="U"){
y = y_old - 10;
}else if(dir=="D"){
y = y_old + 10;
}else if(dir=="L"){
x = x_old -10;
}else if(dir=="R"){
x = x_old + 10;
}
//循环检测蛇头的下一步位置是否在蛇身
for(var i = 0; i < snake.length; i++){
var xi = getPostionNumber(snake[i],"x");
var yi = getPostionNumber(snake[i],"y");
//蛇头碰蛇身或者蛇头位置出界，游戏结束
if((x == xi && y == yi)||(y > (HEIGHT-10) || y < 0 || x > (WIDTH-10) ||x < 0)){
running = "OVER";
gameOver();
return;
}
}
//移动蛇头
snake[l-1].style.top = y + "px";
snake[l-1].style.left = x + "px";
//移动蛇身(除了蛇头下一节)
for(var i = 0; i < l-2; i++){
snake[i].style.left = snake[i+1].style.left;
snake[i].style.top = snake[i+1].style.top;
}
//移动蛇头下一节
snake[l-2].style.left = x_old + "px";
snake[l-2].style.top = y_old + "px";
//蛇遇食物，增长且重新生成食物
if(x == getPostionNumber(food,"x") && y == getPostionNumber(food,"y")){
var new_block = create(x,y,"red");
//吃食物将增长的蛇尾添加到蛇数组中，同时删除食物对象并重新生成
snake.unshift(new_block);
map.removeChild(food);
score = score + (500-speed)/100*2+1;
scorez.innerHTML = "SCORE: "+score;
food = randomFood();
}
}
//随机产生食物函数
function randomFood(){
//c表示是否重新产生位置
var c = 0;
do{
var food_x = (Math.round(Math.random()*50)*10);
var food_y = (Math.round(Math.random()*50)*10);
for(var i = 0; i < snake.length; i++){
var x = getPostionNumber(snake[i],"x");
var y = getPostionNumber(snake[i],"y");
//当且仅当随机食物不再蛇身上方可退出
if(x != food_x && y != food_y && i==(snake.length-1)){
c==1;
}
}
}while(c==1);
food = create(food_x,food_y,"#FF00FF");
return food;
}
//创建函数;生成一个给定位置、颜色的10x10方块
function create(x,y,color){
var it = document.createElement("div");
it.style.position = "absolute";
it.style.left = x+"px";
it.style.top = y+"px";
it.style.width = "10px";
it.style.height = "10px";
it.style.borderCollapse = "collapse";
it.style.border = "1px solid "+color;
map.appendChild(it);
return it;
}
//获取给定方块坐标的数值函数
function getPostionNumber(obj,p){
var dir= p=="x"?"left":"top";
var posit = (p=="x")? obj.style.left : obj.style.top;
posit = posit.substring(0,posit.length-2);
return parseInt(posit);
}
//游戏结束函数
function gameOver(){
clearInterval(autoSnake);
alert("GAME OVER");
}
//-------------自定义函数结束--------------------------------------
//-------------键盘监听开始----------------------------------------
//方向键监听及处理
document.onkeydown = function(event){
var old_dir = dir;
// 37 Left（左箭头）38 Up（上箭头）39 Righ（右箭头） 40 Down（下箭头）
code = event.keyCode;
//只有原方向与新方向不相反才能移动，防止掉头
if(code == 37 && old_dir !="R"){
dir = "L";
}else if(code == 38 && old_dir != "D"){
dir = "U";
}else if(code == 39 && old_dir != "L"){
dir = "R";
}else if(code == 40 && old_dir != "U"){
dir = "D"
}else{
return;
}
move(dir);
}
//暂停键按钮监听及处理
var stop = document.getElementById("stop");
stop.onclick = function(){
if(running == "RUN"){
running = "STOP";
clearInterval(autoSnake);
}else{
running = "RUN";
autoMove();
}
stop.innerHTML = (running == "STOP")?"CONTINUE":"STOP";
}
//重新开始按钮监听及处理
var restart = document.getElementById("restart");
restart.onclick = function(){
location.reload();
}
//加速按钮监听及处理
var sp = document.getElementById("speed");
sp.onclick = function(){
if(speed > 100){
speed-=100;
clearInterval(autoMove());
autoSnake = autoMove();
}
}
//---------------键盘监听结束-------------------------------------
</script>
</html>
