之前在慕课网看了几集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. linux基础命令学习笔记（二）
			
    linux基础命令学习笔记(二) 1.kill :终止进程  kill pid (唯一标示一个进程) kill -9  强制终止  kill -15 命令未结束不能终止 # ps aux 查看所有进程 ...
    
			
    2. 
						
  2. 工具系列-idea破解
			
    >>>>>>>>>>>>>>>>>>>>>>>>> ...
    
			
    3. 
						
  3. Spring MVC 以.html为后缀名访问获取数据，报406 Not Acceptable错误
			
    转载,感谢这位博主,有自己的添加. 如题,最近以spring mvc作为后台框架,前端异步获取数据时(.html为后缀名的访问方式),报406 Not Acceptable错误.当初都不知道啥原因,前 ...
    
			
    4. 
						
  4. Echarts line折线图使用(vue)
			
    实现 首先引入echarts工具 // vue文件中引入echarts工具 let echarts = require('echarts/lib/echarts') require('echarts/ ...
    
			
    5. 
						
  5. linux安装vsftp服务
			
    如果管理一个网站,需要经常上传下载一些文件,通过scp传输吗?当然不是,太麻烦了,而且首先你需要本机是linux的系统,这时我们需要一个工具,叫ftp. ftp是文件传输协议,通过它可以很方便上传下载 ...
    
			
    6. 
						
  6. Picnic Planning POJ - 1639（最小k度生成树）
			
    The Contortion Brothers are a famous set of circus clowns, known worldwide for their incredible abil ...
    
			
    7. 
						
  7. c++之STL容器删除元素
			
    1.删除容器中特定值的元素 如果是容器vector,string,,deque,使用erase-remove 例如:erase-remove 注:因为container没有remove,contain ...
    
			
    8. 
						
  8. python中for嵌套打印图形
			
    # 打印出九九乘法表 1 * 1 = 1 2 * 1 = 2 2 * 2 = 4 3 * 1 = 3 3 * 2 = 6 3 * 3 = 9 4 * 1 = 4 4 * 2 = 8 4 * 3 = 1 ...
    
			
    9. 
						
  9. centos7 安装 oh my zsh
			
    和在ubuntu 下安装十分相似(基本没区别) 安装zsh yum install zsh 改变系统bash chsh -s /bin/zsh git clone oh my zsh 项目: git@ ...
    
			
    10. 
						
  10. Windows10用fiddler抓包Android应用（解决手机设置代理后无法上网，设置只抓app包）
			
    1.环境准备 1.电脑上安装fiddler 2.手机和电脑在同一个局域网内 2.设置 1.fiddler>Tools>Fiddler Options>Connections 勾选Al ...
    
			
    11.