贪吃蛇小程序

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>画布canvas</h1>
<canvas id="gameCanvas" width="600" height="600" style="">
    您的浏览器版本过低，请更新后再试
</canvas>
</body>
</html>
<script>
    const gameCanvas = document.getElementById("gameCanvas")//声明变量
    const ctx = gameCanvas.getContext("2d")//获取canvas上下文环境，可以理解成获取了canvas功能
    const gridSize = 30//方块大小
    const bgColor = "#ddbb80", snakeColor = "#3333ff", foodColor = "#00ff00"
    //背景颜色 蛇的颜色 食物的颜
    let food
    let direction = 1
    const snakeArray = [45, 44, 43] //蛇初始位置
    //snake移动
    let snakeMoveTimer = null
    // let canChangeDirection = true
    /*  //绘制一条线
      ctx.beginPath()//开始绘制
      ctx.moveTo(0,20)//把笔移动到这个点
      ctx.lineTo(600,20)//画线到这个点
      ctx.stroke()//动手画*/
function drawBoard(){
    //绘制一个长方形
    ctx.fillStyle = bgColor
    ctx.fillRect(0, 0, gameCanvas.width, gameCanvas.height)  //在0，0这个点，向右向下绘制一个长方形，宽度为width，height
    //在画布上画网格
    for (let x = 0; x <= gameCanvas.width; x += gridSize) {
        ctx.beginPath()
        ctx.moveTo(0, x)
        ctx.lineTo(600, x)
        ctx.stroke()
    }//横线
    for (let y = 0; y <= gameCanvas.height; y += gridSize) {
        ctx.beginPath()
        ctx.moveTo(y, 0)
        ctx.lineTo(y, 600)
        ctx.stroke()
    }//竖线
}

    function drawSquare(color, number) {
        ctx.fillStyle = color
        ctx.fillRect(number % (gameCanvas.width / gridSize) * gridSize + 1, Math.floor(number / (gameCanvas.width / gridSize)) * gridSize + 1, 30 - 2, 30 - 2)
    }
    function gameOver(){
        clearInterval(snakeMoveTimer)
        onkeydown=null
    }

    //绘制食物
    /* let food
     do {
         food = Math.floor(Math.random() * gameCanvas.width / gridSize * gameCanvas.height / gridSize)
     } while (snakeArray.filter(value => value === food).length > 0)//生成了新数组，导致内存浪费，不建议使用*/

    /* let food;
     do {
         food = Math.floor(Math.random() * (gameCanvas.width / gridSize) * (gameCanvas.height / gridSize));
     } while (snakeArray.some(value => value === food))//同上，但不生成新数组*/
    function createFood() {
        do {
            food = Math.floor(Math.random() * (gameCanvas.width / gridSize) * (gameCanvas.height / gridSize));
        } while (snakeArray.find(value => value === food))//同上
        drawSquare(foodColor, food)
    }
    function snakeMove() {
        const next = snakeArray[0] + direction
        if (next < 0 || next > 399 || (snakeArray[0] % 20 === 19 && next % 20 === 0) || (snakeArray[0] % 20 === 0 && next % 20 === 19) ||
            snakeArray.find(value => value === next)) {
            return gameOver()
        }
        snakeArray.unshift(next)
        let deleteSnakeItem
        if (food !== next) deleteSnakeItem = snakeArray.pop()
        else createFood()
        drawSquare(bgColor, deleteSnakeItem)
        snakeArray.forEach(value => drawSquare(snakeColor, value))
    }  
    function init(){
    drawBoard()
    snakeMoveTimer=setInterval(snakeMove,200)
    createFood()
    //判断蛇与生成的食物是否重叠，如果当前位置和生成的食物重叠，就继续生成新的食物
    onkeydown = function (event) {
        //通过event触发键盘事件使蛇移动.  37,38,39,40分别代表左,上,右,下
        console.log(event.keyCode)
        if (event.keyCode === 37&&direction!==1) {
            return direction = -1
        }
        if (event.keyCode === 38&&direction!==20) {
            return direction = -20
        }
        if (event.keyCode === 39&&direction!==-1) {
            return direction = 1
        }
        if (event.keyCode === 40&&direction!==-20) {
            return direction = 20
        }
    }
}
init()
</script>
posted @ 2023-06-13 11:50  曾像夜那么黑  阅读(227)  评论(0)    收藏  举报