首页 > 其他分享 >原生js实现 贪吃 蛇,个感想人

原生js实现 贪吃 蛇,个感想人

时间:2022-10-30 20:58:06浏览次数:62  
标签:原生 11 蛇头 蛇身 感想 js 绘制 贪吃

毕业已经三个月了,在我们学习玩那些便捷的框架之后,似乎对原生的数据结构,js,css,甚至swing等越来越远

其实这是错误的,所有高端的技术都是在基础至上一步一步衍生出来的,就像我们不学会1+1,就永远不会11+11一样

所以基础在程序员道路至上永远是一种基石,只有稳固的地基,才能有摩天大楼。

话归正题:

 

1.游戏容器

2.绘制方格:根据自己的想法绘制大小

3.绘制蛇身:为对应的表格添加样式

4.绘制食物:随机生成,不能出现在容器之外,也不能与蛇身重合

5.碰撞检测:蛇头撞墙,蛇头撞蛇身,蛇头撞食物

6.键盘事件:这里可以是任意一种方式去控制蛇身,可以是滑动屏幕,也可以是键盘控制等,都可以

 

程序员就是将现实流程,想象流程用代码的方式显示出来。

标签:原生,11,蛇头,蛇身,感想,js,绘制,贪吃
From: https://www.cnblogs.com/lianggegege123/p/16842186.html

相关文章

  • vue 绘制波形图 wavesurfer.js (音频/视频) 【实用教程】
    安装wavesurfer.jscnpmiwavesurfer.js--save无cnpm的先运行npmicnpm-g全局安装cnpm绘制音频波形图常用的配置参数详见注释。<template><divstyle="padding:......
  • js滑动验证
    <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content......
  • js canvas
      <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"......
  • js复习
    记录那些小小的JS书面知识JS的组成JS语法(ECMAScript),页面文档对象模型(DOM),浏览器对象模型(BOM)ECMAScript:ECMAScript规定了JS的编程语法和基础核心知识,是所有浏......
  • js图片格式转换(File、blob、二进制)
    一、File转Blob​​MDN文档createObjectURL​​​​​​<buttonclass="btn"onclick="openFile()">点我</button>functionopenFile(){varinput=document.createEle......
  • springboot~写一个从excel读取json到List<Map>的方法
    excel读出来的json,它是一个字符串,不是标准json,所以需要对字符串字段进行解析复杂的excel如图通过poi解析json,通过jackson完成对字段的解析publicstaticList<Map<String,O......
  • cryptoJs DES_CBC_Pkcs7 转成 Java
    前端DES加密:importcryptoJsfrom'crypto-js';//DES加密functionencrypt(message,key,iv){//字符串转16进制constkeyHex=cryptoJs.enc.Utf8.parse......
  • js操作摄像头进行拍照
    MDN文档-getUserMedia介绍<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><m......
  • three.js 小车模型的基本结构
    基本结构代码import*asTHREEfrom'three'importStatfrom'three/examples/jsm/libs/stats.module'import{OrbitControls}from'three/examples/jsm/control......
  • 图解JS事件对象screenX、clientX、pageX, offsetX区别
    screenX、clientX、pageX和offsetX的区别1、screenX和screenY参照点:电脑屏幕左上角screenX:鼠标点击位置相对于电脑屏幕左上角的水平偏移量screenY:鼠标点击位置相对......