专栏首页IT技术圈贪吃蛇的使命 | 零基础入门贪吃蛇游戏(附源码、演示地址)

贪吃蛇的使命 | 零基础入门贪吃蛇游戏(附源码、演示地址)

「C·you·again」

感恩 执着 相信 放下

大家好啊,老铁们,二零二零年八月二十九日,一个人来到成都的第六天。人生总有许许多多的不如意。每天都会遇见不同的人,经历不同的事,还好我们年轻,经得起折腾!

今天分享自己在大学初识HTML时编写的贪吃蛇小游戏吧,虽说代码简单,但对于大一时的自己,还是花了不少精力的。此篇文章写给茫茫人海奋斗的你,从“小蛇”---“蟒蛇”的过程就是要不断摄取“食物”。

源码获取:公众号【C you again】 ,回复“贪吃蛇”免费获取

演示地址:公众号【C you again】 ,回复“贪吃蛇演示”获取

1、游戏描述

贪吃蛇是一款非常经典的休闲类游戏。在一块固定大小的区域内,游戏玩家通过控制贪吃蛇的移动去吃食物,吃到食物后蛇身体变长。食物被蛇吃到后立马消失,并再次随机产生。蛇撞到四周墙壁或者自己身体时死亡。

2、前期准备

2.1 具备技能

本游戏虽说是零基础,但你具备以下技能最佳:

1、HTML(主要是div盒子模型,canvas画布)

2、CSS(为你好看的游戏界面做准备)

3、JavaScript(让小蛇动起来,逻辑代码实现)

2.2 开发工具

为提高开发效率,选择一款优秀的开发工具也很重要,这里小编推荐sublime text3,轻巧方便,可以去百度下载,也可以关注小编公众号“C you again”,私信获取破解中文版。当然你足够优秀,使用记事本编写小编也不拦着。

3、实现目标

本篇文章欲带你实现以下功能:

1、基本贪吃蛇(蛇的移动,吃食物,产生食物,增加分数)

2、增加暂停游戏/继续游戏功能

3、再来一局功能(贪吃蛇死亡后有再来一局提示)

4、按键约定

为方便玩家游戏,对操作按键做以下约定:

1、上、下、左、右按键分别操作贪吃蛇的四个运动方向

2、“+”、“-”按键分别控制贪吃蛇的加速、减速

3、空格键控制游戏暂停/继续

5、实现原理

1、利用canvas画布完成运动场地、食物、贪吃蛇的展示

2、利用数组存储贪吃蛇的坐标位置

3、利用上、下、左、右键改变贪吃蛇的蛇头坐标

4、不断重新绘制页面,给人造成贪吃蛇运动的错觉

6、实现逻辑

//伪代码
function 初始化数据(){
    1、初始化贪吃蛇运动区域大小
    2、初始化canvas画布上下文对象
    3、初始化贪吃蛇的坐标
    4、初始化贪吃蛇运动的方向
    5、初始化玩家分数
    6、初始化贪吃蛇的速度
    7、初始化食物
    8、初始化蛇
    9、初始化蛇的状态
 }

function 开始游戏(){
  interval = setInterval(运动方法(), speed);
  document.onkeydown = function(event) {
        var event = event || window.event;
        按键监控方法(event.keyCode);
    }
}

function 按键监控方法(key){
   switch(key){
      case: 37
      左
      break;
       case: 38
      上
      break;
       case: 39
      右
      break;
       case: 40
      下
      break;
      case: 32
      开始/暂停
      break;
      case: 107
      加速
      break;
      case: 109
      减速
      break;
   }
}

function 运动方法(){
  switch(moveTo){
     case 0:
       向左运动;
       break;
      case 1:
       向上运动;
       break;
      case 2:
       向右运动;
       break;
      case 3:
       向下运动;
       break;
  }

  画地图方法();
  画食物方法();
  画蛇方法();
  是否吃到食物方法();
  是否死亡方法();
}

function 画地图方法(){
  画地图代码实现.....
}

function 画食物方法(){
   画食物代码实现.....
}

function 画蛇方法(){
   画蛇代码实现.....
}

function 是否吃到食物方法(){
  if(蛇头左上角的坐标==食物左上角的坐标){
     //吃到食物
     1、分数加一;
     2、重新绘制食物
     3、增加蛇身
  }
}

function 是否死亡方法(){
   1、判断蛇头左上角坐标是否越过上、下、左、右任一墙壁;
   2、判断蛇头左上角坐标是否与自己身体相撞;
}

7、实现过程

7.1 全局变量的定义与解释

变量名称

说明

ROWS

行数

COLS

列数

CONTEXT

canvas上下文对象

BLOCK_SIZE

贪吃蛇运动的格子大小

snake[]

保存蛇的坐标

snakeCount

蛇身长度

foodX,foodY

食物坐标

interval

计时

moveTo

蛇移动的方向

isStop

判断蛇是否暂停

score

玩家分数

speed

蛇运动速度

7.2 方法的定义与解释

方法名称

参数

返回值

说明

init()

初始化方法

start()

游戏启动方法

reLoad()

页面重新加载方法

keydown(keyCode)

keyCode:按键的码值

交互响应方法

isDie()

判断蛇是否死亡方法

isEat()

判断蛇是否吃到食物方法

addSnake()

增加蛇身方法

addFood()

增加食物方法

move()

蛇移动方法

drawMap()

绘制运动区域方法

drawFood()

绘制食物方法

drawSnake()

绘制蛇方法

7.3 主要方法的代码实现

1、初始化方法的实现

function init() {
    ROWS = 35; //初始化行数
    COLS = 25; //初始化列数
    BLOCK_SIZE = 20;
    snakeCount = 3;
    moveTo = 2;
    score=0;
    document.getElementById("score").innerHTML=score;
    CONTEXT = document.getElementById('canvas').getContext('2d'); //初始化画布上下文对象的引用
    for(var i = 0; i < snakeCount; i++) {
        snakes[i] = {
            x: i * BLOCK_SIZE,
            y: 0
        };
    }
    isStop=false;
    speed=500;
    addFood();
    drawMap(); //初始化场地
    drawSnake(); //初始化蛇
    drawFood(); //初始化食物
}

2、绘制运动区域方法的实现

function drawMap() {
    CONTEXT.clearRect(0, 0, BLOCK_SIZE * ROWS, BLOCK_SIZE * COLS);
    //画横线
    for(var i = 0; i < COLS; i++) {
        CONTEXT.beginPath();
        CONTEXT.moveTo(0, i * BLOCK_SIZE);
        CONTEXT.lineTo(BLOCK_SIZE * ROWS, i * BLOCK_SIZE);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth=1;
        CONTEXT.stroke();
    }
    //画竖线
    for(var i = 0; i < ROWS; i++) {
        CONTEXT.beginPath();
        CONTEXT.moveTo(i * BLOCK_SIZE, 0);
        CONTEXT.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * COLS);
        CONTEXT.strokeStyle = "gray";
        CONTEXT.lineWidth=1;
        CONTEXT.stroke();
    }
}

3、判断蛇是否死亡方法的实现

function isDie() {
    if(snakes[snakeCount - 1].x == -20 || snakes[snakeCount - 1].x == BLOCK_SIZE * ROWS ||
        snakes[snakeCount - 1].y == -20 || snakes[snakeCount - 1].y == BLOCK_SIZE * COLS) {
        clearInterval(interval);
        document.getElementById("model2").style.display='block';
    }
    for(var i = 0; i < snakeCount - 1; i++) {
        if(snakes[snakeCount - 1].x == snakes[i].x && snakes[snakeCount - 1].y == snakes[i].y) {
            clearInterval(interval);
            document.getElementById("model2").style.display='block';
        }
    }
}

8、结果演示

8.1 运行

8.2 暂停

8.3 死亡

9、最后的话

1、至此贪吃蛇已制作完成,谢谢你的支持

2、本教程纯属个人思想构建,避免不了出现一些缺陷或错误,欢迎你批评指正

3、如果你对有些部分不太理解或有更好的解决办法,请在公众号“C you again”私信与我交流

4、获取源码请搜索公众号“C you again”,回复“贪吃蛇”

5、转载请标明来源

6、其它游戏教程请在公众号私信获取

- END -

C you again

● 扫码关注我们

本文分享自微信公众号 - C you again(C_y_again),作者:C you again

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-29

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据?

    “如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据呢?”

    C you again
  • 第1期 论文答辩PPT模板 1~20篇

    经过几天的收集整理,PPT模板分享模块终于和老铁们见面了。本期是PPT模板分享的第一期,由于小编正在准备论文答辩,光为找到合适的PPT就花了不少时间,小编一气之...

    C you again
  • 第5期 论文答辩PPT模板 81~100篇

    上期为大家分享了“第四期 论文答辩PPT模板 61~80篇”,需要的伙伴点击下面的链接查看下载。

    C you again
  • Python快速入门

    最近在很多地方都可以看到Python的身影,尤其在人工智能等科学领域,其丰富的科学计算等方面类库无比强大。很多身边的哥们也提到Python非常的简洁方便,比如用...

    用户1216676
  • 2013-2014中国HR产品满意度调研报告完整版

    发现和结论 1. HR管理软件面对的客户群主要以大型集团客户为主,需要HR产品适配已有的企业管理软件,在整个管理软件市场中还处于小众软件,在市场宣...

    人称T客
  • sessionid如何产生?由谁产生?保存在哪里?

    面试问道这个我居然不知道怎么回答,当然也是因为我确实没有研究过。下面就是百度了一篇文章后简单回答这个问题。 参考:http://www.cnblogs.com/...

    Ryan-Miao
  • [未完]构建代理池

    第二步: HTTP服务器展示代理列表: http://0.0.0.0:8000/proxy.json

    hankleo
  • Golang中使用echo框架、MongoDB、JWT搭建REST API

    生命不止,继续go go go !!! 之前介绍过golang中restful api的博客,是使用redis作为持久化,httprouter作为框架: Go...

    程序员的酒和故事
  • H3C设备之 NAPT

    配置NAPT,实现多个私网地址通过一个公网地址不同端口转换访问INETERNET,提高公网地址的利用率:

    py3study
  • 细思极恐,人工智能是否真的会形成自我意识?

    忘掉如今人工智能领域的小幅进步吧,比如汽车自动驾驶的能力越来越强。等待我们的可能是一项突破性的进展:一种能够感知自身及其周围环境的机器,它可以实时接收和处理大量...

    企鹅号小编

扫码关注云+社区

领取腾讯云代金券