技术博客HTML
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>贪吃蛇</title> | |
| <style type="text/css"> | |
| *{margin:0;padding: 0;font-family: "Microsoft YaHei";} | |
| #page{margin-right: auto;margin-left: auto; margin-top: 20px;height: 600px; width: 980px; } | |
| #yard{ width: 800px;border: 1px solid gray;box-shadow: 0 0 10px black; float: right;} | |
| #mark{font-weight: 800;} | |
| #mark_con{ color: red; } | |
| button{width: 50px; } | |
| a{text-decoration:none;} | |
| </style> | |
| <script type="text/javascript"> | |
| //伪常量 | |
| var BLOCK_SIZE = 20; //格子大小 | |
| var COLS = 40; //列数 | |
| var ROWS = 30; //行数 | |
| //变量 | |
| var snakes = []; //保存蛇坐标 | |
| var c = null; //绘图对象 | |
| var toGo = 3; //行进方向 | |
| var snakecount = 4; //蛇身数量 | |
| var interval = null; //计时器 | |
| var foodX = 0; //食物X轴坐标 | |
| var foodY = 0; //食物Y轴坐标 | |
| var oMark = null; //分数显示框 | |
| var isPause = false; //是否暂停 | |
| // 绘图函数 | |
| function draw(){ | |
| c.clearRect(0,0,BLOCK_SIZE * COLS, BLOCK_SIZE * ROWS); | |
| //画出横线 | |
| for( var i = 1; i <= ROWS; i++ ) { | |
| c.beginPath(); | |
| c.moveTo(0, i * BLOCK_SIZE); | |
| c.lineTo(BLOCK_SIZE * COLS, i * BLOCK_SIZE); | |
| c.strokeStyle = "gray"; | |
| c.stroke(); | |
| } | |
| //画出竖线 | |
| for(var i = 1; i <= COLS; i++){ | |
| c.beginPath(); | |
| c.moveTo(i * BLOCK_SIZE, 0); | |
| c.lineTo(i * BLOCK_SIZE, BLOCK_SIZE * ROWS); | |
| c.stroke(); | |
| } | |
| //画出蛇 | |
| for (var i = 0; i < snakes.length; i++){ | |
| c.beginPath(); | |
| c.fillStyle = "green"; | |
| c.fillRect(snakes[i].x, snakes[i].y, BLOCK_SIZE, BLOCK_SIZE); | |
| c.moveTo(snakes[i].x, snakes[i].y); | |
| c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y); | |
| c.lineTo(snakes[i].x + BLOCK_SIZE, snakes[i].y + BLOCK_SIZE); | |
| c.lineTo(snakes[i].x, snakes[i].y + BLOCK_SIZE); | |
| c.closePath(); | |
| c.strokeStyle = "white"; | |
| c.stroke(); | |
| } | |
| //画出食物 | |
| c.beginPath(); | |
| c.fillStyle = "yellow"; | |
| c.fillRect(foodX, foodY, BLOCK_SIZE, BLOCK_SIZE); | |
| c.moveTo(foodX, foodY); | |
| c.lineTo(foodX + BLOCK_SIZE, foodY); | |
| c.lineTo(foodX + BLOCK_SIZE, foodY + BLOCK_SIZE); | |
| c.lineTo(foodX, foodY + BLOCK_SIZE); | |
| c.closePath(); | |
| c.strokeStyle = "red"; | |
| c.stroke(); | |
| } | |
| //游戏初始化 | |
| function start(){ | |
| for( var i = 0; i < snakecount; i++){ | |
| snakes[i] = {x: i * BLOCK_SIZE, y: 0}; | |
| } | |
| addFood(); | |
| draw(); | |
| oMark.innerHTML = 0; | |
| } | |
| //移动函数 | |
| function move(){ | |
| switch(toGo){ | |
| case 1: //左边 | |
| snakes.push({x: snakes[snakecount - 1].x - BLOCK_SIZE, y: snakes[snakecount - 1].y}); | |
| break; | |
| case 2: //上边 | |
| snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y - BLOCK_SIZE}); | |
| break; | |
| case 3: //右边 | |
| snakes.push({x: snakes[snakecount - 1].x + BLOCK_SIZE, y: snakes[snakecount - 1].y}); | |
| break; | |
| case 4: //下边 | |
| snakes.push({x: snakes[snakecount - 1].x, y: snakes[snakecount - 1].y + BLOCK_SIZE}); | |
| break; | |
| default:; | |
| } | |
| snakes.shift(); | |
| isEat(); | |
| isDie(); | |
| draw(); | |
| } | |
| //吃到食物判断 | |
| function isEat(){ | |
| if (snakes[snakecount - 1].x == foodX && snakes[snakecount - 1].y == foodY) { | |
| oMark.innerHTML = (parseInt(oMark.innerHTML) + 1).toString(); | |
| addFood(); | |
| addSnake(); | |
| } | |
| } | |
| //添加蛇身 | |
| function addSnake(){ | |
| snakecount++; | |
| snakes.unshift({x:BLOCK_SIZE * COLS, y:BLOCK_SIZE * ROWS}); | |
| } | |
| //交互响应函数 | |
| function keydown(keyCode){ | |
| switch(keyCode){ | |
| case 37: //左边 | |
| if(toGo != 1 && toGo != 3) toGo = 1;break; | |
| case 38: //上边 | |
| if(toGo != 2 && toGo != 4) toGo = 2;break; | |
| case 39: //右边 | |
| if(toGo != 3 && toGo != 1) toGo = 3;break; | |
| case 40: //下的 | |
| if(toGo != 4 && toGo != 2) toGo = 4;break; | |
| case 80: //开始/暂停 | |
| if(isPause){ | |
| interval = setInterval(move,100); | |
| isPause = false; | |
| document.getElementById('pause').innerHTML = "Pause"; | |
| }else{ | |
| clearInterval(interval); | |
| isPause = true; | |
| document.getElementById('pause').innerHTML = "Start"; | |
| } | |
| break; | |
| } | |
| } | |
| //制造食物 | |
| function addFood(){ | |
| foodX = Math.floor(Math.random() * (COLS - 1)) * BLOCK_SIZE; | |
| foodY = Math.floor(Math.random() * (ROWS - 1)) * BLOCK_SIZE; | |
| // console.log(foodX + " -- " + foodY); | |
| } | |
| //死亡判断 | |
| function isDie(){ | |
| if(snakes[snakecount - 1].x == -20 || snakes[snakecount - 1].x == BLOCK_SIZE * COLS | |
| || snakes[snakecount - 1].y == -20 || snakes[snakecount - 1].y == BLOCK_SIZE * ROWS){ | |
| alert("Game Over!"); | |
| clearInterval(interval); | |
| } | |
| for(var i = 0; i < snakecount - 1; i++){ | |
| if(snakes[snakecount - 1].x == snakes[i].x && snakes[snakecount - 1].y == snakes[i].y){ | |
| clearInterval(interval); | |
| alert("Game Over!"); | |
| } | |
| } | |
| } | |
| // 启动函数 | |
| window.onload = function(){ | |
| c = document.getElementById('canvas').getContext('2d'); | |
| oMark = document.getElementById('mark_con'); | |
| start(); | |
| interval = setInterval(move,100); | |
| document.onkeydown = function(event){ | |
| var event = event || window.event; | |
| keydown(event.keyCode); | |
| } | |
| } | |
| </script> | |
| </head> | |
| <body> | |
| <div id="page"> | |
| <div id="yard"><canvas id="canvas" height="600px" width="800px"></canvas></div> | |
| <div id="help"> | |
| <div id="mark">得分：<span id="mark_con"></span></div> | |
| <div id="helper"> | |
| <table> | |
| <tr> | |
| <td></td> | |
| <td><button onclick="keydown(38);">上</button></td> | |
| <td></td> | |
| </tr> | |
| <tr> | |
| <td><button onclick="keydown(37);">左</button></td> | |
| <td><button onclick="keydown(80);" id="pause">暂停</button></td> | |
| <td><button onclick="keydown(39);">右</button></td> | |
| </tr> | |
| <tr> | |
| <td></td> | |
| <td><button onclick="keydown(40);">下</button></td> | |
| <td></td> | |
| </tr> | |
| </table><a href="index.html">再玩一次</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div style="text-align:center;"> | |
| </div> | |
| </body> | |
| </html> |
技术博客HTML的更多相关文章
- 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛
如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己 ...
- ******IT公司面试题汇总+优秀技术博客汇总
滴滴面试题:滴滴打车数据库如何拆分 前端时间去滴滴面试,有一道题目是这样的,滴滴每天有100万的订单,如果让你去设计数据库,你会怎么去设计? 当时我的想法是根据用户id的最后一位对某个特殊的值取%操作 ...
- 转： BAT等研发团队的技术博客
BAT 技术团队博客 1. 美团技术团队博客: 地址: http://tech.meituan.com/ 2. 腾讯社交用户体验设计(ISUX) 地址:http://isux.tencent.c ...
- 解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/
解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/
- 欢迎访问我的最新个人技术博客http://zhangxuefei.top
博客园已停止更新,欢迎访问我的最新个人技术博客http://zhangxuefei.top
- 技术博客（初用markdown）。
技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容 输出不同的三位数 以下为代码和输出结果 *** #include<stdio.h> ...
- 技术博客（初用markdown）
技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容. 1 如果想输出多个多位数的时候,可以尝试用多个if语句.如果需要输出3为数的时候,设置三个变 ...
- 【转】【技术博客】Spark性能优化指南——高级篇
http://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651745207&idx=1&sn=3d70d59cede236e ...
- 作业一：创建个人技术博客、自我介绍、简单的C程序
年9月14日中午12点: 一.主要内容 建个人技术博客(博客园 www.cnblogs.com) 本学期将通过写博客的方式提交作业,实际上,最终的目的是希望同学们能通过博客的形式记录我们整个学习过程 ...
- IT技术博客收藏
1. coolshell.cn 特点: 每篇都是精品 2. 云风 特点: 3. 阮一峰的博客 特点:高精深 3. offbye涛声依旧-全端技术博客 特点: android的开发技术比较多,非常值得一 ...
随机推荐
- windows下开启 PHP扩展Redis
Redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted set ...
- hadoop排序 -- 全排序
目录 一.关于Reducer全排序 1.1. 什么叫全排序 1.2. 分区的标准是什么 二.全排序的三种方式 2.1. 一个Reducer 2.2. 自定义分区函数 2.3. 采样 一.关于Reduc ...
- 飞控入门之C语言结构体、枚举
结构体 先来说明一下,结构体存在的意义.比如说有一只猫,要在C语言程序中综合描述它,那么可以这样说,它的体重是float类型的,颜色是char类型的,它的一些食物名字是一个数组,那么如果分开定义这些变 ...
- 【Mac】gem install 出错 You don't have write permissions for the /Library/Ruby/Gems
问题描述 RedisDump 是一个用于 Redis 数据导人/导出的工具,是基于 Ruby 实现的,需要先安装 Ruby.但因为 Mac 自带有 Ruby 所以我直接用gem install red ...
- Ambari搭建hadoop错误记录
1.ResourceManager启动失败 错误如下 2019-03-24 19:57:00,607 - Error while executing command 'start': Tracebac ...
- 【翻译】理解 LSTM 网络
目录 理解 LSTM 网络 递归神经网络 长期依赖性问题 LSTM 网络 LSTM 的核心想法 逐步解析 LSTM 的流程 长短期记忆的变种 结论 鸣谢 本文翻译自 Christopher Olah ...
- Linux入门进阶第五天——用户管理（帐号管理 ）下
一.身份切换 为了避免 rm -rf /* 的悲剧发生,平时使用时,尽量使用一般帐号!需要环境设置等必要时才使用root 1.su命令 一般地,推荐使用su - / su - username的形式来 ...
- 20155206 2016-2017-2 《Java程序设计》第4周学习总结
20155206 2006-2007-2 <Java程序设计>第4周学习总结 教材学习内容总结 继承: 避免多个类间重复定义共同行为,在编写程序的过程中可能会出现部分代码重复的现象,把重复 ...
- Burpsuite神器常用功能使用方法总结
Burpsuite介绍: 一款可以进行再WEB应用程序的集成攻击测试平台. 常用的功能: 抓包.重放.爆破 1.使用Burp进行抓包 这边抓包,推荐360浏览器7.1版本(原因:方便) 在浏览器设置代 ...
- php 换行 PHP_EOL
在unix世界换行就用/n来代替,但是windows为了体现他的不同,就用/r/n,更有意思的是在mac中用/r.因此unix系列用 /n,windows系列用 /r/n,mac用 /r,这样就用你写 ...