![](https://img-blog.csdnimg.cn/20210312225208643.jpg?x-oss-process=image/resize,m_fixed,h_224,w_224)
游戏
游戏
敢问
书山有路勤为径,学海无涯苦作舟
展开
-
canvas-小球回弹连线
<style> *{margin: 0;padding: 0;} canvas{ display: block;margin: 10px auto;border: 1px solid #333;}</style><body> <canvas id="mycanvas"></canvas> <script> var canvas = document.getElementByI.原创 2020-12-13 18:44:10 · 176 阅读 · 0 评论 -
canvas - 炫彩小球
<style> *{ margin: 0; padding: 0; } canvas { border: 1px solid #333; display: block; margin: 20px auto 0; }</style><body> <canvas width="1200" height="800" id="mycanvas">.原创 2020-12-13 12:13:50 · 205 阅读 · 0 评论 -
js-俄罗斯方块-面向对象-中介模式-完整版
1.设置Game为中介者类2.方块的状态俄罗斯方块中,下落的方块形态一共有7种,每一种又有不同的状态(方向)S型、Z型、J型、L型、O型、T型、I型这些形态都用一个4*4的矩阵表示3 方块的表示使用二维数组去表示俄罗斯方比如上图的T我们使用二维数组[[0,0,0,0],[1,1,1,0],[1,1,0,0],[0,0,0,0],]块的方块状态将所有的俄罗斯方块的类型和状态都放到一个JSON中,JSON是一个三维数组4 渲染方块5 地图类原创 2020-12-09 17:34:47 · 417 阅读 · 0 评论 -
js 面向对象 ------小游戏打气球
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>打气球</title></head><style> html{ wi.原创 2020-12-03 15:54:02 · 381 阅读 · 0 评论 -
js面向对象-炫彩小球
<style> *{ margin: 0; padding: 0; } body{ background: #000; } .ball{ width: 80px; height: 80px; background-color: blue; border-radius: 50%; opacity: .5; ani..原创 2020-12-02 22:13:55 · 126 阅读 · 0 评论 -
行走的女神--面向对象--数组的统一管理和定时器操作
<style> *{ margin: 0; padding: 0; } .girl{ width:150px; height: 80px; background: url("girl.png") no-repeat 0 -673px; position: absolute; left: 0; top: 100px; } #b...原创 2020-12-02 16:31:00 · 96 阅读 · 0 评论 -
面向对象编程-红绿灯
1、利用原生的JavaScript实现var honglvdeng = document.getElementsByClassName("honglvdeng")[0]; //console.log(honglvdeng) var inx = 0; honglvdeng.onclick = function () { inx++; inx = inx > 2 ? 0 : inx; this.style.background.原创 2020-12-02 10:27:22 · 604 阅读 · 0 评论 -
js 贪吃蛇-设计模式-中介模式
1、本游戏(贪吃蛇)不是像之前一样都写到一个HTML文件中,而是进行了类的拆分,单独用js表示每个类,中介类是Game类,首先引入这个类<script src="js/Game.js"></script>2、页面的初始化,初始化布局不是直接写html标签,而是通过game进行的初始化节点上树<style> *{ margin: 0; padding: 0; } table{ border-collapse: collapse; }原创 2020-12-07 22:50:16 · 321 阅读 · 0 评论