一步一步用Canvas写一个贪吃蛇
之前在慕课网看了几集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写一个贪吃蛇的更多相关文章
- 如何用Python写一个贪吃蛇AI
前言 这两天在网上看到一张让人涨姿势的图片,图片中展示的是贪吃蛇游戏, 估计大部分人都玩过.但如果仅仅是贪吃蛇游戏,那么它就没有什么让人涨姿势的地方了. 问题的关键在于,图片中的贪吃蛇真的很贪吃XD, ...
- 使用Python写一个贪吃蛇
参考代码http://blog.csdn.net/leepwang/article/details/7640880 我在程序中加入了分数显示,三种特殊食物,将贪吃蛇的游戏逻辑写到了SnakeGame的 ...
- 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
- pygame试水，写一个贪吃蛇
最近学完python基础知识,就想着做一个游戏玩玩,于是就在https://www.pygame.org/docs/学着做了个贪吃蛇游戏. 首先要导入模块. import pygame import ...
- 用js写一个贪吃蛇小游戏
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 用Python写一个贪吃蛇
最近在学Python,想做点什么来练练手,命令行的贪吃蛇一般是C的练手项目,但是一时之间找不到别的,就先做个贪吃蛇来练练简单的语法. 由于Python监听键盘很麻烦,没有C语言的kbhit(),所以这 ...
- 自己用canvas写的贪吃蛇代码
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- react 写一个贪吃蛇
示例: 全部代码如下: snake.jsx import React, { Component } from 'react'; import PropTypes from 'prop-types'; ...
- python 写一个贪吃蛇游戏
#!usr/bin/python #-*- coding:utf-8 -*- import random import curses s = curses.initscr() curses.curs_ ...
随机推荐
- pip包导出
用pip对已有的环境做导出准备 1. 使用pip导出当前环境所有依赖包信息文件 pip freeze > requirements.txt 2. 下载所有依赖包到本地 pip install - ...
- virtualenv Mac版
环境 MAC python 3.6.7 安装python python官网下载3.6.7版本,默认安装 安装完成后检查是否安装成功: python3.6 确认安装目录:which python3.6 ...
- linux在线安装mysql
1)下载rpm安装包 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm;2) 安装mysql源 yum ...
- （八）shell工具-重点
8.1 cut cut的工作就是“剪”,具体的说就是在文件中负责剪切数据用的.cut 命令从文件的每一行剪切字节.字符和字段并将这些字节.字符和字段输出. 1.基本用法 cut [选项参数] fil ...
- npm 模块的总结
,, , ,,,,执行工程中自身生命周期 当前 npm 工程如果定义了钩子此时会被执行(按照 install.postinstall.prepublish.prepare 的顺序). 最后一步是生 ...
- c++之STL容器删除元素
1.删除容器中特定值的元素 如果是容器vector,string,,deque,使用erase-remove 例如:erase-remove 注:因为container没有remove,contain ...
- CodeForces 510C Fox And Names (拓扑排序)
<题目链接> 题目大意: 给你一些只由小写字母组成的字符串,现在按一定顺序给出这些字符串,问你怎样从重排字典序,使得这些字符串按字典序排序后的顺序如题目所给的顺序相同. 解题分析:本题想到 ...
- BZOJ 4665
orz gery 一发rk1真有趣(其实我没想着常数优化 inline int sqr(int x){return 1ll*x*x%mo;} const int N=2011; int n,a[N], ...
- P2649 - 【NOIP2017】列队
Description Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n×m 名学生,方阵的行数为 ...
- VB使用API进行RC4加密解密(MD5密钥)
根据网络资料整改,来源未知,已调试通过. Option Explicit Private Declare Function CryptAcquireContext Lib "advapi32 ...