<!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. 使用Hexo + GitHub Pages 搭建个人博客

    一.前言 之前是在CSDN上写博客的,但是无奈其广告满天飞,还有因为个人不太喜欢CSDN博客里的一些东西,加上看到很多技术大牛都有自己的个人博客,于是乎!便想着搭建一个自己的个人博客.其实之前写博客还 ...

  2. laravel5.5源码笔记（一、入口应用的初始化）

    laravel的项目入口文件index.php如下 define('LARAVEL_START', microtime(true)); require __DIR__.'/../vendor/auto ...

  3. PE 学习之路 —— DOS 头、NT 头

    1. 前述 可执行文件的格式是操作系统本身执行机制的反映,理解它有助于对操作系统的深刻理解,掌握可执行文件的数据结构及其一些机理,是研究软件安全的必修课.`PE(Portable Executable ...

  4. Java实例 Part6：Java中的克隆

    目录 Part6:Java中的克隆 Example01:Java对象的假克隆 Example02:Java对象的浅克隆 Example03:Java对象的深克隆 Example04:序列化与对象克隆 ...

  5. 【npm 指令】 （不定时持续更新）

    查看webpack所有的版本及更多信息 npm info webpack 查看webpack所有的版本 npm info webpack versions 查看webpack最新的版本 npm vie ...

  6. 浅析Vue.js 中的条件渲染指令

    1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...

  7. LintCode 896. Prime Product 简明题解

    Given a non-repeating prime array arr, and each prime number is used at most once, find all the prod ...

  8. Android Log类基本用法

    Log类介绍: API for sending log output.Generally, use the Log.v() Log.d() Log.i() Log.w() and Log.e() me ...

  9. SpringMVC 中，当前台传入多个参数时，可将参数封装成一个bean类

    在实际业务场景中,当前台通过 url 向后台传送多个参数时,可以将参数封装成一个bean类,在bean类中对各个参数进行非空,默认值等的设置. 前台 url ,想后台传送两个参数,userName 和 ...

  10. Python运维三十六式：用Python写一个简单的监控系统

    市面上有很多开源的监控系统:Cacti.Nagios.Zabbix.感觉都不符合我的需求,为什么不自己做一个呢? 用Python两个小时徒手撸了一个简易的监控系统,给大家分享一下,希望能对大家有所启发 ...