之前在慕课网看了几集Canvas的视频，一直想着写点东西练练手。感觉贪吃蛇算是比较简单的了，当年大学的时候还写过C语言字符版的，没想到还是遇到了很多问题。

最终效果如下（图太大的话 时间太长 录制gif的软件有时限…）

首先定义游戏区域。贪吃蛇的屏幕上只有蛇身和苹果两种元素，而这两个都可以用正方形格子构成。正方形之间添加缝隙。为什么要添加缝隙？你可以想象当你成功填满所有格子的时候，如果没有缝隙，就是一个实心的大正方形……你根本不知道蛇身什么样。

画了一个图。

格子是左上角的坐标是(0, 0)，向右是横坐标增加，向下是纵坐标增加。这个方向和Canvas相同。

每次画一个格子的时候，要从左上角开始，我们直知道Canvas的左上角坐标是(0, 0)，假设格子的边长是 GRID_WIDTH 缝隙的宽度是 GAP_WIDTH ，可以得到第(i, j)个格子的左上角坐标 (i*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH, j*(GRID_WIDTH+GAP_WIDTH)+GAP_WIDTH) 。

假设现在蛇身是由三个蓝色的格子组成的，我们不能只绘制三个格子，两个紫色的空隙也一定要绘制，否则，还是之前说的，你根本不知道蛇身什么样。如下图，不画缝隙虽然也能玩，但是体验肯定不一样。

绘制相邻格子之间间隙 不绘制间隙

现在我们可以尝试着画一条蛇了。蛇身其实就是一个格子的集合，每个格子用包含两个位置信息的数组表示，整条蛇可以用二维数组表示。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>blog_snack</title>

    <style>

        #canvas {

             background-color: #000;

        }

    </style>

</head>

<body>

    <canvas id="canvas"></canvas>

    <script>

        const GRID_WIDTH = 10;  // 格子的边长

        const GAP_WIDTH = 2;    // 空隙的边长

        const ROW = 10;         // 一共有多少行格子&每行有多少个格子

        let canvas = document.getElementById('canvas');

        canvas.height = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1);

        canvas.width = GRID_WIDTH * ROW + GAP_WIDTH * (ROW + 1);

        let ctx = canvas.getContext('2d');

        let snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // 初始化一条												


											
一步一步用Canvas写一个贪吃蛇的更多相关文章
	

    
								
  1. 如何用Python写一个贪吃蛇AI
		
    前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...
    
		
    2. 
						
  2. 使用Python写一个贪吃蛇
		
    参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...
    
		
    3. 
						
  3. 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
		
    C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
    
		
    4. 
						
  4. pygame试水，写一个贪吃蛇
		
    最近学完python基础知识,就想着做一个游戏玩玩,于是就在https://www.pygame.org/docs/学着做了个贪吃蛇游戏. 首先要导入模块. import pygame import  ...
    
		
    5. 
						
  5. 用js写一个贪吃蛇小游戏
		
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
    
		
    6. 
						
  6. 用Python写一个贪吃蛇
		
    最近在学Python,想做点什么来练练手,命令行的贪吃蛇一般是C的练手项目,但是一时之间找不到别的,就先做个贪吃蛇来练练简单的语法. 由于Python监听键盘很麻烦,没有C语言的kbhit(),所以这 ...
    
		
    7. 
						
  7. 自己用canvas写的贪吃蛇代码
		
    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
    
		
    8. 
						
  8. react 写一个贪吃蛇
		
    示例: 全部代码如下: snake.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types';  ...
    
		
    9. 
						
  9. python 写一个贪吃蛇游戏
		
    #!usr/bin/python #-*- coding:utf-8 -*- import random import curses s = curses.initscr() curses.curs_ ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Ionic2中腾讯Bugly异常捕获以及上报
			
    Ionic2混合开发,入坑系列:Ionic2中腾讯Bugly异常捕获以及上报 1.Ionic2中处理全局异常,直接继承IonicErrorHandler即可,代码如下 import { IonicEr ...
    
			
    2. 
						
  2. mysql驱动问题
			
    Unknown initial character set index '255' received from server. Initial client character 解决方法 驱动版本不对 ...
    
			
    3. 
						
  3. 其他信息: 未能加载文件或程序集“file:///C:\Program Files (x86)\SAP BusinessObjects\Crystal   Reports for .NET Framework 4.0\Common\SAP BusinessObjects Enterprise XI   4.0\win32_x86\dotnet1\crdb_adoplus.dll”或它的某一个依赖
			
    今天在使用水晶报表的过程中,遇到了这个问题,下面是代码 FormReportView form = new FormReportView(); ReportDocument rptc = new Re ...
    
			
    4. 
						
  4. 更换MariaDB数据库
			
    https://downloads.mariadb.org/mariadb/repositories/#mirror=neusoft&distro=Ubuntu&distro_rele ...
    
			
    5. 
						
  5. centOS7.3新安装后，设置IP，以及Putty远程和Xshell远程  （学习是个持续的过程，也许中途放松过，但是仍然能重新捡起来，并学以致用，方为真勇士）
			
    有一段时间没有写学习心得了:现在开始加油,再接再励. 从最基础的开始 1.安装centOS7.3之后设置IP地址.一般linux的系统都是作为服务器的系统来使用,服务器的属性注定了他的IP不能随意的更 ...
    
			
    6. 
						
  6. OI中常犯的傻逼错误总结
			
    OI中常犯的傻逼错误总结 问题 解决方案 文件名出错,包括文件夹,程序文件名,输入输出文件名  复制pdf的名字  没有去掉调试信息  调试时在后面加个显眼的标记  数组开小,超过定义大小,maxn/ ...
    
			
    7. 
						
  7. Java 将容器List里面的内容保存到数组
			
    import java.util.List; import java.util.ArrayList; public class listToArr { public static void main( ...
    
			
    8. 
						
  8. Keepalived+Nginx实现高可用Web负载均衡
			
    1.安装编译 Nginx 所需的依赖包# yum install gcc gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zli ...
    
			
    9. 
						
  9. 2003server r2 + sql 2000 sp4 环境配置
			
    由于工作需求需要配置一个windows 2003 server r2 + sql 2000 sp4的环境: 一.2003server准备系统: msdn 下载 分清x86还是x64 一共有两个cd准备 ...
    
			
    10. 
						
  10. 适配iOS11
			
    总结在iOS11系统中出现的适配问题: 启动app发现上下有空隙,不能完全贴合屏幕----- 解决方案:添加一张尺寸为1125x2436的启动图. 隐藏导航栏的界面,会出现无法贴合屏幕顶部(一般来说, ...
    
			
    11.