JS练习项目1——Javascript实现简易贪吃蛇（附源码）_js贪吃蛇吃到食物再生成食物

作者：IT小白 | 2024-08-19 08:13:54

踩

js贪吃蛇吃到食物再生成食物

文章目录

贪吃蛇项目

贪吃蛇项目

1.项目预览

在这里插入图片描述

功能实现：
- 可以通过键盘的 上下左右 控制蛇的移动
- 游戏刚开始随机生成食物，蛇默认往右走
- 在没吃到食物前，食物静止不动；吃到食物后，食物随机生成
- 蛇每吃到一个食物身体（蛇节）增加一节
- 当蛇头碰到地图（方格）的边界时，游戏结束（蛇无法再控制，静止不动）

2.起步(涉及知识点)

canvas ：相当于画布；行内元素，让方格在网页水平居中对齐先转块级（ display: block); 宽高设置用行内样式。

canvas 参数：
- getContext(‘2d’) 获取绘制工具箱；创建 Context 对象
- fillStyle = ‘blue` or fillStyle = ‘#ccc’ 填充颜色
- fillRect 绘制矩形 fillRect(x,y,width,height)
- strokeStyle 绘制画笔的颜色
- stroke() 开始绘制
- clearRect() 擦除画布上的内容
- moveTo 定义线条开始时的坐标
- lineTo 定义线条结束时的坐标

setInterval: 定时器，蛇移动的原理就是，利用每一张不同位置的蛇的位置图片，一直覆盖掉（并擦除掉上一次的图）上一张的图，通过定时器 1000/3 （1s执行3次这样的操作），让视觉效果看起来蛇平滑的移动。

addEventListener: 事件监听（keydown）键盘按下监听，利用 e.keyCode 获取 上下左右 对应的键值（上： 38 下： 40 左：37 右：39）

pop(): pop() 删除并返回数组的最后一个元素

unshift(): 向数组的开头添加一个或多个元素，并返回新的长度

3.源码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇绘制</title>
    <!-- 设置一个背景色、 -->
    <style>
        canvas {
   
            /* 在这里要居中的时候，要先转成块级元素 */
            display: block;
            margin: 0 auto;
            background-color: #33cc99;
        }
    </style>
</head>

<body>
    <!-- 准备画布 -->
    <canvas width="500" height="500" id="huabu">
    
</canvas>
</body>

<script>
    // 通过 js 代码来绘制网格
    // 获取画布对象
    let huabu = document.getElementById('huabu');
    // 获取绘制工具箱
    let tools = huabu.getContext('2d');
    // 从画图工具箱取出要使用的工具;
    // 随机生成x 和 y轴的坐标
    let x = Math.floor(Math.random() * 20) * 25;
    let y = Math.floor(Math.random() * 20) * 25;
    let isEated = false;

    // 每次移动的距离为一格(默认就是在这个位置出发)
    let snake = [{
   
        x: 3,
        y: 0
    }, {
   
        x: 2,
        y: 0
    }, {
   
        x: 1,
        y: 0
    }]

    let directionX = 1;
    let directionY = 0;

    // 判断游戏是否结束
    let isGameOver = false;

    document.addEventListener('keydown', (e) => {
   
        let k = event.keyCode;
        // 上： 38 下： 40 左：37 右：39
        if (k === 38) {
   
            direc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/1001443