<!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. CentOS6安装各种大数据软件 第三章：Linux基础软件的安装

    相关文章链接 CentOS6安装各种大数据软件 第一章:各个软件版本介绍 CentOS6安装各种大数据软件 第二章:Linux各个软件启动命令 CentOS6安装各种大数据软件 第三章:Linux基础 ...

  2. Python的print的底层实现

    默认调用 sys.stdout.write() 方法 import sys sys.stdout.write("hello") 会在控制台打印:hello

  3. http缓存机制与原理

    一.浏览器缓存分类:强制缓存和协商缓存 二.浏览器加载一个页面的简单流程 浏览器第一次请求 浏览器再次请求页面 三.http缓存涉及到的相关术语 缓存命中率:从缓存中得到数据的请求数与所有请求数的比率 ...

  4. linux——高级文本处理命令之wc、cut、sort

    1.  wc :Word Count 命令的功能为统计指定文件中的字节数.字数.行数,并将统计结果显示输出 1.1 命令格式: wc [选项]文件... 1.2 命令参数: -c 统计字节数. -l  ...

  5. Linux入门进阶第四天（下）——程序管理（补充内容）

    1.PID 触发任何一个事件时,系统都会将他定义成为一个程序,并且给予这个程序一个 ID ,称为 PID,同时依据启发这个程序的使用者与相关属性关系,给予这个 PID 一组有效的权限设置. 同一个程序 ...

  6. 20155203 实验三《敏捷开发与XP实践》实验报告

    20155203 实验三<敏捷开发与XP实践>实验报告 一.实验内容 在IDEA中使用工具(Code->Reformate Code)把下面代码重新格式化,再研究一下Code菜单,找 ...

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

    20155213 实验一<Java开发环境的熟悉>实验报告 一. 实验内容及步骤 (一)使用JDK编译.运行简单的java程序 命令行下的程序开发 输入cd Code进入Code文件夹里 ...

  8. NIS - 深入了解如何搭建NIS环境

    第一篇[NIS]深入了解NIS 1     环境准备 操作系统:CentOS7.2 服务端安装如下软件: 软件名称 功能 ypserv NIS Server端的服务进程 rpcbind 提供RPC服务 ...

  9. 【CF527C】Glass Carving

    [CF527C]Glass Carving 题面 洛谷 题解 因为横着切与纵切无关 所以开\(set\)维护横着的最大值和纵着的最大值即可 #include <iostream> #inc ...

  10. 【LG4309】【BZOJ3173】[TJOI2013]最长上升子序列

    [LG4309][BZOJ3173][TJOI2013]最长上升子序列 题面 洛谷 BZOJ 题解 插入操作显然用平衡树就行了 然后因为后面的插入对前面的操作无影响 就直接在插入完的序列上用树状数组求 ...