贪吃蛇

最新推荐文章于 2024-06-01 16:18:37 发布
最新推荐文章于 2024-06-01 16:18:37 发布
阅读量28 收藏
点赞数
文章标签： html 数学建模 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiangzhongyue_11/article/details/131100726
版权

<!DOCTYPE html>

<html lang="en">

<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">

    <title>Document</title>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        .container {

            width: 540px;

            height: 630px;

            background-color: #bfa;

            border: 15px solid black;

            margin: 140px auto;

            border-radius: 30px;

        }

        #stage {

            width: 465px;

            height: 465px;

            border: 3px solid black;

            margin: 25px auto;

            position: relative;

        }

        #food {

            width: 15px;

            height: 15px;

            position: absolute;

            top: 150px;

            left: 150px;

            display: flex;

            flex-wrap: wrap;

        }

        #food>div {

            width: 6.5px;

            height: 6.5px;

            background-color: #000;

            transform: rotate(45deg)

        }

        #snake>div {

            position: absolute;

            width: 15px;

            height: 15px;

            background-color: #000;

            border: 1px solid #bfa;

            top: 0;

            left: 0;

        }

        #statistics {

            display: flex;

            justify-content: space-between;

            width: 456px;

            height: 30px;

            margin: 45px auto;

            font: 25px bold Courier;

        }

    </style>

    <script>

        window.addEventListener('load', function () {

            const snake = document.getElementById('snake')

            const snakes = snake.getElementsByTagName('div')

            const food = document.getElementById('food')

            const score=document.getElementById('score')

            const level=document.getElementById('level')

            let dir

            let oneTime=true

            let counterScore=0

            let counterLevel=1

            function change(){

                food.style.top=Math.floor(Math.random()*31)*15+'px'

                food.style.left=Math.floor(Math.random()*31)*15+'px'

            }

            change()

            keyArr = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight']

            document.addEventListener('keydown', (event) => {

                if (oneTime && keyArr.includes(event.key)) {

                    if(snakes.length<2){

                        dir = event.key

                    }else if(dir==='ArrowUp' && event.key != 'ArrowDown'){

                        dir=event.key

                    }else if(dir==='ArrowDown' && event.key != 'ArrowUp'){

                        dir=event.key

                    }

                    else if(dir==='ArrowLeft' && event.key != 'ArrowRight'){

                        dir=event.key

                    }

                    else if(dir==='ArrowRight' && event.key != 'ArrowLeft'){

                        dir=event.key

                    }

                }

                oneTime=false

               

            })

         

            setTimeout(function move(){

                const head = snakes[0]

                let x=head.offsetLeft

                let y=head.offsetTop

                    switch (dir) {

                        case 'ArrowUp':

                        y-=15

                           break

                        case 'ArrowDown':

                        y+=15

                            break

                        case 'ArrowLeft':

                        x-=15

                            break

                        case 'ArrowRight':

                        x+=15

                            break

                    }

                    if(head.offsetTop===food.offsetTop && head.offsetLeft===food.offsetLeft){

                        snake.insertAdjacentHTML('beforeend','<div></div>')

                        change( )

                        counterScore+=100

                        score.textContent=`SCORE:${counterScore}`

                        if(counterScore % 1000 ===0){

                            counterLevel++

                            level.textContent=`LEVEL:${counterLevel}`

                        }

                    }

                    const tail=snakes[snakes.length-1]

                    tail.style.top=y+'px'

                    tail.style.left=x+'px'

                    snake.insertAdjacentElement('afterbegin',tail)

                    if(x<0 || y<0 || x>450 || y>450){

                        return

                    }

                    for(let i=1;i<snakes.length;i++){

                        if(snakes[i].offsetTop===y && snakes[i].offsetLeft===x){

                            return

                        }

                    }

                    oneTime=true

                    setTimeout(move,300-(counterLevel-1)*25)

                },300-(counterLevel-1)*25)


 

        })

    </script>

</head>

<body>

    <div class="container">

        <div id="stage">

            <div id="snake">

                <div></div>

            </div>

            <div id="food">

                <div></div>

                <div></div>

                <div></div>

                <div></div>

            </div>

        </div>

        <div id="statistics">

            <div id="score">

                SCORE:0

            </div>

            <div id="level">

                LEVEL:1

            </div>

        </div>

    </div>

</body>

</html>

xiangzhongyue_11
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
前端技术搭建贪吃蛇小游戏（内含源码）
官方推荐
05-29 6万+
利用前端基础HTML、CSS、JS来搭建简易版本贪吃蛇小游戏，内附源码，直接拷贝即可运行，没有前端基础的小伙伴也可以通过文章中的讲解搭建出来！
JavaScript贪吃蛇
原地起飞
11-24 5422
这篇文章不简单！！ 一、创建html结构 二、创建表格 三、创建蛇头、蛇身 四、创建食物 五、让蛇动起来 六、 控制蛇的方向 七、完整代码 index.html Game.js Snake.js Food.js 八、图片 九、总结 今天博主呕心沥血写了一个贪吃蛇的小游戏，整个过程从无到有简直扣人心弦。 接下来本博主就来好好说到说到这个过程！！ 话不多说，我们还是先来看看最后的呈现效果吧。 看完了才知道什么叫做操作，简直传奇！！ 接下来不吹牛来讲讲实际操...
贪吃蛇（C语言实现）
热门推荐
2021dragon的博客
08-18 27万+
文章目录游戏说明游戏效果展示游戏代码游戏代码详解游戏框架构建隐藏光标光标跳转初始化界面初始化蛇颜色设置随机生成食物打印蛇与覆盖蛇移动蛇执行按键判断得分与结束游戏主体逻辑函数从文件读取最高分更新最高分到文件主函数 游戏说明 游戏效果展示 游戏代码 游戏代码详解 游戏框架构建 隐藏光标 光标跳转 初始化界面 初始化蛇 颜色设置 随机生成食物 打印蛇与覆盖蛇 移动蛇 执行按键 判断得分与结束 游戏主体逻辑函数 从文件读取最高分 更新最高分到文件 主函数 ...
C语言 贪吃蛇
Genven_Liang的博客
09-16 1万+
C语言 贪吃蛇 一、简述 记--用C语言简单实现贪吃蛇小游戏。 二、效果 使用上下左右方向键控制方向，按ESC退出游戏。 三、代码结构 四、源代码 #include <stdio.h> //标准输入输出函数库 #include <stdlib.h> //包含system函数...
【Python】 Python小游戏-贪吃蛇大冒险
Up_Long的博客
04-17 9万+
一、前言 距上次更新博客，又过去很长时间了，感觉再不更新一下，自己写博客的习惯就要废了，哈哈。从去年九月份开学之后，疫情学期期末考试开学考、实验室项目软著申请和新项目设计、课程集训等事情较多，没有很多时间；然后这个学期我到大三下学期，实验室工作交接完就准备考研，之后也没有很多时间来写博客，所以赶紧来更新一下，和大家分享一些知识和心得，希望喜欢的小伙伴可以点赞、收藏和关注，哈哈。 二、贪吃蛇大冒险小游戏 一、游戏简介 1.1游戏操作及游戏规则 （1）游戏开始后，通过键盘上下左右键控制贪吃蛇移动寻找食物； （2
Python贪吃蛇
michelle_ycx的博客
10-11 2314
运用 python设计贪吃蛇游戏，其中运用了不少列表和字典 的基础知识，最明显的例子就是利用列表和字典建立一个二维坐标图，分别用 列表表示 x,y，用字典储存坐标值。还有利用随机函数 random生成随机初始位 置和随机食物位置。类比 Java中设置监听器来监听来自输入端的事件，python 中直接用循环 event.get（）获得事件。基于坐标的建立，可以轻松通过 x,y坐标 的移动来实现贪吃蛇的位置移动，使的游戏的建立更加简单。
C语言贪吃蛇
W2001r的博客
02-10 3824
编译环境：vs 2019 成像图 接下来请看代码和注释： //这里有一些是多余的 #include<stdio.h> #include<stdlib.h> #include<windows.h> #include<conio.h> #include<time.h> #include<string.h> #include<ctype.h> #include<math.h> #include<signal.h
贪吃蛇二代 —— 穿墙版（C语言实现）
2021dragon的博客
08-21 1万+
文章目录游戏说明游戏效果展示游戏代码游戏代码详解游戏框架构建初始化界面隐藏光标光标跳转颜色设置初始化蛇随机生成食物打印蛇与覆盖蛇移动蛇游戏主体逻辑函数执行按键判断得分与结束从文件读取最高分更新最高分到文件主函数 游戏说明 游戏效果展示 游戏代码 游戏代码详解 游戏框架构建 首先还是先定义一下界面的大小，即界面的行数和列数。 #define ROW 23 //界面行数 #define COL 42 //界面列数 此外，我们还需要两个结构体，分别用于存储蛇头的信息和蛇身的信息。蛇头结构体当中存储蛇头当前所在
python贪吃蛇
findhappy117的博客
09-17 2万+
代码地址如下：http://www.demodashi.com/demo/13335.html 一、先展示python贪吃蛇效果 二、操作说明 按键 功能 UP 向上移动 DOWN 向下移动 LEFT 向左移动 RIGHT 向右移动 空格 暂停/继续 F1 加速 F2 减速...
Flash 贪吃蛇
08-02
flash贪吃蛇
devc++贪吃蛇 源码
06-14
devc++贪吃蛇源码，经典贪吃蛇代码，包括众多模式，开始游戏，游戏说明，结束游戏等模块。
贪吃蛇_贪吃蛇_
10-04
贪吃蛇代码，很不错的代码，希望能帮到大家。
html 添加元素如何能提升速度
大黄鸭在发光的专栏
06-01 233
综上所述，通过使用文档片段、innerHTML、虚拟滚动以及避免频繁的重排和重绘，你可以提高在 HTML 中添加元素的速度和性能。在 HTML 中，如果你需要频繁地添加大量元素，需要确保你的操作能够以最佳性能进行。：如果你需要展示大量数据，可以考虑使用虚拟滚动来仅渲染可见区域内的元素，而不是一次性渲染所有元素。这可以节省大量时间和内存。：当添加元素时，尽量避免频繁的 DOM 操作，因为每次修改都可能会触发浏览器的重排和重绘，影响性能。
【HTML】tabindex
纠缠AI的亮子
06-01 109
索引值不应当大于0，见。
面试题：你怎么理解 HTML 语义化？语义化有什么优点？
Hlleo Wrold
05-31 765
（语义化是什么）HTML 语义化要求开发者，而不是像divspan等无意义的标签，这里的意义就是语义。（语义化的作用）通过使用语义化标签，开发者。（语义化举例）如header常用于定义nav常用于定义article常用于定义一篇section常用于定义aside常用于定义footer常用于定义main常用于定义等等。
HTML (总结黑马的)
最新发布
SKL4399的博客
06-01 132
img src="./cat.jpg" alt="替换文本" title="提示文本"> 替换文本是图片没有显示的时候显示对应的文字；定义列表： 标签：dl 嵌套 dt 和 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述 / 详情 类似于苹果官网最下面的那个效果。 女。
labwindows 贪吃蛇
01-04
LabWindows贪吃蛇是一个基于传统贪吃蛇游戏的实验室模拟程序。在这个游戏中，玩家需要控制一个蛇来吃食物并尽可能多地增加身体的长度，同时要避开撞到墙壁或是自己的身体。LabWindows贪吃蛇不仅具有传统贪吃蛇游戏的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值