JS实现简单的游戏贪吃蛇

最新推荐文章于 2021-08-17 10:43:46 发布

The butcher

最新推荐文章于 2021-08-17 10:43:46 发布

阅读量1.2k

点赞数 1

文章标签： js

本文链接：https://blog.csdn.net/yangyabing2020/article/details/107049734

版权

本文介绍了如何使用JavaScript实现一个基本的贪吃蛇游戏。通过控制蛇的移动，碰撞检测和食物生成，深入理解JavaScript事件处理和DOM操作。适合初级开发者提升JavaScript技能。

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


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
</body>
<script>
    // 贪吃蛇：
        // 键盘的方向键，控制蛇的方向，碰撞食物，实现增加长度的效果，撞到墙壁或自身，游戏结束
    // 分析：
        // 地图：提供边界
        // 食物：随机出现，可以被碰撞（坐标重复）
        // 蛇：初始的固定长度，移动，改变方向，碰撞食物，碰撞墙，碰撞自己（坐标重复）
    
    class Map{
   
        constructor(){
   
            // 提前设定将来的地图的样式数据
            this.w = 800;
            this.h = 400;
            this.c = "#ccc";
            // 执行创建地图方法
            this.createEle();
        }
        createEle(){
   
            this.mapEle = document.createElement("div");
            this.mapEle.style.cssText = `width:${
   this.w}px;height:${
   this.h}px;background:${
   this.c};margin:0 auto;position:relative;border:solid 10px black;`;
            document.body.appendChild(this.mapEle);
        }
    }
    class Food{
   
        constructor(){
   
            // 提前设定将来的食物的样式数据
            this.w = 20;
            this.h = 20;
            this.c = "red";
            this.x = 0;
            this.y = 0;
            // 执行创建食物方法
            this.createEle();
        }
        createEle(){
   
            this.foodEle = document.createElement("div");
            // 设置left和top时要注意，将地图假设成了20个像素的一个格子，注意位置的换算
            this.foodEle.style.cssText = `width:${
   this.w}px;height:${
   this.h}px;background:${
   this.c};position:absolute;left:${
   this.x * this.w}px;top:$