之前在慕课网看了几集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. Trie for string LeetCode
			
    Trie build and search class TrieNode { public: TrieNode * next[]; bool is_word; TrieNode(bool b = fa ...
    
			
    2. 
						
  2. vmware安装VMTools  ， VirtualBox "安装增强功能"
			
    https://www.vmware.com/support/ws45/doc/new_guest_tools_ws.html 直接参考官方文档,中文没找到啥有用的资料 https://www.cnb ...
    
			
    3. 
						
  3. linux系统优化配置
			
    # 2 millions system-wide sysctl -w fs.file-max=2097152 sysctl -w fs.nr_open=2097152 echo 2097152 > ...
    
			
    4. 
						
  4. IntelliJ IDEA 2018.3.3配置 Tomcat 9，控制台出现中文乱码  “淇℃伅”（2019/01/25）
			
    (win10系统) 全新idea配置全新版本Tomcat突遇 “淇℃伅”,网上大部分解决方案均已失效 似乎是idea与Tomcat命令行输出格式不一致所致,千辛万苦在某一小角落发现这个方法,一针见血, ...
    
			
    5. 
						
  5. 2018-2019-2 20165239《网络对抗技术》Exp4 恶意代码分析
			
    Exp4 恶意代码分析 实验内容 一.基础问题 1.如果在工作中怀疑一台主机上有恶意代码,但只是猜想,所有想监控下系统一天天的到底在干些什么.请设计下你想监控的操作有哪些,用什么方法来监控. •使用w ...
    
			
    6. 
						
  6. BP神经网络综合评价法
			
    BP神经网络综合评价法是一种交互式的评价方法,一种既能避免人为计取权重的不精确性, 又能避免相关系数求解的复杂性,还能对数量较大且指标更多的实例进行综合评价的方法,它可以根据用户期望的输出不断修改指标 ...
    
			
    7. 
						
  7. vue笔记-条件渲染
			
    条件渲染 1:指令v-if单独使用和结合v-else //单独使用 <h1 v-if="ok">Yes</h1> //组合使用 <h1 v-if=&q ...
    
			
    8. 
						
  8. Python 3.5 filter
			
    filter(F, L) F: 函数.L:范围 filter的功能是:用函数F把L范围内的参数做过滤 通常和list一起使用,把过滤后的参数做成列表 list(filter(lambda n:not  ...
    
			
    9. 
						
  9. Python爬虫开发与项目实战
			
    Python爬虫开发与项目实战(高清版)PDF 百度网盘 链接:https://pan.baidu.com/s/1MFexF6S4No_FtC5U2GCKqQ 提取码:gtz1 复制这段内容后打开百度 ...
    
			
    10. 
						
  10. Helm 入门指南
			
    Helm 为Kubernetes的软件包管理工具,Helm有两部分组成:Helm客户端.Tiller服务端,Helm三个主要部件:Chart.仓库.Release: Chart:为Kubernetes ...
    
			
    11.