JS实现——贪吃蛇

把以下代码保存成Snake.html文件，使用Google或360浏览器打开

<!DOCTYPE HTML>

<html>

<head>

  <meta charset="utf-8" />

  <title>Snake</title>

<style>

</style>

</head>

<body>

<div style="position: relative">

  <div style="width: 400px; font-size: 22px; border: 3px solid black;">

    分数:<span id="score"></span>

  </div>

  <canvas id="myCanvas">your browser does not support the canvas</canvas>

  <div id="help" style="position: absolute; left: 420px; top: 40px;">

    Esc: 重新开始</br>

    Enter: 开始/暂停/继续</br>

    方向键: 改变蛇的移动方向</br>

    Ctrl: 切换控制模式(影响手感)</br>

    数字1: 加速</br>

    数字2: 减速</br>

  </div>

  <div id="gameStates" style="position: absolute; left: 420px; top: 200px; color: red">

    控制模式: <span id="controlMode"></span></br>

    运动状态: <span id="pause"></span></br>

    蛇的方向: <span id="snakeDir"></span></br>

    蛇的速度: <span id="snakeSpeed"></span></br>

    蛇的长度: <span id="snakeLength"></span></br>

    <span id="info"></span>

  </div>

</div>

</body>

<script type="text/javascript">

/*

 By Problue,2015.10.15

*/

var KEY_L = 37;

var KEY_U = 38;

var KEY_R = 39;

var KEY_D = 40;

var KEY_RESET = 27

var KEY_PAUSE = 13;

var KEY_CHANGE_CONTROL_MODE = 17;

var KEY_INC_SPEED = 49;

var KEY_DEC_SPEED = 50;

var MAP_R = 20;

var MAP_C = 20;

var SNAKE_LENGTH_MAX = MAP_R * MAP_C;

var OBJ_SIZE = 20;

var OBJ = {

  EMPTY: 0,

  SNAKE_HEAD: 1,

  SNAKE_BODY: 2,

  SNAKE_TAIL: 3,

  FOOD: 4,

  STONE: 5

};

var colors = ['white', 'midnightblue', 'darkblue', 'mediumblue', 'midnightblue', 'dimgray'];

var mapData = "\

00000000000000000000\

00000000000000000000\

00000000000000000000\

50000000500000055000\

00000000000000005000\

00055000000005500000\

00050000000000500000\

00000550000550000000\

00000500000050000000\

00000000000000000000\

00000000000000000000\

00000005000050000000\

00000005500550000000\

00000500000000500000\

00000550000005500000\

00050000000000000000\

00055000000000050005\

00000000000000000000\

00000000000000000000\

00000000000000000000";

var map = [];

var snake = new Snake();

var food = new Point(0, 0);

//var time;

var pause;

var over;

var controlQueueMode;

var controlQueue = new Queue();

var score;

function Snake() {

  this.nodes = [];

  this.dir = 0;

  this.msSpeed = 0;

}

function Point(x, y) {

  this.x = x;

  this.y = y;

}

Point.prototype.clone = function() {

  return new Point(this.x, this.y);

}

Point.prototype.equals = function(other) {

  if(other === this)

    return true;

  if(!(other instanceof Point))

    return false;

  return this.x == other.x && this.y == other.y;

}

function Queue() {

  this.arr = [];

  this.head = 0;

  this.tail = 0;

}

Queue.prototype.enQueue = function(elem) {

  this.tail++;

  this.arr[this.tail] = elem;

}

Queue.prototype.deQueue = function() {

  this.head++;

  return this.arr[this.head];

}

Queue.prototype.empty = function() {

  return this.head >= this.tail;

}

Queue.prototype.clear = function() {

  this.arr.length = 0;

  this.head = 0;

  this.tail = 0;

}

start();

function start() {

  initGame();

  initMap();

  initSnake();

  drawMap();

  showGameStates();

  updateScore();

  drawSnake();

  randFood();

  drawObj(food, OBJ.FOOD);

}

function initGame() {

  canvas = document.getElementById('myCanvas');

  cxt = canvas.getContext('2d');

  canvas.width = MAP_C * OBJ_SIZE;

  canvas.height = MAP_R * OBJ_SIZE;

  canvas.style.border = '3px solid black';

  document.onkeydown = keydown;

  //time = +new Date;

  pause = true;

  over = 0;

  controlQueueMode = true;

  score = 0;

}

function initMap() {

  for(var r = 0; r < MAP_R; r++) {

    map.push([]);

    for(var c = 0; c < MAP_C; c++) {

      var obj = mapData[r * MAP_C + c] - 0;

      map[r][c] = obj;

    }

  }

}

function initSnake() {

  snake.nodes.length = 0;

  snake.nodes.push(new Point(2, 0));

  snake.nodes.push(new Point(1, 0));

  snake.nodes.push(new Point(0, 0));

  snake.dir = KEY_R;

  snake.msSpeed = 150;

}

function keydown(event) {

  var key = window.event ? event.keyCode : event.which;

  switch(key) {

  case KEY_U:

    if(snake.dir != KEY_D) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_D:

    if(snake.dir != KEY_U) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_L:

    if(snake.dir != KEY_R) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_R:

    if(snake.dir != KEY_L) {

      snake.dir = key;

      controlQueue.enQueue(snake.dir);

    }

    break;

  case KEY_RESET:

    start();

    break;

  case KEY_PAUSE:

    pause = !pause;

    if(!pause) {

      controlQueue.clear();

      move();

    }

    break;

  case KEY_CHANGE_CONTROL_MODE:

    controlQueueMode = !controlQueueMode;

    controlQueue.clear();

    break;

  case KEY_INC_SPEED:

    snake.msSpeed -= 10;

    break;

  case KEY_DEC_SPEED:

    snake.msSpeed += 10;

    break;

  default: ;

  }

  showGameStates();

}

function moveStep() {

  showGameStates();

  var newHead = snake.nodes[0].clone();

  var oldTail = snake.nodes[snake.nodes.length - 1].clone();

  switch(snake.dir) {

  case KEY_U:

    newHead.y--;

    break;

  case KEY_R:

    newHead.x++;

    break;

  case KEY_L:

    newHead.x--;

    break;

  case KEY_D:

    newHead.y++;

    break;

  }

  var coord = '坐标(' + snake.nodes[0].x + ',' + snake.nodes[0].y + ')是';

  info(coord + '空');

  if((newHead.x > MAP_C - 1 || newHead.x < 0) ||

     (newHead.y > MAP_R - 1 || newHead.y < 0)) {

    info(coord + '墙壁');

    over = 1;

    return;

  }

  if(isInSnake(newHead)) {

    info(coord + '自己');

    over = 2;

    return;

  }

  var thing = map[newHead.y][newHead.x];

  if(thing == OBJ.STONE) {

    info(coord + '石头');

    over = 3;

    return;

  }

  if(thing == OBJ.FOOD) {

    info(coord + '食物');

    snake.nodes.push(new Point(0, 0));

    map[newHead.y][newHead.x] = OBJ.EMPTY;

    randFood();

    drawObj(food, OBJ.FOOD);

    updateScore();

    showGameStates();

  }

  for(var i = snake.nodes.length - 1; i >= 1; i--)

    snake.nodes[i] = snake.nodes[i - 1].clone();

  snake.nodes[0] = newHead;

  drawObj(oldTail, OBJ.EMPTY);

  drawSnake();

}

function move() {

  if(pause)

    return;

  if(controlQueueMode && !controlQueue.empty())

    snake.dir = controlQueue.deQueue();

  moveStep();

  if(over) {

    over = 0;

    var turn = [];

    turn[KEY_U] = KEY_R;

    turn[KEY_D] = KEY_L;

    turn[KEY_L] = KEY_U;

    turn[KEY_R] = KEY_D;

    snake.dir = turn[snake.dir];

  }

  setTimeout(move, snake.msSpeed);

}

function isInSnake(point) {

  for(var i = 0; i < snake.nodes.length; i++)

    if(snake.nodes[i].equals(point))

      return true;

  return false;

}

function randFood() {

  function randInt(n, m) {

    return Math.floor(Math.random() * (m - n)) + n;

  }

  function smart(pt) {

    if(pt.x == snake.nodes[0].x) {

      if(snake.dir == KEY_U)

        return pt.x - snake.nodes[0].x < 0;

      if(snake.dir == KEY_D)

        return pt.x - snake.nodes[0].x > 0;

    }

    if(pt.y == snake.nodes[0].y) {

      if(snake.dir == KEY_L)

        return pt.y - snake.nodes[0].y < 0;

      if(snake.dir == KEY_R)

        return pt.y - snake.nodes[0].y > 0;

    }

    return false;

  }

  do

  {

    food.x = randInt(0, MAP_C);

    food.y = randInt(0, MAP_R);

  } while(isInSnake(food) || smart(food) ||

    map[food.y][food.x] != OBJ.EMPTY);

  map[food.y][food.x] = OBJ.FOOD;

}

function info(str) {

  $('info').innerHTML = str;

}

function showGameStates() {

  $('pause').innerHTML = pause ? '静止' : '移动';

  $('controlMode').innerHTML = controlQueueMode ? '队列' : '普通';

  var toText = [];

  toText[KEY_L] = '左';

  toText[KEY_U] = '上';

  toText[KEY_R] = '右';

  toText[KEY_D] = '下';

  $('snakeDir').innerHTML = toText[snake.dir];

  $('snakeSpeed').innerHTML = snake.msSpeed + 'ms/' + OBJ_SIZE + 'px';

  $('snakeLength').innerHTML = snake.nodes.length;

}

function updateScore() {

  $('score').innerHTML = score++;

}

function drawMap() {

  var pt = new Point(0, 0);

  for(var r = 0; r < MAP_R; r++) {

    for(var c = 0; c < MAP_C; c++) {

      if(map[r][c] == OBJ.STONE) {

        pt.x = c;

        pt.y = r;

        drawObj(pt, OBJ.STONE);

      }

    }

  }

}

function drawSnake() {

  drawObj(snake.nodes[0], OBJ.SNAKE_HEAD);

  for(var i = 1; i < snake.nodes.length - 1; i++)

    drawObj(snake.nodes[i], OBJ.SNAKE_BODY);

  drawObj(snake.nodes[snake.nodes.length - 1], OBJ.SNAKE_TAIL);

}

function drawObj(point, type) {

  cxt.fillStyle = colors[type];

  cxt.fillRect(point.x * OBJ_SIZE, point.y * OBJ_SIZE,

    OBJ_SIZE, OBJ_SIZE);

}

function $(id) {

  return document.getElementById(id);

}

</script>

</html>

出处：qq群--编程算法&思想 459909287

JS实现——贪吃蛇的更多相关文章

js版贪吃蛇
之前没有写博客的习惯,这是我的第一个博客,有些的不好的地方,希望大家多多提意见 js版的贪吃蛇相对比较简单,废话不多说直接上代码,有需要注意的地方我会标红,github源码地址https://gith ...
前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发
一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach() ...
JS仿贪吃蛇：一串跟着鼠标的Div
贪吃蛇是一款80后.90后比较熟悉的经典游戏,下面通过简单的JS代码来实现低仿版贪吃蛇效果:随着鼠标的移动,在页面中呈现所有Div块跟随鼠标依次移动,效果如下图所示. <!DOCTYPE htm ...
原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
用Js写贪吃蛇
使用Javascript做贪吃蛇小游戏, 1.自定义地图宽高,蛇的初始速度 2.食物随机出现 3.蛇的样式属性 4.贪吃蛇玩法(吃食物,碰到边界,吃食物后加速,计分,) <!DOCTYPE ht ...
用js实现贪吃蛇
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
OC版贪吃蛇
昨天写了一个js版贪吃蛇,今天突然想写一个OC版的,来对比一下两种语言的区别 oc版功能,适配所有尺寸iphone,可暂停,可设置地图和蛇的比例,可加速对比一下会发现js版的相对OC版的会简单一些, ...
原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
100行JS实现HTML5的3D贪吃蛇游戏
js1k.com收集了小于1k的javascript小例子,里面有很多很炫很酷的游戏和特效,今年规则又增加了新花样,传统的classic类型基础上又增加了WebGL类型,以及允许增加到2K的++类型, ...

随机推荐

SpringBoot 2.x （14）：WebFlux响应式编程
响应式编程生活案例: 传统形式: 一群人去餐厅吃饭,顾客1找服务员点餐,服务员把订单交给后台厨师,然后服务员等待, 当后台厨师做好饭,交给服务员,经过服务员再交给顾客1,依此类推,该服务员再招待顾客2 ...
【持续更新】Java 时间相关
直接上代码: import java.util.*; import java.text.SimpleDateFormat; public class HelloWorld { public stati ...
TCP的三次握手以及TCP状态转换图详解
今天来讨论一下TCP的三次握手以及TCP的状态转换图.首先发一个三次握手的流程图如下: 圖 2.4-3.三向交握之封包连接模式A:封包发起当用戶端想要对服务器端发起连接时,就必須要送出一個要求连线的封 ...
hashlib（加盐）回炉练习
简介: 用于加密相关的操作,代替了md5模块和sha模块,主要提供SHA1,SHA224,SHA256,SHA384,SHA512,MD5算法.在python3中已经废弃了md5和sha模块,简单说明 ...
SQL Server 父子迭代查询语句
-- 根据父ID得到所有子ID -- Get childs by parent idWITH TreeAS( SELECT Id,ParentId FROM dbo.Node P WHERE P.Id ...
Windows Azure 配置Active Directory 主机（1）
现在越来越多企业将自己业务系统迁移云端,方便公司日常运维管理.这篇文章将简单介绍一下,从 Windows Azure 虚拟网络上的虚拟机 (VM) 中的 Corp Active Directory 林 ...
js使用my97插件显示当前时间，且select控制计算时间差
做页面需要两个时间输入框一个显示当前时间,一个显示之前的时间,并且需要一个select下拉框控制两个时间输入框之间的差,效果如下图: 这里使用的是My97DatePicer,简单方便,引入my97插件 ...
UVA 1619 Feel Good 感觉不错（扫描法）
Feel Good Time Limit: 3000MS Memory Limit: Unknown 64bit IO Format: %lld & %llu Bill is deve ...
Form组件的验证流程及扩展(钩子)
Form组件的验证流程及扩展(钩子) 常用的form class TestForm(Form): t1 = fields.CharField( widget=widgets.Textarea # 输入 ...
helm install
reference 前提:已安装k8s:v1.10.4 helm install on master(无需下载官方tar包) 链接:https://pan.baidu.com/s/1Ji3Ru1pTQ ...

JS实现——贪吃蛇

JS实现——贪吃蛇的更多相关文章

随机推荐

热门专题