<!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>
   
   
  </body>
  </html>

期中HTML代码及技术博客的更多相关文章

  1. 如何写出高质量的技术博客 这边文章出自http://www.jianshu.com/p/ae9ab21a5730 觉得不错直接拿过来了 好东西要大家分享嘛

        如何写出高质量的技术博客?答案是:如果你想,就一定能写出高质量的技术博客.看起来很唯心,但这就是事实.有足够愿力去做一件目标明确,有良好反馈系统的事情往往很简单.就是不停地训练,慢慢地,你自己 ...

  2. 技术博客（初用markdown）。

    技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容 输出不同的三位数 以下为代码和输出结果 *** #include<stdio.h> ...

  3. 技术博客（初用markdown）

    技术博客 菜鸟教程在这个网站我学到许多有趣的东西,并且弥补了我之前的一些不足之处. 以下为我学习到的内容. 1 如果想输出多个多位数的时候,可以尝试用多个if语句.如果需要输出3为数的时候,设置三个变 ...

  4. 【转】【技术博客】Spark性能优化指南——高级篇

    http://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651745207&idx=1&sn=3d70d59cede236e ...

  5. [转]有哪些值得关注的技术博客（Java篇）

    有哪些值得关注的技术博客(Java篇)   大部分程序员在自学的道路上不知道走了多少坑,这个视频那个网站搞得自己晕头转向.对我个人来说我平常在学习的过程中喜欢看一些教程式的博客.这些博客的特点: 1. ...

  6. 开始写自己的iOS技术博客了

    2015-09-26 中秋节前夕,开始写自己的iOS开发相关的技术博客,还请广大专业的人士批评指教!欢迎纠错和交流! 在来到北京的第二家公司艾亿新融资本管理的子公司——资配易.由于基本没有加班,也算有 ...

  7. C++中实现对map按照value值进行排序 - 菜鸟变身记 - 51CTO技术博客

    C++中实现对map按照value值进行排序 - 菜鸟变身记 - 51CTO技术博客 C++中实现对map按照value值进行排序 2012-03-15 15:32:36 标签:map 职场 休闲 排 ...

  8. 创建GitHub技术博客

    创建GitHub技术博客全攻略 githubio技术博客网站生成 说明: 首先,你需要注册一个 github 账号,最好取一个有意义的名字,比如姓名全拼,昵称全拼,如果被占用,可以加上有意义的数字.本 ...

  9. 【新版】Android技术博客精华汇总

    [新版]Android技术博客精华汇总(原文链接内持续更新) http://www.apkbus.com/thread-313856-1-1.html Kotlin Kotlin学习资料汇总 http ...

随机推荐

  1. table的td、th的一些样式问题（宽度，边框，滚动条）

    1. 给table加边框 table{ border-collapse: collapse; /*表格的边框合并为一个单一的边框*/ } table, table tr th, table tr td ...

  2. 2.6 USB摄像头驱动之USB描述符

    学习目标:分析USB摄像头驱动的描述符: 一.USB设备描述符 在usb设备驱动分析那一节,也用到了usb描述符. usb描述符可分为: USB设备描述符(usb_device_descriptor) ...

  3. python3 用户登录验证的小功能

    用户登录验证,记录一下,还需要修改黑名单不合理 #!/usr/bin/env python3 ''' 需求:编写登录接口 1.输入用户名和密码 2.验证用户密码成功后输出欢迎消息 3.3次没有验证通过 ...

  4. Python学习：16.Python面对对象（三、反射，构造方法，静态字段，静态方法）

    一.构造方法 在使用类创建对象的时候(就是类后面加括号)就自动执行__init__方法. class A: def __init__(self): print('A') class B: def __ ...

  5. python小项目之微信远程控制

    前两天接触了一个有趣的python模块--itchat,这个模块可以非常方便的操作微信,今天就来使用这个模块来实现微信远程控制. 环境准备 itchat模块不是python标准模块(内置模块),是一个 ...

  6. Java学习笔记三十:Java小项目之租车系统

    Java小项目之租车系统 一:项目背景介绍: 根据所学知识,编写一个控制台版的“呱呱租车系统” 功能: 1.展示所有可租车辆: 2.选择车型.租车量: 3.展示租车清单,包含:总金额.总载货量以及其车 ...

  7. ASP.NET 并发控制

    当多个用户试图同时修改数据时,需要建立控制机制来防止一个用户的修改对同时操作的其他用户所作的修改产生不利的影响.处理这种情况的系统叫做“并发控制”. 并发控制的类型 通常,管理数据库中的并发有三种常见 ...

  8. 20155204 2016-2017-2 《Java程序设计》第9周学习总结

    20155204 2016-2017-2 <Java程序设计>第9周学习总结 教材学习内容总结 SRP单一职责原则,也叫内聚性,判断srp the 类 方法 itself c与java的区 ...

  9. 20155328 2016-2017-2 《Java程序设计》第三周学习总结

    20155328 2016-2017-2 <Java程序设计>第三周学习总结 教材学习内容总结 类是对象的设计图,对象是类的实例.用class定义类,用new新建一个对象. 一个原始码中可 ...

  10. OpenCV人脸识别-训练级联分类器

    OpenCV中以及附带了训练好的人脸特征分类器,3.2版本的有三种: 分别是LBP,Haar,Hug 在Data目录下. 也可以训练自己的特征库,具体参照如下: 级联分类器训练 — OpenCV 2. ...