<!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的更多相关文章

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

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

  2. ******IT公司面试题汇总+优秀技术博客汇总

    滴滴面试题:滴滴打车数据库如何拆分 前端时间去滴滴面试,有一道题目是这样的,滴滴每天有100万的订单,如果让你去设计数据库,你会怎么去设计? 当时我的想法是根据用户id的最后一位对某个特殊的值取%操作 ...

  3. 转： BAT等研发团队的技术博客

    BAT 技术团队博客   1. 美团技术团队博客:  地址: http://tech.meituan.com/ 2. 腾讯社交用户体验设计(ISUX) 地址:http://isux.tencent.c ...

  4. 解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客 http://hsj69106.blog.51cto.com/1017401/595598/

    解决Eclipse中文乱码 - 技术博客 - 51CTO技术博客  http://hsj69106.blog.51cto.com/1017401/595598/

  5. 欢迎访问我的最新个人技术博客http://zhangxuefei.top

    博客园已停止更新,欢迎访问我的最新个人技术博客http://zhangxuefei.top

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

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

  7. 技术博客（初用markdown）

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

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

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

  9. 作业一：创建个人技术博客、自我介绍、简单的C程序

    年9月14日中午12点: 一.主要内容  建个人技术博客(博客园 www.cnblogs.com) 本学期将通过写博客的方式提交作业,实际上,最终的目的是希望同学们能通过博客的形式记录我们整个学习过程 ...

  10. IT技术博客收藏

    1. coolshell.cn 特点: 每篇都是精品 2. 云风 特点: 3. 阮一峰的博客 特点:高精深 3. offbye涛声依旧-全端技术博客 特点: android的开发技术比较多,非常值得一 ...

随机推荐

  1. js之冒泡排序与快速排序

    //冒泡排序 let arr = [1, 6, 3, 7, 5, 9, 2, 8]; function sort(arr) { //升序 console.time("冒泡排序耗时" ...

  2. [示例] Firemonkey TreeView 父项勾选子项连动

    效果: 代码: procedure TForm1.TreeView1ChangeCheck(Sender: TObject); var i: Integer; t: TTreeViewItem; be ...

  3. 动态链接库 —— Dll 基础

    1. DLL 的初识 在 windows 中,动态链接库是不可缺少的一部分,windows 应用程序程序接口提供的所有函数都包含在 DLL 中,其中有三个非常重要的系统 DLL 文件,分别为 Kern ...

  4. Jlink-10 pin 的定义（stm32使用）官方定义

    因为在网上找了好久才找到正确的接法,所以专门记载了下来,因为stm32芯片这几个功能引脚会内置上拉电阻,所以不需要再外接电阻了.

  5. Nginx部署tomcat/wildfly集群负载均衡

    1.调度器配置: docker run -p 80:80 --name nginx --restart=always  -v /root/nginx/www/:/usr/share/nginx/htm ...

  6. 05ICMP协议与ARP协议（IP协议中重要协议）

    ICMP协议在网络层,应用:ping命令,tracert命令:追踪命令,用于静态路由. ICMP重定向 redirect

  7. document ready

    https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded https://github.com/addyosmani/j ...

  8. 20155206 实验一《Java开发环境的熟悉》实验报告

    实验内容 使用JDK编译.运行简单的Java程序 使用IDEA 编辑.编译.运行.调试Java程序. 实验代码 `import java.text.DecimalFormat; import java ...

  9. 20155207王雪纯 《Java程序设计》实验一报告

    20155207王雪纯 <Java程序设计>实验一报告 课程:Java程序设计 班级:1552 指导教师:娄嘉鹏 实验日期:2017.04.07 实验名称:Java开发环境的熟悉(Linu ...

  10. 20155213 《JAVA程序设计》实验二（JAVA面向对象程序设计）实验报告

    20155213 <JAVA程序设计>实验二(JAVA面向对象程序设计)实验报告 实验内容 初步掌握单元测试和TDD 理解并掌握面向对象三要素:封装.继承.多态 初步掌握UML建模 熟悉S ...