JavaScript贪吃蛇效果

最新推荐文章于 2022-11-30 00:14:35 发布

handsome_man__

最新推荐文章于 2022-11-30 00:14:35 发布

阅读量159

点赞数

文章标签： js javascript css html css3

本文链接：https://blog.csdn.net/handsome_man__/article/details/104886509

版权

要怎么做呢？
在这里插入图片描述
代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Document</title>
</head>
<body>

</body>
<script type="text/javascript">
// 贪吃蛇游戏

// 蛇：每隔一段时间就移动一点距离，其实就是每隔一会就重新加载显示蛇的身体
// 蛇的组成：有多个小div，组成每一节的身体
// 蛇的移动：从蛇头开始，每隔小div 的坐标，给下一节身体的坐标
// 方向的控制：右，蛇头的x坐标+1，左，蛇头的x坐标-1，下，蛇头的y坐标+1，上，蛇头的y坐标-1，其他身体部分，都是依次将自己的坐标给下一节身体
// 键盘事件：用来控制上下左右
// 食物：显示，被吃，消失，再显示
// 地图：显示蛇、显示食物，有一定的区域

// 分3个对象，蛇、地图、食物
// 蛇：
/*
属性：
    身体组成部分
    显示身体的方法
    吃食物
    碰撞身体 - 死亡
*/

// 地图：
/*
创建地图
*/

// 食物：
/*
组成部分
消失、显示
*/

// 设置样式的函数
function setStyle(ele,styleObj){
    for(var attr in styleObj){
        ele.style[attr] = styleObj[attr];
    }
}
// 获取随机数
function getRandom(a,b){
    var max = Math.max(a,b);
    var min = Math.min(a,b);
    return parseInt(Math.random()*(max-min))+min;
}
// 获取随机颜色
function getColor(){
    return `rgb(${getRandom(0,256)},${getRandom(0,256)},${getRandom(0,256)})`;
}

// 地图
function Map(){
    this.map = document.createElement("div");
    setStyle(this.map,{
        width:"800px",
        height:"400px",
        border:"10px solid #ccc",
        backgroundColor:"#abcdef",
        position:"relative"
    });
    document.body.appendChild(this.map);
}
var map = new Map();

// 食物
function Food(){
    this.food = document.createElement("div");
    // 获取随机的left和top
    var l = map.map.clientWidth - 10;
    var t = map.map.clientHeight - 10;
    setStyle(this.food,{
        width:"10px",
        height:"10px",
        backgroundColor:getColor(),
        position:"absolute",
        left:getRandom(0,l) + "px",
        top:getRandom(0,t) + "px",
        border:"1px solid #000"
    });   
    // 将食物放到地图中
    map.map.appendChild(this.food);
}   
var food = new Food();

// 蛇
function Snake(){
    // 身体组成部分 - 用数组 - 存了3个坐标
    this.body = [
        {
            x:20,
            y:0
        },
        {
            x:10,
            y:0
        },
        {
            x:0,
            y:0
        }
    ];
    // 蛇移动的方向
    this.direction = "down";
    var _this = this;
    // 应该监听一下键盘事件，敲击键盘能改变方向
    document.onkeypress=function(e){
        var e = e || window.event;
        var keycode = e.keyCode || e.which;
        // console.log(keycode);
        switch(keycode){
            case 119: // "w键"
                _this.direction = "up"
            break;
            case 115: // "s键"
                _this.direction = "down"
            break;
            case 97: // "a键"
                _this.direction = "left"
            break;
            case 100:
                _this.direction = "right"
            break;
        }
        // console.log(_this);
    }
    // 让蛇显示
    this.show();
    // 让蛇移动
    // 让蛇移动设置定时器
    setInterval(()=>{
        this.move();
    },500);
    
}
// 蛇要显示的方法
Snake.prototype.show = function(){
    // 获取地图中原来的蛇的身体的div
    var snakes = document.querySelectorAll(".snake");
    if(snakes.length!=0){
        for(var i=snakes.length-1;i>=0;i--){
            map.map.removeChild(snakes[i]);
        }
    }
    // 通过遍历身体，创建身体
    for(var i=0;i<this.body.length;i++){
        var div = document.createElement("div");
        setStyle(div,{
            width:"10px",
            height:"10px",
            background:"#000",
            position:"absolute",
            left:this.body[i].x + "px",
            top:this.body[i].y + "px"
        });
        div.className = "snake"
        if(i==0){
            setStyle(div,{
                background:"#f00",
                borderRadius:"50%"
            });
        }
        map.map.appendChild(div);
    }
}
// 让蛇动起来
Snake.prototype.move = function(){
    // 根据方向移动
    // 每节身体的坐标的替换
    for(var i=this.body.length-1;i>=0;i--){
        // i+1  的坐标应该是i的坐标
        this.body[i] = this.body[i-1];
        // i=2
        // this.body[0] = this.body[-1]
    }
    this.body[0] = {x:this.body[1].x,y:this.body[1].y}
    switch(this.direction){
        case "right":
            this.body[0].x = this.body[1].x + 10;
        break;
        case "left":
            this.body[0].x = this.body[1].x - 10;
        break;
        case "up":
            this.body[0].y = this.body[1].y - 10;   
        break;
        case "down":
            this.body[0].y = this.body[1].y + 10;   
        break;   
    }
    console.log(this.body);
    this.show();
}
var snake = new Snake();
// console.log(snake);
</script>
</html>

在这里插入图片描述

handsome_man__

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript贪吃蛇效果

要怎么做呢？代码如下：<!doctype html><html><head><meta charset="utf-8"><title>Document</title></head><body></body><script type="text/javascrip...
复制链接

扫一扫