canvas技术贪吃蛇

adeworld
于 2024-10-03 19:48:55 发布
阅读量278
点赞数 3
CC 4.0 BY-SA版权
文章标签： javascript
本文链接：https://blog.youkuaiyun.com/qq_51292450/article/details/142695219
实现了移动蛇头方向键操作，计分等基础功能。
废话不多说以下为代码:
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--script src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js"></script>
<script>let vConsole = new VConsole();
</script-->
    <title>贪吃蛇</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        body {
            background: #ccc;
            box-sizing: border-box;

        }
        
        canvas {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            filter: drop-shadow(0 0 5px rgb(30, 144, 255));
        }
.moves{
position:relative;
top:460px;
left:120px;
    width:110px;
height:110px;
font-size:48px;
color:#fff;
     box-sizing: border-box;
}
.tops{
text-align:center;
position:absolute;
left:42px;    
}
.rights{

position:absolute;
top:25px;
right:3px;
    /*text-align:right;*/

}
.lefts{

position:absolute;
top:25px;
left:3px;
}
.bottoms{
position:absolute;
top: 60px;
left:46px;
transform: rotate(90deg);
}
.df{
position:relative;
top:30px;
/*color:#e8d34a;*/
color:#fff;
font-size:18px;
box-sizing: border-box;
    text-align:center;
}
.sd{
position:relative;
top:420px;
left:50px;
    width:30px;
height:20px;
}
    </style>
<style>
    body{            box-sizing: border-box;
}
</style>
</head>

<body>
    <p class="df"></p>
    <canvas></canvas>
<div class="moves">
    <span class="tops"> ^ </span>
    <span class="rights"> > </span>
    <span class="bottoms"> > </span>
    <span class="lefts"> < </span>
</div>
<input type="number" value='200' class="sd"/>

    <script>
        let oCanvas = document.querySelector("canvas");
let sd=document.querySelector(".sd");
let df=document.querySelector('.df')
let tops=document.querySelector(".tops")
let rights=document.querySelector(".rights")
let bottoms=document.querySelector(".bottoms")
let lefts=document.querySelector(".lefts")


        let ctx = oCanvas.getContext('2d');
        oCanvas.width = 300;
        oCanvas.height = 300;

        let _snake = [];
        let _direction = {
            x: -1,
            y: 0
        };
        let _food = {};
        let newgame = () => {
            _snake = [];
            for (let i = 0; i < 5; i++) {
                _snake.push({
                    x: 10,
                    y: 10
                })
            }
            _food = {
                x: parseInt(Math.random() * 20),
                y: parseInt(Math.random() * 20)
            }
        };
        let draw = () => {
            ctx.clearRect(0, 0, oCanvas.width, oCanvas.height);
            ctx.fillStyle = 'rgba(241,242,246,0.8)';
            for (let x = 0; x < 20; x++) {
                for (let y = 0; y < 20; y++) {
                    ctx.fillRect(x * 15, y * 15, 14, 14);


                }
            }
            ctx.fillStyle = 'rgba(47,53,66,0.8)';
            for (let i = 0; i < _snake.length; i++) {
                $_body = _snake[i];
                ctx.fillRect($_body.x * 15, $_body.y * 15, 14, 14);
df.innerText=`得分:${_snake.length-5}`;

                if ($_body.x == _snake[0].x && $_body.y == _snake[0].y && i != 0) {
                    alert("游戏结束了");
                    newgame();
                }
            }

            ctx.fillStyle = 'rgba(55,66,250,0.8)';
            ctx.fillRect(_food.x * 15, _food.y * 15, 14, 14);
        };
        let move = () => {
            let newSnake = {};
            switch (_snake[0].x + _direction.x) {
                case -1:
                    newSnake.x = 19;
                    break;
                case 20:
                    newSnake.x = 0;
                    break;
                default:
                    newSnake.x = _snake[0].x + _direction.x;
            }
            switch (_snake[0].y + _direction.y) {
                case -1:
                    newSnake.y = 19;
                    break;
                case 20:
                    newSnake.y = 0;
                    break;
                default:
                    newSnake.y = _snake[0].y + _direction.y;
            }
            _snake.splice(0, 0, {
                x: newSnake.x,
                y: newSnake.y
            });
            if (_snake[0].x == _food.x && _snake[0].y == _food.y) {
                _food = {
                    x: parseInt(Math.random() * 20),
                    y: parseInt(Math.random() * 20)
                }
                /*_snake.push(_snake[-1]);
                _snake.push(_snake[-1]);*/
                _snake.push(_snake[-1]);
            }
            _snake.pop();
            draw()
        };
tops.onclick=()=>{
    if (_direction.y != 1) {
     _direction.y = -1;
     _direction.x = 0;
}
    
}
bottoms.onclick=()=>{
    if (_direction.y != -1) {
     _direction.y = 1;
     _direction.x = 0;
}


}
lefts.onclick=()=>{
    if (_direction.x != 1) {
     _direction.y = 0;
     _direction.x = -1;
}

}
rights.onclick=()=>{
    if (_direction.x != -1) {
     _direction.y = 0;
     _direction.x = 1;
}
}

        document.addEventListener('keydown', (ev) => {
            switch (ev.key) {
                case 'ArrowUp':
                    if (_direction.y != 1) {
                        _direction.y = -1;
                        _direction.x = 0;
                    }
                    break;

                case 'ArrowDown':
                    if (_direction.y != -1) {
                        _direction.y = 1;
                        _direction.x = 0;
                    }
                    break;

                case 'ArrowLeft':
                    if (_direction.x != 1) {
                        _direction.y = 0;
                        _direction.x = -1;
                    }
                    break;

                case 'ArrowRight':
                    if (_direction.x != -1) {
                        _direction.y = 0;
                        _direction.x = 1;
                    }
                    break;

            }
        })

        newgame();
       setInterval(move,200 );
sd.onkeyup=function (e){
if(e.keyCode==13){
  let sds=this.value;
//setTimeout()
//clearTimeout()
clearInterval()
   // console.log(sds)
        setInterval(move,sds );
clearInterval()
}
}

    </script>
</body>

</html>
以上代码实现了，全部功能