JavaScript实战游戏--贪吃蛇

最新推荐文章于 2023-08-20 14:39:12 发布

weixin_30612769

最新推荐文章于 2023-08-20 14:39:12 发布

阅读量77

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/NNUF/archive/2012/03/04/2379327.html

版权

步骤：

　　1、DOM创建地图

　　2、创建蛇

　　3、创建食物

　　4、方向键控制蛇移动

　　5、蛇遇到食物，蛇身赠长，创建食物

　　6、游戏结束的两种方式：撞墙和撞到自身

点击此处游戏

　　点以下界面并按任意键开始游戏：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>贪吃蛇游戏</title>
</head>
<body onLoad="createMap()" onkeydown="keyDown(event)">
<p align="center">任意键启动游戏,SHIFT键暂停游戏，方向键控制蛇的移动方向,蛇碰壁或者碰到自己身体的时候游戏结束！</p>
<script type="text/javascript">
var mapSize = 300,//游戏地图大小
        snakeSize = 10,//一截蛇身大小
        foodSize = 10,//一份食物大小
        step = 10, //蛇每次移动的距离
        play,
        speed = 500,
        stepX = 10,stepY = 0,
        snakes = [];//存储蛇身节点
function createMap(){//创建地图
var map = document.createElement("div");
        map.id = "map";
        map.style.position = "absolute";
        map.style.width = mapSize+"px";
        map.style.height = mapSize+"px";
        map.style.left = "50%";
        map.style.marginLeft = "-"+ mapSize/2 + "px";
        map.style.background = "url(map.gif)";
        map.style.border = "2px solid #000";
        document.body.appendChild(map);
        createSnake();
        createFood();
//move();
    }
function positionRandom(){// 创建10的倍数XY坐标数组
var xyPos = Math.floor(mapSize/snakeSize),
            xyArr = [];//空数组
for(var i=0;i<xyPos;i++){
                xyArr.push(i*snakeSize);
            }
//alert(xyArr);    
return xyArr[Math.floor(Math.random()*xyArr.length)];        
    }
function createSnake(){//创建蛇身
var map = document.getElementById("map");
var snakeElement = document.createElement("div");
        snakeElement.id = "snake";
        snakeElement.style.width = snakeSize + "px";
        snakeElement.style.height = snakeSize + "px";
        snakeElement.style.backgroundColor = "red";
        snakeElement.style.position = "absolute";
        snakeElement.style.left = positionRandom() + "px";
        snakeElement.style.top = positionRandom() + "px";
        map.appendChild(snakeElement);
    }
function createFood(){//创建食物
var map = document.getElementById("map");
var food = document.createElement("div");
        food.id = "food";
        food.style.width = foodSize + "px";
        food.style.height = foodSize + "px";
        food.style.backgroundColor = "yellow";
        food.style.position = "absolute";
        food.style.left = positionRandom() + "px";
        food.style.top = positionRandom() + "px";
        map.appendChild(food);
    }
function keyDown(e){//监控键盘事件
switch(e.keyCode){
case 37:
                stepX = -step;
                stepY = 0;
break;
case 39:
                stepX = step;
                stepY = 0;
break;
case 38:
                stepX = 0;
                stepY = -step;
break;            
case 40:
                stepX = 0;
                stepY = step;
break;
case 16:
                alert("暂停");
break;
        }
if(play){
            clearInterval(play);  
        }
        play = setInterval(function(){    move(stepX,stepY);},speed);  //控制蛇移动
    }
function move(x,y){// 蛇移动控制
var snake = document.getElementById("snake");
            snakeLeft = parseInt(snake.style.left),
            snakeTop = parseInt(snake.style.top);
//alert("snakeleft:"+snakeLeft +"x:"+x+"Y:"+y);
            snake.style.left = (snakeLeft + x) + "px";  //蛇身的水平移动大小
            snake.style.top = (snakeTop + y) + "px";    //蛇身的上下移动
            checkFood(snakeLeft+x,snakeTop+y);
if(snakes.length>0){
for(var i=snakes.length-1;i>0;i--){
                    snakes[i].style.left = snakes[i-1].style.left;
                    snakes[i].style.top = snakes[i-1].style.top;
                }
                snakes[0].style.left = (snakeLeft + x - x) + "px";
                snakes[0].style.top = (snakeTop + y - y) + "px";
//alert(snake.style.left);
            }
if(checkWall()||checkMe()){
                clearInterval(play);
                alert("Game Over!");
                document.location.reload();
            }
        }
function checkFood(snakeX,snakeY){ //检查食物
var food = document.getElementById("food");
var foodX = parseInt(food.style.left);
var foodY = parseInt(food.style.top);
if(snakeX == foodX && snakeY == foodY){
            food.parentNode.removeChild(food);
            createFood();
            snakeGrow();
        }
    }
function checkWall(){ //检查是否碰壁
var snake = document.getElementById("snake");
var snakeX = parseInt(snake.style.left);
var snakeY = parseInt(snake.style.top);
if(snakeX<0||snakeY<0||snakeX>mapSize-step||snakeY>mapSize-step){
return true;
        }else{
return false;
        }
    }
function checkMe(){//检查时候碰到自己的身体
var snake = document.getElementById("snake");
var snakeX = snake.style.left;
var snakeY = snake.style.top;
if(snakes.length>0){
for(var i=0;i<snakes.length;i++){
if(snakeX == snakes[i].style.left && snakeY == snakes[i].style.top){
//alert(snakeX + "+" +snakes[i].style.left + ":::::" + snakeY + "+" + snakes[i].style.top);
return true;
                }
            }
        }
return false;
    }
function snakeGrow(){//蛇长大
var map = document.getElementById("map");
var snake = document.getElementById("snake");
var newSnake = snake.cloneNode(false);
        snakes[snakes.length]=newSnake;
        newSnake.id = "snake" + snakes.length;
        map.appendChild(newSnake);
switch (snakes.length){ // 判断数组长度，改变速度
case 3:
                speed = speed -50;
break;
case 6:
                speed = speed -50;
break;
case 9:
                speed = speed -50;
break;
case 12:
                speed = speed -50;
break;
case 15:
                speed = speed -50;
break;
case 20:
                speed = speed -50;
break;
case 25:
                speed = speed -50;
break;
case 30:
                speed = speed - 50;
break;
case 35:
                speed = speed - 10;
break;
case 40:
                speed = speed - 10;
break;
case 45:
                speed = speed - 10;
break;
case 50:
                speed = speed - 10;
break;
case 55:
                speed = speed -10;
break;
case 60:
                speed = speed -10;
break;
case 65:
                speed = speed -10;
break;
case 70:
                speed = speed -10;
break;
case 75:
                speed = speed -10;
break;
        }
    }
</script>
</body>
</html>

转载于:https://www.cnblogs.com/NNUF/archive/2012/03/04/2379327.html

weixin_30612769

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实战游戏--贪吃蛇

步骤：　　1、DOM创建地图　　2、创建蛇　　3、创建食物　　4、方向键控制蛇移动　　5、蛇遇到食物，蛇身赠长，创建食物　　6、游戏结束的两种方式：撞墙和撞到自身点击此处游戏　　点以下界面并按任意键开始游戏：代码：<!DOCTYPE HTML><html><head><met...
复制链接

扫一扫