之前在慕课网看了几集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. Emsemble
			
    RM # -*- coding: utf-8 -*- """ RandomForestClassifier 예 """ import pan ...
    
			
    2. 
						
  2. Anconda 3.7安装以及使用详细教程
			
    Anconda 3.7安装以及使用详细教程 2019-04-17    22:42:03 一.下载anconda 3.7 链接地址:官方地址 二.安装 双击下载好的Anaconda3-2019.03- ...
    
			
    3. 
						
  3. pycharm的list中append的应用
			
    li = [11,22,33,44] li.append(5) print(li) #输出结果 [11,22,33,44,5] #后面可加字母,列表等字符串
    
			
    4. 
						
  4. 谷歌浏览器F12基本用法
			
    第一步:打开你想进行调试的页面,并按F12进入到调试模式 此处以百度页面为例进行功能展示 这是关于最右侧“元素选择器”的功能展示 关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小, eleme ...
    
			
    5. 
						
  5. 感动到哭的SBT下载
			
    在centos上搭建spark开发环境.使用IntelliJ IDEA做scala开发,需要配置SBT.一直卡在从maven上下载jar包的过程中,还几次都下失败了.试过vpn也没有用. 还好偶然看到 ...
    
			
    6. 
						
  6. 使用Anaconda虚拟环境编译caffe-gpu pycaffe
			
    1. 前提: 安装前服务器情况,已经安装好了: CUDNN=7.3.0 CUDA=10.0.130 Opencv 2.4.13 相应命令为: cuda 版本 cat /usr/local/cuda/v ...
    
			
    7. 
						
  7. JS与CSS那些特别小的知识点区别
			
    1:target与currentTarget的区别 currentTarget指向的事件绑定的元素,target指向的是你点击的元素 2:attr与jprop在jQuery在API当中的区别 2.1: ...
    
			
    8. 
						
  8. tp5 整合 个推
			
    这里因为业务需要使用推送功能 uni 里面前端集成了个推 所以选择了个推来做推送. 个推的官方文档地址: http://docs.getui.com/getui/server/php/start/ 在 ...
    
			
    9. 
						
  9. 【nuget】PackageReference
			
    .net 爬虫 <PackageReference Include="HtmlAgilityPack" Version="1.9.0" /> < ...
    
			
    10. 
						
  10. PBRT笔记(11)——光源
			
    自发光灯光 至今为止,人们发明了很多光源,现在被广泛使用的有: 白炽灯的钨丝很小.电流通过灯丝时,使得灯丝升温,从而使灯丝发出电磁波,其波长的分布取决于灯丝的温度.但大部分能量都被转化为热能而不是光能 ...
    
			
    11.