JS实现简单的游戏贪吃蛇_贪吃蛇贪吃蛇

作者：喵喵爱编程 | 2024-08-19 08:12:51

踩

贪吃蛇贪吃蛇


<!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:$
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

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