当前位置: 首页 > news >正文

做一个贪吃蛇小游戏happy一下

直接Vue上代码

<template><div><div>贪吃蛇</div><canvas id="canvas" width="400" height="400"></canvas></div>
</template><script>
export default {data() {return {ctx: null,interval: null,snakeData: [],count: 0,//步数pointList: [{ x: 36, y: 18 }],//默认点direction: "d", // 默认右,w:上,s:下,a:左,d:右controll: null,//监听controll2: null,//监听speedCount: 0, // 渲染倍数speed: 8 // 渲染倍数分子};},mounted() {// 贪吃蛇,canvasconst canvas = document.getElementById("canvas");this.ctx = canvas.getContext("2d"); // 获取绘制上下文const list = [];for (let i = 0; i < 2; i++) {list.push({x: 0 + i * 6,y: 0,type: "right"});}this.snakeData = list;console.log("snakeData", this.snakeData);this.setView(list);this.controll = new AbortController();this.controll2 = new AbortController();window.addEventListener("keydown",val => {if (val.key === "w" ||val.key === "a" ||val.key === "s" ||val.key === "d") {// 方向不能相反switch (val.key) {case "w":if (this.direction !== "s") {this.direction = "w";this.speed = 4;}break;case "a":if (this.direction !== "d") {this.direction = "a";this.speed = 4;}break;case "s":if (this.direction !== "w") {this.direction = "s";this.speed = 4;}break;case "d":if (this.direction !== "a") {this.direction = "d";this.speed = 4;}break;default:console.log("方向不合法或无效按键");break;}}},{ signal: this.controll.signal });window.addEventListener("keyup",val => {if (val.key === "w" ||val.key === "a" ||val.key === "s" ||val.key === "d") {this.speed = 8;}},{ signal: this.controll2.signal });this.count = 0;this.intervalFun();},beforeDestroy() {this.count = 0;this.interval && cancelAnimationFrame(this.interval);this.controll.abort();this.controll2.abort();},methods: {intervalFun() {this.count++;this.speedCount++;// 默认向右移动if (this.count > 5000) {// clearInterval(this.interval);cancelAnimationFrame(this.interval);} else {if (this.speedCount % this.speed === 0) {// 速度缩减10倍,执行10次才渲染1次const w = canvas.clientWidth;const h = canvas.clientHeight;this.ctx.clearRect(0, 0, w, h);this.goForword(this.snakeData);}}this.interval = requestAnimationFrame(this.intervalFun);},goForword(list) {// console.log("list1", list);const option = { ...list[list.length - 1] };if (this.direction === "d") {option.x = Number(option.x) + 6;} else if (this.direction === "a") {option.x = Number(option.x) - 6;} else if (this.direction === "w") {option.y = Number(option.y) - 6;} else if (this.direction === "s") {option.y = Number(option.y) + 6;}list.push(option);let flag = false;// console.log("option", option);this.pointList = this.pointList.filter(item => {if (option.x === item.x && option.y === item.y) {flag = true;}return item.x !== option.x || item.y !== option.y;});if (!flag) {list.shift();} else {// 重新生成点const x = Math.floor(Math.random() * Math.round(400 / 6)) * 6;const y = Math.floor(Math.random() * Math.round(400 / 6)) * 6;this.pointList.push({x,y});}this.snakeData = list;// console.log("snakeData", this.snakeData);this.setView(this.snakeData); // 画蛇this.setView(this.pointList); // 画点},setView(list) {// this.ctx.clearRact(0, 0, 400, 400);this.ctx.beginPath();for (let i = 0; i < list.length; i++) {this.ctx.rect(list[i].x, list[i].y, 6, 6); // 绘制矩形}this.ctx.fill(); // 描边一个矩形轮廓}}
}
</script>
<style lang="scss" scoped>#canvas {border: 1px solid #dee2ed;
}
</style>

直接拿着用即可

相关文章:

做一个贪吃蛇小游戏happy一下

直接Vue上代码 <template><div><div>贪吃蛇</div><canvas id"canvas" width"400" height"400"></canvas></div> </template><script> export default {data() {return {ctx: null,inter…...

opencv形态学-膨胀

opencv形态学-膨胀 膨胀就是取每一个位置结构元邻域内最大值作为该位置的输出灰度值&#xff1b; 膨胀是取邻域内最大值&#xff0c;那么显然膨胀后图像整体亮度会比原先要高&#xff0c;图像中亮的物体尺寸会变大&#xff0c;相反暗的尺寸会减小&#xff0c;甚至是消失 结构元…...

玄子Share 设计模式 GOF 全23种 + 七大设计原则

玄子Share 设计模式 GOF 全23种 七大设计原则 前言&#xff1a; 此文主要内容为 面向对象七大设计原则&#xff08;OOD Principle&#xff09;GOF&#xff08;Gang Of Four&#xff09;23种设计模式拓展的两个设计模式 简单工厂模式&#xff08;Simple Factory Pattern&#x…...

单链表操作 C实现

struct LNode { //定义一个节点 int data; //数据域 struct LNode *next; //指针域 }; 0.初始化 typedef sturct LNode{ //定义单链表结点类型 int date ; //每个结点存放一个数据元素struct LNode *next; //指针指向下…...

WordPress主题网站首页添加好看的四格小工具教程

直接到网站根目录创建一个css文件(文件名:sige.css),文件名可自定义(注意文件名一致) <link rel"stylesheet" href"你的网站/sige.css" type"text/css" > 然后在header.php模板最上方添加引入代码 也可自定义HTML里添加css代码最上方写…...

unittest自动化测试框架讲解以及实战

为什么要学习unittest 按照测试阶段来划分&#xff0c;可以将测试分为单元测试、集成测试、系统测试和验收测试。单元测试是指对软件中的最小可测试单元在与程序其他部分相隔离的情况下进行检查和验证的工作&#xff0c;通常指函数或者类&#xff0c;一般是开发完成的。 单元…...

数学建模之Matlab基础操作

作者由于后续课程也要学习Matlab&#xff0c;并且之前也进行了一些数学建模的练习&#xff08;虽然是论文手&#xff09;&#xff0c;所以花了几天零碎时间学习Matlab的基础操作&#xff0c;特此整理。 基本运算 a55 %加法&#xff0c;同理减法 b2^3 %立方 c5*2 %乘法 x 1; …...

【Nuxt】04 Nuxt2-SEO: sitemap.xml、seo优化、robots.txt

1 SiteMap设置 环境准备 注意生成sitemap依赖于nuxtjs/sitemap&#xff0c;并且需要用axios进行请求&#xff0c;不要使用nuxtjs/axios&#xff0c;不然会报错 sitemap.xml配置 在nuxt.config.js中配置下面的内容 npm install nuxtjs/sitemap npm install axios在static/s…...

VMware VSAN 入门

一、虚拟化的存储 1.1、对于数据中心来说最重要的是数据&#xff0c;而承载数据的设备就是存储设备&#xff08;Storage&#xff09; 1.2、物理服务器的本地存储阵列 与 虚拟化服务器的本地存储阵列 对比 1.3、避免单台服务器故障的虚拟化高级特性&#xff1a;vSphere HA技术 …...

【设计模式】备忘录模式

文章目录 1.备忘录模式定义2.备忘录模式的角色3.备忘录模式实现3.1.场景说明3.2.结构类图3.3.代码实现 4.备忘录模式优缺点5.备忘录模式适用场景6.备忘录模式总结 主页传送门&#xff1a;&#x1f481; 传送 1.备忘录模式定义 备忘录&#xff08;Memento Pattern&#xff09;模…...

vue3+elementUiPlus表格导出功能

1.下载需要的组件包 npm install file-saver xlsx 2.页面中导入 import FileSaver from file-saver import * as XLSX from xlsx; 3.页面中的表格加一个id <el-table :data"tableData" ref"multipleTableRef" style"width…...

专题五:优先级队列

"你了解我&#xff0c;最干净的轮廓&#xff0c; 握住小小风车和放肆的梦~" 堆是一个不错的数据结构&#xff0c;而在计算机中&#xff0c;无法表示二叉分支结构&#xff0c;因此我们经常会看到使用线性表来作为堆的存储容器。在接触堆的时候&#xff0c;我们是把它…...

游戏设计模式专栏(一):工厂方法模式

引言 大家好&#xff0c;我是亿元程序员&#xff0c;一位有着8年游戏行业经验的主程。 本系列是《和8年游戏主程一起学习设计模式》&#xff0c;让糟糕的代码在潜移默化中升华&#xff0c;欢迎大家关注分享收藏订阅。 在游戏开发中&#xff0c;代码的组织和结构对于项目的可…...

element中使用el-steps 进度条效果demo(整理)

<template><div class"margin-top20"><!-- align-center 不要居中就去掉 --><!-- process-status 这几个参数值&#xff1a;改变颜色 wait / process / finish / error / --><!-- active 到第几个是绿色 --><el-steps :space&qu…...

038:mapboxGL 旋转地图(rotateTo)

第038个 点击查看专栏目录 本示例的目的是介绍演示如何在vue+mapbox中旋转地图。 直接复制下面的 vue+mapbox源代码,操作2分钟即可运行实现效果 文章目录 示例效果配置方式示例源代码(共68行)相关API参考:专栏目标示例效果 配置方式 1)查看基础设置:https://xiaozhuan…...

java遇到的问题

java遇到的问题 Tomcat与JDK版本问题 当使用Tomcat10的版本用于springmvc借用浏览器调试时&#xff0c;使用JDK8浏览器会报异常。 需要JDK17&#xff08;可以配置多个JDK环境&#xff0c;切换使用&#xff09;才可以使用&#xff0c;配置为JAVA_HOME路径&#xff0c;否则&a…...

LLM(二)| LIMA:在1k高质量数据上微调LLaMA1-65B,性能超越ChatGPT

本文将介绍在Lit-GPT上使用LoRA微调LLaMA模型&#xff0c;并介绍如何自定义数据集进行微调其他开源LLM 监督指令微调&#xff08;Supervised Instruction Finetuning&#xff09; 什么是监督指令微调&#xff1f;为什么关注它&#xff1f; 目前大部分LLM都是decoder-only&…...

Android AMS——创建Application(七)

与在 App 内部启动一个 Activity 的不同之处在于,点击桌面 Launcher 首次启动一个应用程序的时候,会先去创建一个该应用程序对应的进程,然后执行 ActivityThread 的 main() 方法去创建该应用对应的 Application,然后再去启动首页 Activity。前面已经分析了进程的创建和启动…...

html 边缘融合加载

html 代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>边缘融合加载</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {height: 100vh;padding-bottom: 80px;b…...

ElasticSearch - 在 微服务项目 中基于 RabbitMQ 实现 ES 和 MySQL 数据异步同步(考点)

目录 一、数据同步 1.1、什么是数据同步 1.2、解决数据同步面临的问题 1.3、解决办法 1.3.1、同步调用 1.3.2、异步通知&#xff08;推荐&#xff09; 1.3.3、监听 binlog 1.3、基于 RabbitMQ 实现数据同步 1.3.1、需求 1.3.2、在“酒店搜索服务”中 声明 exchange、…...

后进先出(LIFO)详解

LIFO 是 Last In, First Out 的缩写&#xff0c;中文译为后进先出。这是一种数据结构的工作原则&#xff0c;类似于一摞盘子或一叠书本&#xff1a; 最后放进去的元素最先出来 -想象往筒状容器里放盘子&#xff1a; &#xff08;1&#xff09;你放进的最后一个盘子&#xff08…...

安宝特方案丨XRSOP人员作业标准化管理平台:AR智慧点检验收套件

在选煤厂、化工厂、钢铁厂等过程生产型企业&#xff0c;其生产设备的运行效率和非计划停机对工业制造效益有较大影响。 随着企业自动化和智能化建设的推进&#xff0c;需提前预防假检、错检、漏检&#xff0c;推动智慧生产运维系统数据的流动和现场赋能应用。同时&#xff0c;…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

ESP32读取DHT11温湿度数据

芯片&#xff1a;ESP32 环境&#xff1a;Arduino 一、安装DHT11传感器库 红框的库&#xff0c;别安装错了 二、代码 注意&#xff0c;DATA口要连接在D15上 #include "DHT.h" // 包含DHT库#define DHTPIN 15 // 定义DHT11数据引脚连接到ESP32的GPIO15 #define D…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...

ip子接口配置及删除

配置永久生效的子接口&#xff0c;2个IP 都可以登录你这一台服务器。重启不失效。 永久的 [应用] vi /etc/sysconfig/network-scripts/ifcfg-eth0修改文件内内容 TYPE"Ethernet" BOOTPROTO"none" NAME"eth0" DEVICE"eth0" ONBOOT&q…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...