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

 

<!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;this.body[i].y = this.body[i - 1].y;}//根据方向处理蛇头switch (this.direction) {case "left":this.body[0].x -= 1;break;case "right":this.body[0].x += 1;break;case "up":this.body[0].y -= 1;break;case "down":this.body[0].y += 1;break;}/*       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();//给body加键盘事件 第五步 给蛇改变方向window.onkeydown = function(e) {var event = e || window.event;switch (event.keyCode) {case 38:if (snake.direction != "down") {snake.direction = "up";}break;case 40:if (snake.direction != "up") {snake.direction = "down";}break;case 37:if (snake.direction != "right") {snake.direction = "left";}break;case 39:if (snake.direction != "left") {snake.direction = "right";}break;}}/* */}}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/419259.shtml

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

相关文章

第十二周学习总结

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

前端学习(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…

当你在浏览器输入一个网址,如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…

前端学习(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…

技能UP:SAP OBYC自动记账的实例说明(含value String应用说明)

一. 自动过账原理 在MM模块的许多操作都能实现在FI模块自动过账&#xff0c;如PO收货、发票验证(LIV)、工单发料、向生产车间发料等等。不用说&#xff0c;一定需要在IMG中进行配置才可以实现自动处理。但SAP实现的这种自动配置的机制是怎样的呢&#xff1f;其实也并不复杂&…

Java多线程系列--“JUC锁”05之 非公平锁

转载自&#xff1a;http://www.cnblogs.com/skywang12345/p/3496651.html点击打开链接 概要 前面两章分析了"公平锁的获取和释放机制"&#xff0c;这一章开始对“非公平锁”的获取锁/释放锁的过程进行分析。内容包括&#xff1a; 参考代码 获取非公平锁(基于JDK1.7.0…

空间点到直线的距离

作者&#xff1a;zdd出处&#xff1a;http://www.cnblogs.com/graphics/ 本文版权归作者和博客园共有&#xff0c;欢迎转载&#xff0c;但未经作者同意必须保留此段声明&#xff0c;且在文章页面明显位置给出原文连接&#xff0c;否则保留追究法律责任的权利.转载于:https://ww…

深入理解Java中为什么内部类可以访问外部类的成员

转载自&#xff1a;http://blog.csdn.net/zhangjg_blog/article/details/20000769 内部类简介 虽然Java是一门相对比较简单的编程语言&#xff0c;但是对于初学者&#xff0c; 还是有很多东西感觉云里雾里&#xff0c; 理解的不是很清晰。内部类就是一个经常让初学者感到迷惑的…

前端学习(1696):前端系列javascript之class和继承

class Prople {constructor(name) {this.name name;}eat() {console.log(${this.name} eat something)} }//类 class Student extends Prople {constructor(name, number) {super(name);this.number number;}sayHi() {console.log(姓名 ${this.name} .学号 ${this.number})} …

vue的computed计算属性学习

模板内的表达式是非常便利的&#xff0c;但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。这时候需要使用到vue的计算属性computed。 文件目录结构如下&#xff1a;利用vue脚手架创建 这里实现将一个字符串进行翻转的功能&#xff1a; 其中H…

android错误详解教程二

原因&#xff1a;XML文件中<ImageView 写成<imageView 大小写写错转载于:https://www.cnblogs.com/-monster/p/5023969.html