div偏移量统制，贪吃蛇游戏实现
div偏移量控制，贪吃蛇游戏实现
兼容IE10 FIREFOX CHROME 效果见下图
tcs.html
<html>
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
<head>
<title>贪吃蛇</title>
<style>
.desktop{
background-color:gray;
border:1px solid green;
width:500px;
height:500px;
}
.textbox{
width:500px;
height:500px;
top:8px;
left:550px;
position:absolute;
}
.msgbox{
top:258px;
left:200px;
color:red;
text-align:center;height:10px;line-height:10px;
position:absolute;
}
.bd{
width:10px;
height:10px;
text-align:center;height:10px;line-height:10px;
border:1px solid gray;
position:absolute;
}
.snake{
background-color:yellow;
}
.food{
background-color:red;
}
</style>
<script src="tcs.js"></script>
</head>
<body>
<div id="desktop" class="desktop"></div>
<div id="textbox" class="textbox">
得分：<input id="score" type="text" value="0" readonly="true"></input>
<BR/>坐标：<textarea id="vertex" cols="70" rows="5"></textarea>
</div>
<div id="msg" class="msgbox"></div>
<br/><br/>
<input id="startbtn" type="button" value="start"/>
</body>
</html>
tcs.js
//全局参数
var snakeTrain = [],//蛇身
allFood=[],//食物仓库
block,//自动行走定时器
direction=39,//默认方向
desktop ={top:0,left:0},//桌布
foodBox = {x:0,y:0},//食物BOX
nextRandFoodIndex=0,//下一个食物随机点索引
score=0,//得分
gameStatus = 0;//游戏状态 0未启动 1运行中 -1游戏结束
//初始化方法
window.onload = function(e){
desktop.top = getTop($("desktop"));
desktop.left = getLeft($("desktop"));
initallFood();
initKeyDownListener();
$("startbtn").onclick = function(){
gameStatus = 1;
initSnake();
initFood();
block = window.setInterval("startTrain()",500);
};
}
//根据id获得dom对象
function $(id){
return document.getElementById(id);
}
//随机产生一个界于min和max之间的整数
function getRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
//获得dom对象的top
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//获得dom对象的left
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
//初始化食物池
function initallFood(){
for(var i=0;i<50;i++){
for(var j=0;j<50;j++){
allFood.push({x:i*10,y:j*10});
}
}
var len = allFood.length;
for(var i=0;i<len*2;i++){
var n1 = getRandomNum(0,len-1);
var n2 = getRandomNum(0,len-1);
var tmp = allFood[n1];
allFood[n1] = allFood[n2];
allFood[n2] = tmp;
}
}
//初始化食物
function initFood(addScore){
var len = allFood.length;
if (nextRandFoodIndex == len-1){
nextRandFoodIndex = 0;
}
for(var i=nextRandFoodIndex++;i<len;i++){
if (!inSnakeTrain(allFood[i].x, allFood[i].y)){
createBox(allFood[i].x, allFood[i].y, "food");
foodBox = {x:allFood[i].x , y:allFood[i].y};
break;
}
}
if (addScore){
score += 10;
$("score").value = score;
}
}
//初始化蛇
function initSnake(){
var n = 3;
for(var i=0;i<n;i++){
createBox(10*i,0,"snake");
snakeTrain.push({x:10*i,y:0});
}
drawHead();
}
//初始化键盘监听事件
function initKeyDownListener(){
document.onkeydown = function(e){
if (gameStatus != 1){
return -1;
}
var code = e.keyCode;
if (code<37 || code>40){
return -1;
}
startTrain(code);
}
}
//上下左右手动行走
function leftGo(){
if (direction == 39){//朝右走，不能左转
return -1;
}
if (outside("x-")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("x-")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x-10 && foodBox.y == snake.y){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.x -= 10;
drawSnakeTrain();
}
}
function upGo(){
if (direction == 40){//朝下走，不能北上
return -1;
}
if (outside("y-")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("y-")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x && foodBox.y == snake.y-10){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.y -= 10;
drawSnakeTrain();
}
}
function rightGo(){
if (direction == 37){//朝左走，不能右转
return -1;
}
if (outside("x+")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("x+")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x+10 && foodBox.y == snake.y){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.x += 10;
drawSnakeTrain();
}
}
function downGo(){
if (direction == 38){//朝上走，不能南下
return -1;
}
if (outside("y+")){
gameOver("撞墙啦！Game Over");
return -1;
}
if (eatSelf("y+")){
gameOver("咬到自己啦！Game Over");
return -1;
}
var len = snakeTrain.length;
var snake = snakeTrain[len-1];
if (foodBox.x == snake.x && foodBox.y == snake.y+10){//eatting
removeBox(foodBox.x,foodBox.y,"food");
createBox(foodBox.x,foodBox.y,"snake");
snakeTrain.push({x:foodBox.x , y:foodBox.y});
initFood(true);
}else{
trainGo();
snake.y += 10;
drawSnakeTrain();
}
}
//蛇身跟上蛇头
function trainGo(){
var len = snakeTrain.length;
var i = len-1;
var tmp = snakeTrain[i];
while(i>=1){
removeBox(tmp.x,tmp.y,"snake");
var tmp2 = {'x':snakeTrain[i-1].x , 'y':snakeTrain[i-1].y};
snakeTrain[i-1].x = tmp.x;
snakeTrain[i-1].y = tmp.y;
tmp = tmp2;
i--;
}
removeBox(tmp.x,tmp.y,"snake");
}
//画蛇
function drawSnakeTrain(){
var len = snakeTrain.length;
var str = "";
for(var i=0;i<len;i++){
var snake = snakeTrain[i];
createBox(snake.x,snake.y,"snake");
str += " {x:"+snake.x+",y:"+snake.y+"}";
}
$("vertex").value = str;
}
//装饰蛇头
function drawHead(){
var snake = snakeTrain[snakeTrain.length-1];
var snake2 = snakeTrain[snakeTrain.length-2];
$("snake_"+snake.x+"_"+snake.y).style.backgroundColor = "orange";
$("snake_"+snake2.x+"_"+snake2.y).style.backgroundColor = "yellow";
}
//是否出界
function outside(act){
var snake = snakeTrain[snakeTrain.length-1];
switch(act){
case "x+":
return snake.x + 10 > 490;
case "x-":
return snake.x - 10 < 0;
case "y+":
return snake.y + 10 > 490;
case "y-":
return snake.y - 10 < 0;
}
}
//是否咬到自己
function eatSelf(act){
var snake = snakeTrain[snakeTrain.length-1];
switch(act){
case "x+":
return inSnakeTrain(snake.x + 10 , snake.y);
case "x-":
return inSnakeTrain(snake.x - 10 , snake.y);
case "y+":
return inSnakeTrain(snake.x ,snake.y + 10);
case "y-":
return inSnakeTrain(snake.x ,snake.y - 10);
}
}
//是否在火车车厢内
function inSnakeTrain(x,y){
for(var i=0;i<snakeTrain.length;i++){
var train = snakeTrain[i];
if (x== train.x && y == train.y){
return true;
}
}
return false;
}
//创建方块
function createBox(x,y,sl){
var newNode = document.createElement("div");//创建P标签
newNode.id = sl+"_"+x+"_"+y;
newNode.name = "boxs";
newNode.className="bd "+sl;
document.body.appendChild(newNode);
newNode.style.left = (desktop.left+x)+"px";
newNode.style.top = (desktop.top+y)+"px";
}
//移除方块
function removeBox(x,y,sl){
document.body.removeChild($(sl+"_"+x+"_"+y));
}
//自动开火车
function startTrain(code){
if ("undefined" == typeof(code)){
code = direction;
}
var rs = 0;
switch(code){
case 37://左
rs = leftGo();
break;
case 38://上
rs = upGo();
break;
case 39://右
rs = rightGo();
break;
case 40://下
rs = downGo();
break;
}
if (rs != -1){
direction = code;
drawHead();
}
}
function gameOver(msg){
gameStatus = -1;
var link = '<a href="javascript:reloadGame()">再来一次</a>';
$("msg").innerHTML = msg+"<br/><br/>"+link;
window.clearInterval(block);
}
function reloadGame(){
location.replace(location.href);
}