一步一步用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_ ...
随机推荐
- 在SSL / https下托管SignalR
https://weblog.west-wind.com/posts/2013/Sep/23/Hosting-SignalR-under-SSLhttps 2013年9月23日•来自毛伊岛,HI• ...
- Django----将列表按照一定的顺序展示
1.要求:按照文章的时间降序排列,并且只展示前5篇文章 2.需要用到:list的切片知识 ###改造view.py中的视图方法 #列表页 def get_article(request): artic ...
- 分布式缓存技术之Redis_03分布式redis
目录 1. Redis集群 集群作用 主从复制 集群安装配置 集群数据同步及原理 2. Redis哨兵机制 master选举 哨兵sentinel的作用 哨兵sentinel之间的相互感知 maste ...
- vue 调用摄像头拍照以及获取相片本地路径(实测有效)
在学习这个的时候有一点前提:这是针对手机功能的,所以最重要的是要用手机进行实时调试 包含图片的增加和删除功能 <template> <div> <!--照片区域--> ...
- mac os x 查看网络端口情况
查看端口是否打开 使用 netstat 命令 a. `netstat -nat | grep <端口号>` , 如命令 `netstat -nat | grep 3306` b. `net ...
- Dagger2 notes
Android:dagger2让你爱不释手-基础依赖注入框架篇 Android Dagger2 MVP架构 一看就明白 Dagger2教程六之Component的组织方法(原) Dagger 2从浅到 ...
- System.getProperty(String key)方法获取常用系统信息
其中key可以为以下选项: 1.java.version Java 运行时环境版本 2.java.vendor Java 运行时环境供应商 3.java.vendor.url Java 供应商的 UR ...
- js 原生转json 可以v8中运行
// load("D:/jsontest.js"); function test1(vvv) { print(vvv); } //把json str 转 json obj func ...
- esxi 精简置备只增不减问题解决方法（转）
esxi 精简置备只增不减问题解决方法 众所周知Thin Provisioning模式下的虚拟机磁盘的空间会随需增长,可以很大程度上帮助我们节约空间,可是,凡增长过后的空间,即使清除了导致增长的文件后 ...
- STS（Spring Tool Suite）下SSM（Spring+SpringMVC+Mybatis）框架搭建（一）
最近在用SSM框架做一个网站,就顺便把自己要做的笔记需要了解的东西都写了下来,看看对大家学习SSM框架有没有帮助. 开发环境: 1.win10 64位 2.spring-tool-suite-3.9. ...