<!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. xftp

    SFTP.FTP 文件传输软件. 所有通过该软件的网络流量都是加密的. 1.点击新建 2.新建一个链接 3.点击确定,保存,然后点击该链接 4.链接服务器成功后,如下图右侧,可以增删改查文件.左侧文件 ...

  2. CentOS 7.2搭建xl2tp服务器

    ## 1.下载xl2tpd.tar.gz源码包 ```wget http://pkgs.fedoraproject.org/repo/pkgs/xl2tpd/xl2tpd-1.3.8.tar.gz/d ...

  3. PAT甲级 1004.Counting Leaves

    参考:https://blog.csdn.net/qq278672818/article/details/54915636 首先贴上我一开始的部分正确代码: #include<bits/stdc ...

  4. 20155224 《实验二 Java面向对象程序设计》实验报告

    实验二 Java面向对象程序设计 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S.O.L.I.D原则 了解设计模式 实验要求 没有Linux ...

  5. 4540: [Hnoi2016]序列

    4540: [Hnoi2016]序列 https://www.lydsy.com/JudgeOnline/problem.php?id=4540 分析: 莫队+RMQ+单调栈. 考虑加入一个点后,区间 ...

  6. (转) PHP 开发者该知道的 5 个 Composer 小技巧

    1. 仅更新单个库 只想更新某个特定的库,不想更新它的所有依赖,很简单: composer update foo/bar 此外,这个技巧还可以用来解决“警告信息问题”.你一定见过这样的警告信息: Wa ...

  7. Centos7使用yum安装MySQL5.6的正确姿势

    centos自带的repo是不会自动更新每个软件的最新版本,所以无法通过yum方式安装MySQL的高级版本. 所以,即使使劲用yum -y install mysql mysql-server mys ...

  8. 基于ejabberd简单实现xmpp群聊离线消息

    首先,xmpp服务器是基于ejabberd.离线消息模块是mod_interact,原地址地址:https://github.com/adamvduke/mod_interact: 修改后实现群聊离线 ...

  9. Python中的矩阵操作

    Numpy 通过观察Python的自有数据类型,我们可以发现Python原生并不提供多维数组的操作,那么为了处理矩阵,就需要使用第三方提供的相关的包. NumPy 是一个非常优秀的提供矩阵操作的包.N ...

  10. 牛客小白月赛9 A签到（分数取模，逆元）

    传送门 对分母求一下逆元,把除法取模变成乘法取模,逆元介绍看这里 这种方法只适合模为质数的情况 #include<bits/stdc++.h> using namespace std; ; ...