之前在慕课网看了几集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. win10 安装mysql8
			
    参考:https://www.jb51.net/article/139219.htm mysql下载地址:https://dev.mysql.com/downloads/mysql/ 1.下载:mys ...
    
			
    2. 
						
  2. 手把手带你入门kubernetes部署
			
    实验环境准备 k8s-master   192.168.2.156 k8s-node节点   192.168.2.161 Ps:两台保证时间同步,firewalld防火墙关闭,selinxu关闭,系统 ...
    
			
    3. 
						
  3. Goland2019.1破解
			
    Goland2019.1破解 Goland2019.1:http://www.jetbrains.com/goland/download/ 破解补丁:https://pan.baidu.com/s/1 ...
    
			
    4. 
						
  4. 学习easyui的小伙伴有福利了
			
    easy-ui常用属性和方法 css定义与js定义两个版本
    
			
    5. 
						
  5. 【C语言编程练习】7.2动态数列排列
			
    1. 题目要求 编写这样一个C程序,实现这样的功能:从键盘输入任意个整数,以0作为结束标志,对于这个整数序列从小到大排序,并输出排序后结果 2. 题目分析 不得不说,我确实对这类问题毫无思路呢!应该也 ...
    
			
    6. 
						
  6. PBRT笔记(8)——材质
			
    BSDF类 表面着色器会绑定场景中每一个图元(被赋予了这个着色器),而表面着色器则由Material类的实例来表示.它会拥有一个BSDF类对象(可能是BSSDF),用于计算表面上每一点的辐射度(颜色) ...
    
			
    7. 
						
  7. vue插件官方文档，做个记录
			
    vue的插件,组件都可以按照这种方式添加 官方文档 https://cn.vuejs.org/v2/guide/plugins.html 做个记录用
    
			
    8. 
						
  8. TimesTen中文乱码问题（其实是cmd.exe中文乱码）
			
    解决了导入数据的问题后,从导师那儿拷贝了一些样例数据,结果发现cmd.exe中文乱码(开始我以为是TimesTen无法显示中文).在网上搜了很多,因为我以为是TimesTen无法显示中文,所以都是搜的 ...
    
			
    9. 
						
  9. css实现文本超出两行隐藏
			
    当文字显示超出两行时,多余部分文字隐藏,用到的css属性如下代码 display: -webkit-box; text-overflow: ellipsis; overflow: hidden; -w ...
    
			
    10. 
						
  10. 用generator改写ajax
			
    function request(url) { // this is where we're hiding the asynchronicity, // away from the main code ...
    
			
    11.