JS练习项目1——Javascript实现简易贪吃蛇（附源码）

最新推荐文章于 2023-02-08 21:14:33 发布

UndeFIned丶

最新推荐文章于 2023-02-08 21:14:33 发布

阅读量1.2k

点赞数 3

分类专栏： JavaScript学习文章标签： javascript

Atuthor:Chen.orange

本文链接：https://blog.csdn.net/weixin_46313446/article/details/108572735

版权

本文介绍了使用JavaScript创建贪吃蛇项目的步骤。项目包括通过键盘控制蛇移动、食物随机生成、蛇身增长以及游戏结束条件。涉及的知识点有HTML canvas、事件监听、定时器以及数组操作。附带完整源码。

摘要由CSDN通过智能技术生成

文章目录

贪吃蛇项目

贪吃蛇项目

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