小游戏贪吃蛇之---------初级版本

最新推荐文章于 2023-07-29 20:47:47 发布
最新推荐文章于 2023-07-29 20:47:47 发布
阅读量284 收藏 9
点赞数 4
分类专栏： web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44899153/article/details/90707715
版权

小游戏贪吃蛇之---------初级版本

贪吃蛇小游戏我相信大家都玩过,我就不仔细介绍了,直接上代码,我只是刚入门,希望看到的小伙伴给提意见,我自己也会慢慢优化
贪吃蛇的几个页面效果图如下

  1. 首页
    在这里插入图片描述
  2. 游戏开始页面
    在这里插入图片描述
  3. 游戏结束页面在这里插入图片描述
    代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #map{
            width: 800px;
            height: 800px;
            background-color: green;
            position: relative;
            margin: 10px auto;
        }
        #mapinner{
            display: block;
            text-align: center;
            padding-top:58px;
            font-size: 80px;
            color: white;
        }
        #btn1,#btn2,#btn0,#btn3,#btn4,#btn5{
            width: 300px;
            height: 60px;
            line-height: 60px;
            font-size: 40px;
            position: absolute;
            background-color: purple;
            color:white;
            border: 1px solid purple;
            border-radius: 5px;
            box-shadow: purple 0 0 2px 3px ;
            left: 50%;
            margin-left: -150px;
        }
        #btn0{
            top: 300px;
        }
        #btn1{
            top: 410px;
        }
       #btn2{
            top: 510px;
        }
        #btn3{
            top: 630px;
        }
        #btn5{
            top: 500px;
            display: none;
        }
        #btn4{
            top: 350px;
            display: none;
        }
    </style>


</head>
<body>
<div id="map">
    <h1 id="mapinner">WELCOME TO SNAKE WORLD</h1>
    <button id="btn0">开始游戏</button>
    <button id="btn1">初出茅庐</button>
    <button id="btn2">有把刷子</button>
    <button id="btn3">无所畏惧</button>
    <button id="btn4">返回首页</button>
    <button id="btn5">再来一次</button>


</div>
<script src="js/common.js"></script>
<script>
    var mapinner=myId("mapinner");//获取标题,即h1标签
    var btns=myTN("button");//获取所有的button
    var map=myId("map");//获取地图
    var shiWu;//定义储存食物的盒子,以便在小蛇死亡的时候删除食物
    //在首页开始游戏是,页面的变化
    function start(){
        mapinner.innerText="";//让h1标签文字为空,即标题为空
        for(var i=0;i<4;i++){
            btns[i].style.display="none";//让所有的按钮隐藏
        }
    }
    //小蛇死亡的时候页面的变化
    function close(){
        btns[4].style.display="block";//显示返回首页
        btns[5].style.display="block";//显示再来一次
        map.removeChild(shiWu);//删掉食物
        mapinner.style.fontSize=100+"px";//给h1标签设置字体大小
        mapinner.style.paddingTop=120+"px";//给h1标签设置位置
    }
    //再来一次游戏时页面的效果
    function again(){
        btns[4].style.display="none";//让返回首页隐藏
        btns[5].style.display="none";//让再来一次隐藏
    }
    //食物对象
    ((function(){
        //要整体一点
        //食物对象,小蛇对象,最后整合成游戏对象
        //1.自定义食物构造函数-----一般属性放在构造函数里面
        //@pramas(width 食物的宽  height  食物的宽  color食物的背景颜色  x 食物的left值)
        function Food(width,height,color,x,y){
            this.width=width||20;
            this.height=height||20;
            this.color=color||"purple";
            this.x=x||0;
            this.y=y||0;
            this.element=document.createElement("div");
        }
        //2.在原型对象上初始化食物
        Food.prototype.init=function(){
            //2-1.设置div的样式,并添加进去
            var div=this.element;
            shiWu=this.element;
            div.style.width=this.width+"px";
            div.style.height=this.height+"px";
            div.style.backgroundColor=this.color;
            div.style.position="absolute";
            //设置随机坐标(0-39)*20
            //1.取随机坐标
            this.x=parseInt(Math.random()*(map.offsetWidth/this.width))*this.width;
            this.y=parseInt(Math.random()*(map.offsetHeight/this.height))*this.height;
            //2.设置随机坐标
            div.style.left=this.x+"px";
            div.style.top=this.y+"px";
            map.appendChild(div);
        }
        // 3.把Food暴露给window
        window.Food=Food;
    })());

    //小蛇对象
    ((function(){
        var elements=[];//存放蛇的部位
        //1.小蛇的构造函数
        function Snake(width,height,direction){
            //小蛇的每个部位
            this.width=width||20;
            this.height=height||20;
            //小蛇头的方向
            this.direction=direction||"right";
            //小蛇的身体刻度,颜色
            this.body=[
                {x:3,y:1,color:"green"},//小蛇的头
                {x:2,y:1,color:"#82C734"},//身体
                {x:1,y:1,color:"#82C734"}//身体
            ]
        }
        //2.在原型中初始化小蛇
        Snake.prototype.init=function(){
            //在创建新小蛇之前,先把最前面创建的小蛇删掉
            remove();
            //2.1遍历地创建div
            for(var i=0;i<this.body.length;i++){
                //每一个部位的刻度和颜色添加到obj对象中
                var obj=this.body[i];
                //创建div并添加样式
                var div=document.createElement("div");
                div.style.width=this.width+"px";
                div.style.height=this.height+"px";
                div.style.position="absolute";
                div.style.backgroundColor=obj.color;
                div.style.borderRadius="50%";
                if(i==0){
                    div.style.backgroundImage="url(image/shetou.png)";
                }
                //设置坐标
                div.style.left=obj.x*this.width+"px";
                div.style.top=obj.y*this.height+"px";
                map.appendChild(div);
                //把蛇添加到数组里---目的:为了删除多画的蛇
                elements.push(div);
            }
        }
        //3.添加方法--移动小蛇
        Snake.prototype.move=function(food){
            //3.1改变小蛇身体的坐标,因为小蛇的头部判断方向
            for(var i=this.body.length-1;i>0;i--){
                //当i=2时,让第三块的x坐标=第二块x的坐标
                this.body[i].x=this.body[i-1].x;
                this.body[i].y=this.body[i-1].y;
            }
            //3.2  判断小蛇头部的坐标
            //如果小蛇往上走,y-1;
            switch(this.direction){
                case "right":this.body[0].x++;//this.body[0]值得是小蛇的头部
                    break;
                case "left":this.body[0].x--;
                    break;
                case "top":this.body[0].y--;
                    break;
                case "bottom":this.body[0].y++;
                    break;
            }
            //3.3判断小蛇是否吃到食物--即判断头部的坐标是否和食物的坐标一致
            //头部的坐标
            var headX=this.body[0].x*this.width;
            var headY=this.body[0].y*this.height;
            //食物的坐标
            var foodX=food.x;
            var foodY=food.y;
            if(headX==foodX&&headY==foodY){
                //追加一个蛇的身体到body最后
                var last=this.body[this.body.length-1];//复制小蛇的尾巴
                this.body.push({
                    x:last.x,
                    y:last.y,
                    color:last.color
                })
                //食物吃完了要重新刷新位置
                food.init();
            }
        }
        //4.封装删除小蛇的函数
        function remove(){
            //提问:先删除头还是尾巴
            for(var i=elements.length-1;i>=0;i--){
                var ele=elements[i];
                //删除地图里面多余的div
                ele.parentNode.removeChild(ele);
                //删除数组里面存放的div
                elements.splice(i,1);
            }
        }
        window.Snake=Snake;
    })());

    // 游戏对象
    ((function(){
        var that;
        var map=myId("map");
        //1.游戏的构造函数
        function Game(){
            this.food=new Food();
            this.snake=new Snake();
            // this.map=map;
            that=this;
        }
        //2.初始化游戏
        Game.prototype.init=function(){
            this.food.init();
            this.snake.init();
            this.bindKey();
        }
        // 3.添加方法使小蛇跑起来
        Game.prototype.runSnake=function(speed){
            var timeId= setInterval(function(){//setInterval是由Window调用的
                that.snake.move(that.food);
                that.snake.init();
                //判断横纵坐标的最大最小值
                var maxX=map.offsetWidth/that.snake.width;
                var maxY=map.offsetHeight/that.snake.height;
                //蛇头的坐标
                var headX=that.snake.body[0].x;
                var headY=that.snake.body[0].y;
                //判断小蛇是否吃了自己,如果是,则游戏结束
                for(var i=1;i<that.snake.body.length-1;i++){
                    if(that.snake.body[0].x==that.snake.body[i].x&&
                        that.snake.body[0].y==that.snake.body[i].y){
                        mapinner.innerText="也许蛇肉很好吃";
                        close();
                        clearInterval(timeId);
                    }
                }
                //判断小蛇有没有撞墙,撞墙就游戏结束
                if(headX<0||headX>=maxX){
                    //清除定时器
                    mapinner.innerText="GAME OVER";
                    close();
                    clearInterval(timeId);
                }
                if(headY<0||headY>=maxY){
                    //清除定时器
                    mapinner.innerText="GAME OVER";
                    close();
                    clearInterval(timeId);
                }

            },speed);
        }
        //4.设置用户按键,来改变小蛇移动的方向
        Game.prototype.bindKey=function(){
            document.addEventListener("keydown",function(e){
                console.log(e.keyCode);
                switch(e.keyCode){
                    case 37:
                        //添加判断是为了让小蛇不能掉头
                        if(that.snake.direction!="right"){
                            that.snake.direction="left";
                        }
                        break;
                    case 38:
                        if(that.snake.direction!="bottom"){
                            that.snake.direction="top";
                        }
                        break;
                    case 39:
                        if(that.snake.direction!="left"){
                            that.snake.direction="right";
                        }
                        break;
                    case 40:
                        if(that.snake.direction!="top"){
                            that.snake.direction="bottom";
                        }
                        break;
                }
            })
        }
        btns[4].onmousedown=function(){
            window.location.reload();
        }
        window.Game=Game;
    })());
    //循环遍历首页按钮,并且设置对应的速度
    for (var i=0;i<4;i++){
        btns[i].index=i+1;//给每个btn添加一个索引,并将索引值设置给index
        btns[i].onclick=function(){
            start();
            console.log(this.index);
            var speed=200 / parseInt(this.index );//设置对应难度的速度
            var game=new Game();
            game.init();
            game.runSnake(speed);
            btns[5].onmousedown=function(){
                var game=new Game();
                game.init();
                game.runSnake(speed);
                start();
                again();
            }
        }
    }
</script>
</body>
</html>

以上代码及页面效果只是初级未加工的,后期会跟进页面的润色,贪吃蛇的基本效果都可以实现

Cc.＇沐艿伊℡
关注
  • 4
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
贪吃蛇的实现以及优化（基于控制台）
qq_48063427的博客
12-27 2538
文章目录前言一、基于控制台实现。二、为贪吃蛇添加更多创新。1.输出一个比较漂亮的图像作为墙体2.读入数据i总结 前言 上一个blog我们讲了讲贪吃蛇的核心思想，其实主要就是整个贪吃蛇游戏最核心的部分，有了那些核心思想完成一个简陋的贪吃蛇不成问题。那么如何让简陋的贪吃蛇不再简陋呢？这一篇我们就主要来讲一下如何实现更加完美的贪吃蛇。 一、基于控制台实现。 开始的时候是想过要用MFC来实现整个贪吃蛇的，也百度了一下相关教程，我所知道的就是B站上只有一篇是讲述MFC实现贪吃蛇的视频。B站上讲解的视频确实讲了很重点的
JS贪吃蛇游戏代码.rar
05-27
这款游戏具有多个难度等级，包括初级、中级、高级、超高级和变态模式，满足不同玩家的需求，让游戏体验更加丰富多变。通过选择不同的难度，玩家可以根据自己的技能水平进行挑战，并在游戏进行时自由调整难度，增加了...
贪吃蛇外加优化界面，质量保证python中pygame，有开始界面和主体运行部分，满足广大需求
01-21
音乐，图像，tk开始界面的插入，满足作业或者自己练习的需要。定义函数，如蛇身食物等，之后进入main主函数中，图片的插入pygame.image.load，音乐的插入分为两种，一种为MP3格式的音频的插入pygame.mixer.music.load，另一种为WAV格式的插入pygame.mixer.Sound。使用if fdrect.collidepoint(pos)：来判断是否发生蛇头与食物的碰撞。使用if来实现游戏的重开和按键退出。在tkinter中运用到了label和button实现图片得插入与按钮的插入。(text.render(),())来完成文字的插入。
优化后的贪吃蛇游戏 带详细设计报告 功能非常齐全 完整源码
最新发布
bangxiecode的博客
07-29 614
Java开发的贪吃蛇游戏，完整源码，直接下载。主要功能如下： 1. 利用方向键来改变蛇的运行方向。 2. 空格键暂停或继续游戏，并在随机的地方产生食物。 3. 可以通过设置区域的设置按钮来改变游戏的背景颜色,游戏中蛇的蛇头颜色,蛇身颜色,食物颜色以及石头的颜色. 4. 通过按键来调节蛇的移动速度,来增加游戏的难度. 5. 在面板上添加不同的地图布局,来使游戏更加好玩. 6. 吃到食物就变成新的蛇体，碰到障碍物石头或自身则游戏结束，否则正常运行 7. 查看积分排行和保存每盘游戏记录 8
【CocosCreator】贪吃蛇前进性能分析（二）
MOMO
03-07 762
​首先上一张图在有15条蛇，同时每个的长度是50000个身体，在进行前进的时候遍历这么多申请GameLogic 占用时间多主要用到了array的push 和unshift。 ------优化前----------- -----优化后------- 从原理就可以知道，unshift的效率是较低的。原因是，它每添加一个元素，都要把现有元素往下移一个位置。但到底效率差异有多大呢？下面来测试一下。 以下一下代码是默认array 的测试数据和自定义链表的测试数据。 let array = ..
WPF贪吃蛇游戏开发详解
07-01
本课程主要讲解了如何使用WPF开发经典《贪吃蛇》游戏。WPF(Windows Presentation Foundation)是微软公司大力推行的一款基于.NET平台的用户界面开发框架，它提供了统一的编程模型、语言和框架，真正做到了界面设计人员与开发人员的工作的分离，同时它也提供了全新的多媒体交互用户图形界面。由于其开发效率高，从而成为各大行业软件开发的首选。本课程以经典游戏《贪吃蛇》为例，通过综合C#与WPF的编程中的多种技巧，从而整合成一个完整的游戏项目。赵老师在每一段关键代码的实现中，都进行了详细的讲述，力求新手都可以看明白。学完该课程后，若再加以练习，基本上可以套用此编程模式，用WPF实现市面上大多数此类小游戏。
美女贪吃蛇小游戏源码.7z
07-07
本源码是一个简单的C#版美女贪吃蛇小游戏源码，基于Winform技术制作。控制方向键即可。右侧有记分板，每走一步都记加分。贪吃蛇身体掠过的地方就会显示背景图片，身体越长，显示的越多，玩家可以将图片换成自己喜欢...
Java-贪吃蛇报告.pdf
06-14
【Java贪吃蛇游戏开发】 本报告主要涵盖了Java高级编程课程的一个项目——贪吃蛇游戏的开发。项目小组成员分工明确，分别负责设计与编码、测试等不同环节，旨在通过这个游戏开发，提升Java编程和软件工程实践能力。...
简易贪吃蛇游戏代码.zip
07-04
贪吃蛇游戏，作为一个经典的编程练习项目，深受初级编程者喜爱。本文将深入解析一款基于JavaScript（JS）和HTML5开发的简易贪吃蛇游戏，同时涵盖CSS3的颜色特效和背景图片的实现，为初学者提供一个良好的学习平台。 ...
安卓贪吃蛇小游戏
12-30
【安卓贪吃蛇小游戏】是一款基于安卓平台的简易游戏，它是许多初级安卓开发者在学习过程中常见的课程设计项目。这款游戏以其简单直观的操作和经典的玩法深受玩家喜爱，同时也是学习安卓应用开发的良好实践。 首先，...
优化界面的贪吃蛇Java
12-02
通过eclipse编写 界面美丽 功能健全----实现了毒蘑菇、火球等特色玩法
智能寻路贪吃蛇 AI
02-04
本资源是我的一个贪吃蛇系列博客的配套程序,实现了一个有AI寻路算法的贪吃蛇~ 博客的地址为: http://blog.csdn.net/mrksco/article/details/18840867
轻量级Laya游戏框架
07-21
一个轻便的Laya框架,模块化的方式完全解耦,注释全,个人经验整理
贪吃蛇游戏源码
08-14
贪吃蛇游戏源码，layabox开发，可以直接导出为微信小游戏
layabox飞机大战源码
02-05
基于layabox官方教程的飞机大战源码, 包含游戏素材
学习C++第十周 优化贪吃蛇 形成项目体系
m0_73355263的博客
11-28 798
本周我回顾了以前写过的贪吃蛇程序，正如我之前所说的那样，它是存在许多不足之处的，所以我抽出一点时间对其做出了优化，并且也加入了一些新元素。当然，由于时间的缘故，很多有趣的想法我还并没有实现，比如加入特殊果实触发的彩蛋模式等等......这些都是后话了。以下是我的代码分享。
贪吃蛇代码优化
banan5035的博客
03-22 390
2017*****7101 姓名：张绥 我的码云贪吃蛇项目仓库：https://gitee.com/sweetzs/sesnake 根据PSP计划表估算各项工作需要花费的时间： 游戏改进想法：我觉得应将游戏改成成有难度，有挑战性的，比如增加关卡，会更有意思的多。 比如当吃够20个食物，贪吃蛇会进入下一关，贪吃蛇的行走会加快一级，第二关吃够20个食物， 会再次...
C++实现贪吃蛇优化版
weixin_43767691的博客
07-24 364
#ifndef _WALL_H_ #define _WALL_H_ #include<iostream> using namespace std; class WALL { public: enum {LONG = 40,WIND = 40}; //设置围墙大小 void initWall(); //初始化墙 void drawWall(); ...
贪吃蛇大作战类游戏的实现
热门推荐
oneDay的专栏
11-23 1万+
前段时间玩了一个叫做贪吃蛇大作战的手机游戏，一下子就喜欢上了，然后就有了尝试实现的想法。
精品资料（2021-2022年收藏）疯狂贪吃蛇java实现课程设计报告.doc
12-03
该报告主要描述了一个使用Java技术开发的贪吃蛇游戏，涵盖了系统目标、设计思路、详细设计、实现过程、设计总结和参考文献等内容。报告的撰写者为安阳工学院11级计算机科学与信息学专业的潘强学生，并由指导教师许研...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值