当前位置: 首页 > 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、…...

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

基础测试工具使用经验

背景 vtune&#xff0c;perf, nsight system等基础测试工具&#xff0c;都是用过的&#xff0c;但是没有记录&#xff0c;都逐渐忘了。所以写这篇博客总结记录一下&#xff0c;只要以后发现新的用法&#xff0c;就记得来编辑补充一下 perf 比较基础的用法&#xff1a; 先改这…...

Module Federation 和 Native Federation 的比较

前言 Module Federation 是 Webpack 5 引入的微前端架构方案&#xff0c;允许不同独立构建的应用在运行时动态共享模块。 Native Federation 是 Angular 官方基于 Module Federation 理念实现的专为 Angular 优化的微前端方案。 概念解析 Module Federation (模块联邦) Modul…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

vulnyx Blogger writeup

信息收集 arp-scan nmap 获取userFlag 上web看看 一个默认的页面&#xff0c;gobuster扫一下目录 可以看到扫出的目录中得到了一个有价值的目录/wordpress&#xff0c;说明目标所使用的cms是wordpress&#xff0c;访问http://192.168.43.213/wordpress/然后查看源码能看到 这…...

2025年渗透测试面试题总结-腾讯[实习]科恩实验室-安全工程师(题目+回答)

安全领域各种资源&#xff0c;学习文档&#xff0c;以及工具分享、前沿信息分享、POC、EXP分享。不定期分享各种好玩的项目及好用的工具&#xff0c;欢迎关注。 目录 腾讯[实习]科恩实验室-安全工程师 一、网络与协议 1. TCP三次握手 2. SYN扫描原理 3. HTTPS证书机制 二…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

MacOS下Homebrew国内镜像加速指南(2025最新国内镜像加速)

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

PHP 8.5 即将发布:管道操作符、强力调试

前不久&#xff0c;PHP宣布了即将在 2025 年 11 月 20 日 正式发布的 PHP 8.5&#xff01;作为 PHP 语言的又一次重要迭代&#xff0c;PHP 8.5 承诺带来一系列旨在提升代码可读性、健壮性以及开发者效率的改进。而更令人兴奋的是&#xff0c;借助强大的本地开发环境 ServBay&am…...