前端学习（1679）：前端系列实战课程之为蛇创建食物对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>游戏初始化界面</title><style>body {margin: 0;padding: 0;}#main {margin: 100px;}.btn {width: 100px;height: 40px;}</style>
</head><body><div id="main"><!-- 按钮 --><input class="btn" type="button" value="开始游戏" id="begin"><input class="btn" type="button" value="暂停游戏" id="pause"></div><!-- 贪吃蛇游戏设计 --><script>var main = document.getElementById('main');/* 画布格子是否开启 */var showcanvas = true;/* atom 原子大小 xnum横向原子数量 ynum纵向原子数量 */function Map(atom, xnum, ynum) {this.atom = atom;this.xnum = xnum;this.ynum = ynum;//声明画布this.canvas = null;//第二部分 创建画布方法this.create = function() {this.canvas = document.createElement('div');this.canvas.style.cssText = 'position:relative;top:40px;border:1px solid red;background:#FAFAFA';this.canvas.style.width = this.atom * this.xnum + 'px'; //画布的宽this.canvas.style.height = this.atom * this.ynum + 'px'; //画布的宽main.appendChild(this.canvas);if (showcanvas) {for (var x = 0; x < xnum; x++) {for (var y = 0; y < ynum; y++) {var a = document.createElement('div');a.style.cssText = "border:1px solid yellow";a.style.width = this.atom + 'px';a.style.height = this.atom + 'px';a.style.backgroundColor = 'green';this.canvas.appendChild(a);a.style.position = 'absolute';a.style.left = x * this.atom + 'px';a.style.top = y * this.atom + 'px';}}}}}var map = new Map(20, 40, 20);map.create();var food = new Food(map);/* 第三部分 创建食物 map地图对象 */function Food(map) {this.width = map.atom;this.height = map.atom;this.bgcolor = "rgb(" + Math.floor(Math.random() * 200) + "," + Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + ")"this.x = Math.floor(Math.random() * map.xnum);this.y = Math.floor(Math.random() * map.ynum);//画出食物this.flag = document.createElement('div');this.flag.style.width = this.width + 'px';this.flag.style.height = this.height + 'px';this.flag.style.backgroundColor = this.bgcolor;this.flag.style.borderRadius = '50%';this.flag.style.position = 'absolute';this.flag.style.left = this.x * this.width + 'px';this.flag.style.top = this.y * this.height + 'px';map.canvas.appendChild(this.flag);}var timer; //变量可以提升/* 第一部分 *//* 第一部分开始 */document.getElementById('begin').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}/*第一部分 暂停 */document.getElementById('begin').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}</script>
</body></html>

运行结果

前端学习（1679）：前端系列实战课程之为蛇创建食物对象相关推荐

前端学习（1683）：前端系列实战课程之让蛇吃食物变长
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端学习（1682）：前端系列实战课程之让蛇改变方向
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端学习（1681）：前端系列实战课程之让蛇动起来
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端学习（1678）：前端系列实战课程之声明和创建游戏地图
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...
前端学习（1676）：前端系列实战课程之贪吃蛇游戏设计
2021年最新版Web前端学习路线图-前端小白入门必读-推荐
2021年最新版Web前端学习路线图-前端小白入门必读-推荐 Hello,大家好,相信很多学习前端的小伙伴,会有很多的疑惑: 我要学习那些技术? 我要到哪里去学习这些技术呢? 学习这些技术的目的对就业 ...
网站首页实战教程html,Python实战课程1-1练习：创建一个网页
最近在网易课堂上学习python的一个实战课程,正好简书也是我喜欢的一个平台,不妨在这里提交作业分享心得.第一个小练习是做一个简单的网页,最终呈现的效果如下: 下面开始吧! 1.创建html文件将h ...
web前端学习之前端重构方案，来了解一下
前端技术发展很快,很多项目面临前端部分重构,很开心可以让我进行这次项目前端的重构方案编写,在思考的同时参考了网上很多资料,希望本篇重构方案有一定的完整性,可以带给大家一些在面临重构时有用的东西,同时希 ...
前端学习（1685）：前端系列实战课程之设置难度
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" ...

前端学习（1679）：前端系列实战课程之为蛇创建食物对象

前端学习（1679）：前端系列实战课程之为蛇创建食物对象相关推荐

最新文章

热门文章