教你如何一步一步用Canvas写一个贪吃蛇H5 canvas实现贪吃蛇小游戏

 const GRID_WIDTH = 10; // 格子的边长 const GAP_WIDTH = 2; // 空隙的边长 const ROW = 10; // 一共有多少行格子&每行有多少个格子 const COLOR = '#fff'; // 蛇的颜色 const BG_COLOR = '#000';// 背景颜色 const UP = 0, LEFT = 1, RIGHT = 2, DOWN = 3; // 定义蛇前进的方向 const CHANGE = [ [0, -1], [-1, 0], [1, 0], [0, 1] ]; // 每个方向前进时格子坐标的变化 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] ]; // 初始化一条🐍 let dir = RIGHT; // 初始化一个方向 drawSnack(ctx, snack, COLOR); let timer = setInterval(() => { // 每隔一段时间就刷新一次 let head = snack[snack.length - 1]; // 蛇头 let change = CHANGE[dir]; // 下一个格子前进位置 let newGrid = [head[0] + change[0], head[1] + change[1]]; // 新格子的位置 snack.push(newGrid); // 新格子加入蛇身的数组中 ctx.fillStyle = COLOR; ctx.fillRect(...getGridULCoordinate(newGrid), GRID_WIDTH, GRID_WIDTH); // 画新格子 ctx.fillRect(...getBetweenTwoGridGap(head, newGrid)); // 新蛇头和旧蛇头之间的缝隙 ctx.fillStyle = BG_COLOR; let delGrid = snack.shift(); // 删除蛇尾-最后一个元素 ctx.fillRect(...getGridULCoordinate(delGrid), GRID_WIDTH, GRID_WIDTH); // 擦除删除元素 ctx.fillRect(...getBetweenTwoGridGap(delGrid, snack[0])); // 擦除删除元素和当前最后一个元素之间的缝隙 }, 1000); ..... // 和之前相同

 const GRID_WIDTH = 10; // 格子的边长 const GAP_WIDTH = 2; // 空隙的边长 const ROW = 10; // 一共有多少行格子&每行有多少个格子 const COLOR = '#fff'; // 蛇的颜色 const BG_COLOR = '#000';// 背景颜色 const INTERVAL = 300; const UP = 0, LEFT = 1, RIGHT = 2, DOWN = 3; // 定义蛇前进的方向 const CHANGE = [ [0, -1], [-1, 0], [1, 0], [0, 1] ]; // 每个方向前进时格子坐标的变化 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, dir, map, nextDir; function initialize() { snack = [ [2, 3], [2, 4], [2, 5], [3, 5], [4, 5], [4, 4], [5, 4], [5, 5] ]; // 初始化一条🐍 nextDir = dir = RIGHT; // 初始化一个方向 map = []; for (let i = 0; i < ROW * ROW; i++) map[i] = 0; for (let i = 0; i < snack.length; i++) map[ getGridNumber(snack[i]) ] = 1; window.onkeydown = function(e) { // e.preventDefault(); if (e.key === 'ArrowUp') nextDir = UP; if (e.key === 'ArrowDown') nextDir = DOWN; if (e.key === 'ArrowRight') nextDir = RIGHT; if (e.key === '
                
提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                

                

                                            
上一篇：html5/css3响应式页面开发总结 CSS3移动端vw+rem不依赖JS实现响应式布局的方法CSS banner图响应式居中显示的方法详解使用CSS3的@media来编写响应式的页面 jQuery和CSS3响应式轮播插件jcSlider纯CSS3大转盘抽奖示例代码（响应式、可配置）CSS3 media queries + jQuery实现响应式导航CSS 响应式布局系统的实例代码
                                                                
下一篇：如何使用localstorage代替cookie实现跨域共享数据问题html5的localstorage详解HTML5 LocalStorage 本地存储刷新值还在HTML5 localStorage使用总结HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常HTMl5的存储方式sessionStorage和localStorage详解