Js贪吃蛇

JS贪吃蛇

Js原生贪吃蛇：canvas

HTML

<canvas id="can"></canvas>

#can{
    background: #000000;
    height: 400px;
    width: 850px;
}

JS

//公共板块

var blockSize = 10;
//地图的高宽
var mapW = 300;
var mapH = 150;
//历史食物var
var historyfood = new Array();
//食物数组
var img = new Image()
var arrFood = ["ananas.png","hamburg.png","watermelon.png"]
historyfood =[{x: 0,y:0}];
//贪吃蛇默认值
var snake = [{x:3,y:0},{x:2,y:0},{x:1,y:0}]

//贪吃蛇方向
var directionX = 1;
var directionY = 0;
//添加一个标记,标记食物是否被吃掉
//默认值：没有被吃掉
var isFood = false;
//判断游戏状态
//默认游戏继续
var gameState = false;

//限制贪吃蛇所移动的方向不能反方向操作
var lockleft = true;
var lockright = true;
var lockup = true;
var lockdown = true;

//贪吃蛇分数
var count = 0;
//贪吃蛇速度
var speed = 1000 - (count + 5);
$(function () {
    $("#divContainer").height($("#can").height());
    //1,获取到画布对象
    var  can = document.getElementById("can");
    //2,获取到画图工具箱
    var tools = can.getContext('2d');
    tools.beginPath();
    //设置食物默认值
    var XY = Randomfood();
    console.log(XY);
    var x1 = Randomfood().x;
    var y1 = Randomfood().y;
    img.src = "/aimless/img/GluttonousSnakeFood/"+ arrFood[Math.floor(Math.random() * arrFood.length)];
    //控制贪吃蛇移动
    document.addEventListener('keydown',function (e){
        switch (e.keyCode) {
            case 38:
                if (lockup){
                    directionX = 0;
                    directionY = -1;
                    lockdown = false;
                    lockleft = true;
                    lockright = true;
                }
                break;
            case 40:
                if (lockdown){
                    directionX = 0;
                    directionY = 1;
                    lockup = false;
                    lockleft = true;
                    lockright = true;
                }
                break;
            case 37:
                if (lockleft){
                    directionX = - 1;
                    directionY = 0;
                    lockright = false;
                    lockup = true;
                    lockdown = true;
                }
                break;
            case 39:
                if (lockright){
                    directionX = 1;
                    directionY = 0;
                    lockleft = false;
                    lockup = true;
                    lockdown = true;
                }
                break;
        }
    })
    setIntervalSnake(tools,x1,y1);
    //4,找位置
})


function setIntervalSnake(tools,x1,y1){
    setInterval(function (){
        if (gameState){
            return;
        }
        //1,擦除画板
        tools.clearRect(0,0,850,420);
        var oldHead = snake[0];

        if (oldHead.x < 0 || oldHead.y < 0 || oldHead.x * blockSize >= mapW || oldHead.y * blockSize >= mapH){
            gameState = true;
            alert("游戏结束");
        }else {
            //蛇移动
            if (snake[0].x * blockSize === x1 && snake[0].y * blockSize === y1){
                isFood = true;
            } else {
                snake.pop()
            }
            var newHead = {
                x: oldHead.x + directionX,
                y: oldHead.y + directionY
            }
            snake.unshift(newHead);
        }
        //2,判断食物是否被吃掉，吃掉刷新,不吃掉不刷新
        if (isFood){
            count = count + 1;
            $("#count").html(count);
            x1 = Randomfood().x;
            y1 = Randomfood().y;
            img.src = "/aimless/img/GluttonousSnakeFood/"+ arrFood[Math.floor(Math.random() * arrFood.length)];
            isFood = false;
        }
        tools.drawImage(img,x1,y1,blockSize,blockSize);
        //蛇身数组
        var Thesnakebody = new Array();
        //3,画蛇
        for (var i = 0; i < snake.length; i++){
            if (i == 0){
                tools.fillStyle = "#9933CC";
            } else {
                var newHead1 = {
                    x: snake[i].x,
                    y: snake[i].y
                }
                Thesnakebody.unshift(newHead1);
                tools.fillStyle = "#33adcc";
            }
            tools.fillRect(snake[i].x * blockSize,snake[i].y * blockSize,blockSize,blockSize);
        }
        // //判断蛇头咬到了蛇身
        Thesnakebody.forEach(item=>{
            if(item.x == snake[0].x && item.y == snake[0].y){
                gameState = true;
                setIntervalSnake(tools,x1,y1);
            }
        })
        //4,画地图
        var width = Math.round($("#can").width()  / blockSize);
        var height = Math.round($("#can").height() / blockSize);
        for (var i = 1; i < width;i++){
            tools.moveTo(0,blockSize * i);
            tools.lineTo($("#can").width(),blockSize * i);
        }
        for (var i = 1; i <  height;i++){
            tools.moveTo(blockSize * i,0);
            tools.lineTo(blockSize * i,$("#can").height());
        }
        tools.strokeStyle = "#FFFFFF";
        //5,绘制
        tools.stroke();
    },speed / 3);
}



//随机食物不
function Randomfood() {
    var RandomX = Math.floor(Math.random() * mapW / blockSize) * blockSize;
    var RandomY = Math.floor(Math.random() * mapH / blockSize) * blockSize;
    setInterval(function (){
        snake.forEach(item=>{
            console.log(RandomX / blockSize,RandomY / blockSize);
            // console.log(item.x,item.y);
            if(item.x == RandomX / blockSize && item.y == RandomY / blockSize){
                return Randomfood();
            } else {
                return ;
            }
        })
    }, 10 / 3);
    var newRandom = {
        x: RandomX,
        y: RandomY
    }
    return newRandom;
}

(第一次写如果觉得有用点个赞)

标签：blockSize,Js,贪吃蛇,snake,tools,var,true,Math
来源： https://blog.csdn.net/qq_41043296/article/details/114527235