前端学习(1681):前端系列实战课程之让蛇动起来

<!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';}}}}}/*第四部分 创建蛇 */function Snake(map) {//设置宽度高度this.width = map.atom;this.height = map.atom;/* 蛇的方向 */this.direction = 'right';this.body = [{x: 2,y: 0}, //第一点{x: 1,y: 0}, //第二点{x: 0,y: 0} //第三点];//显示蛇this.display = function() {for (var i = 0; i < this.body.length; i++) {//当吃到食物时候 x==null 不能新建 不然会在00处新建一个if (this.body[i].x != null) {var s = document.createElement('div');//将蛇的节点保存到状态变量中 方便删除使用this.body[i].flag = s;/* console.log(1); *///设置蛇的样式s.style.width = this.width + 'px';s.style.height = this.height + 'px';s.style.backgroundColor = "rgb(" + Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + "," +Math.floor(Math.random() * 200) + ")"s.style.position = 'absolute';s.style.left = this.body[i].x * this.width + 'px';s.style.top = this.body[i].y * this.height + 'px';//添加到地图中map.canvas.appendChild(s);}}}/* 让蛇动起来 {x: 2,y: 0}, //第一点{x: 1,y: 0}, //第二点{x: 0,y: 0} //第三点*/this.run = function() {for (var i = this.body.length - 1; i > 0; i--) {this.body[i].x = this.body[i - 1].x;}console.log(111);this.body[0].x += 1;for (var i = 0; i < this.body.length; i++) {//不等于空 就删除 当吃到食物的时候 flag等于空if (this.body[i].flag != null) {map.canvas.removeChild(this.body[i].flag);}}this.display();/* */}}var map = new Map(20, 40, 20);//创建画布map.create();//构造食物var food = new Food(map);//构建蛇var snake = new Snake(map);snake.display();/* 第三部分 创建食物 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() {console.log(222);clearInterval(timer);timer = setInterval(function() {snake.run();}, 300)}/*第一部分 暂停 */document.getElementById('pause').onclick = function() {clearInterval(timer);timer = setInterval(function() {}, 300)}</script>
</body></html>

运行结果

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/419269.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Python 第五天

开放封闭原则 开发&#xff1a;对于未存在的开放 封闭&#xff1a;对于已存在的代码封闭 装饰器 1、装饰器就是一个函数&#xff0c;至少2层 2、 执行auth函数&#xff0c;被装饰的函数作为参数auth&#xff08;foo&#xff09; auth函数的返回值&#xff0c;赋值给被装饰的函数…

分布式队列编程:模型、实战

介绍 作为一种基础的抽象数据结构&#xff0c;队列被广泛应用在各类编程中。大数据时代对跨进程、跨机器的通讯提出了更高的要求&#xff0c;和以往相比&#xff0c;分布式队列编程的运用几乎已无处不在。但是&#xff0c;这种常见的基础性的事物往往容易被忽视&#xff0c;使用…

“睡服”面试官系列第十篇之module的语法(建议收藏学习)

目录 1.概述 2. 严格模式 3. export 命令 4. import 命令 5. 模块的整体加载 6. export default 命令 7. export 与 import 的复合写法 8. 模块的继承 9. 跨模块常量 10. import() 10.1简介 11适用场合 11.1按需加载 11.2条件加载 11.3动态的模块路径 11.4注意…

奇怪的剪贴板

下午碰到一个奇怪事情&#xff0c;同一个局域网内的不同主机的剪贴板内容竟然可以共享。还不知道是什么原因导致的。 如下图&#xff0c;在主机A上复制一个字符串。 或者在主机A上复制一张图。&#xff08;文件也可以&#xff09; 然后在主机B上分别粘贴 是不是很神奇~~&#x…

“睡服”面试官系列第十一篇之module加载实现(建议收藏学习)

目录 1. 浏览器加载 1.1传统方法 1.2加载规则 2. ES6 模块与 CommonJS 模块的差异 3. Node 加载 3.1概述 3.2内部变量 4ES6 模块加载 CommonJS 模块 5CommonJS 模块加载 ES6 模块 6循环加载 6.1CommonJS 模块的加载原理 6.2CommonJS 模块的循环加载 7ES6 模块的循…

两种IO模式:Proactor与Reactor模式

在高性能的I/O设计中&#xff0c;有两个比较著名的模式Reactor和Proactor模式&#xff0c;其中Reactor模式用于同步I/O&#xff0c;而Proactor运用于异步I/O操作。 在比较这两个模式之前&#xff0c;我们首先的搞明白几个概念&#xff0c;什么是阻塞和非阻塞&#xff0c;什么是…

nGrinder性能测试平台搭建(LVS压力测试)

1、 nGrinder是什么 nGrinder是一个免费的、开放源代码的Web性能测试平台。运行在应用中间件服务器中运行。它由一个控制端和多个代理端组成。通过控制端&#xff08;浏览器访问&#xff09;建立测试场景&#xff0c;然后通过分发到代理端进行压力测试&#xff0c;是一个分布式…

“睡服”面试官系列第十三篇之函数的扩展(建议收藏学习)

目录 1. 函数参数的默认值 1.1基本用法 1.2与解构赋值默认值结合使用 1.3参数默认值的位置 1.4函数的 length 属性 1.5作用域 1.6应用 2. rest 参数 3. 严格模式 4. name 属性 5. 箭头函数 5.1基本用法 5.2使用注意点 5.3嵌套的箭头函数 6. 双冒号运算符 7. 尾…

如何快速的解决Maven依赖冲突

为什么会出现依赖冲突 首先要说明Maven的依赖管理&#xff0c;具体的可以参考这边 Maven学习——依赖管理 这篇文章&#xff0c;maven在依赖冲管理中有一下几个原则。 依赖是使用Maven坐标来定位的&#xff0c;而Maven坐标主要由GAV&#xff08;groupId, artifactId, version&…

前端学习(1682):前端系列实战课程之让蛇改变方向

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>游戏初始化界面</title><style>body {ma…

第十二周学习总结

信息安全系统设计基础第十二周学习总结 【学习时间&#xff1a;8 小时】 【学习内容&#xff1a;process文件夹中的代码理解和执行、故障排除】 一、代码理解 1.env文件夹-environ.c代码 #include <stdio.h> #include <stdlib.h> int main(void) { printf("PA…

maven依赖仲裁

转载自&#xff1a;http://blog.csdn.net/wanyanxgf/article/details/6617403

前端学习(1683):前端系列实战课程之让蛇吃食物变长

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>游戏初始化界面</title><style>body {ma…

cdoj 1246 每周一题 拆拆拆~ 分解质因数

拆拆拆~ Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/show/1246 Description 给你一个数x&#xff0c;你有两个操作 1.分解质因数&#xff0c;如果x是一个合数&#xff0c;那么就将x分解质因数&#xff0c;然后进入操作2&#xff0c;…

当你在浏览器输入一个网址,如http://www.taobao.com,按回车之后发生了什么?请从技术的角度描述,如浏览器、网络(UDP、TCP、HTTP等),以及服务器等各种参与对象上由此引发的一系

1.DNS域名解析&#xff1a;浏览器缓存、系统缓存、路由器、ISP的DNS服务器、根域名服务器。把域名转化成IP地址。2.与IP地址对应的服务器建立TCP连接&#xff0c;经历三次握手&#xff1a;SYN&#xff0c;ACK、SYN&#xff0c;ACK3.以get&#xff0c;post方式发送HTTP请求&…

前端学习(1684):前端系列实战课程之判断游戏结束

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>游戏初始化界面</title><style>body {ma…

swift 用协议实现代理传值功能

1.功能简介RootViewController中用个lable和一个按钮&#xff0c;点击按钮跳转到模态窗口。在模态窗口中有个TextField和一个按钮&#xff0c;输入文字点击关闭模态按钮后跳转到RootViewController&#xff0c;并改变其label为输入的值。2 .实现思路ModelViewController中定义一…

前端学习(1685):前端系列实战课程之设置难度

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>游戏初始化界面</title><style>body {ma…

git 学习

参考 http://git.oschina.net/oschina/git-osc/wikis/%E5%B8%AE%E5%8A%A9#继续阅读 http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000 常用git 命令 git initgit add <file>git commit -am "XXXX"git remote add origin g…