JavaScript贪吃蛇，网页在线版贪食蛇游戏

发布时间：2018-08-16 18:02:29 所属栏目：编程来源：站长网

导读：我的措施用javascript与Html中的table团结，实现的简朴的贪食蛇游戏，游戏的首要特点，可调解蛇移动速率，可调解蛇移动范畴，碰鼻、咬到身材则Game Over!而且有关卡加快成果。游戏并不完美，只是实现了首要的坚守，有计划不公道的处所，接待您感各人提意见

　　我的措施用javascript与Html中的table团结，实现的简朴的贪食蛇游戏，游戏的首要特点，可调解蛇移动速率，可调解蛇移动范畴，碰鼻、咬到身材则“Game Over!”而且有关卡加快成果。游戏并不完美，只是实现了首要的坚守，有计划不公道的处所，接待您感各人提意见!

　　实现要领：由javascript说话中的setInterval要领驱动整个游戏措施，配置“nowDirection”即蛇的当前移动偏向为全局变量，由setInterval要领按时获取蛇的移动偏向，由document.onkeydown()捕获当前按键(上、下、左、右)以修改nowDirection，这样就可以用偏向按键节制蛇周期时刻的定向移动。蛇的行走轨迹实现小我私人觉的实现的还算较量简朴，蛇身的每一节存在数组中，数组中的元素为蛇的坐标，移动的时辰数组按照偏向在数组头部加一个元素，而且将数组最后一个元素删除，这样table就可以精确的表现蛇的行走轨迹，游戏竣事较量轻易判定，只需按照偏向判定蛇的下一个移动单位的坐标是否超出范畴(碰鼻)，可能下一个移动单位的坐标是否存在于蛇身的数组中(咬到身材)。游戏的关卡计一律蛇身数组的长度计较，不能关卡贮蓄改变全局变量speed而且从头启动setInterval要领即可。

　　首要技能点：一、蛇的移动

　　二、蛇的移动轨迹表现

　　三、周期内不能接管两次按键指令

　　四、随机天生蛇的食品

　　(概略写写，着实基础没什么技能含量！)

　　示例代码：

<html> <head> <title><b>Java</b>Script贪吃蛇，网页在线版贪食蛇游戏 - 猛火网 Veryhuo.COM</title> <script language="javascript" type="text/javascript"> var maxScope = 30; var interval; var nowDirection = 'left'; var speed = 300; var cellWeight = 10; var snakeBody = new Array(); var foodStation = null; var freeCell_x = new Array(); var freeCell_y = new Array(); var cornerList = new Array(); var cycleCount = 0; function $(x) { return document.getElementById(x); } //页面加载 function init() { _table = document.getElementById("table"); for (var i = 0; i <= maxScope; i++) { var row = document.createElement("tr"); row.id = i; for (var j = 0; j <= maxScope; j++) { var cell = document.createElement("td"); cell.id = i + "_" + j; cell.width = cellWeight; cell.height = cellWeight; row.appendChild(cell); } document.getElementById("newbody").appendChild(row); } initSnake(); initFood(); snakeInterval(); } //移动举措驱动要领 function snakeInterval() { interval = window.setInterval('snakeMove();cycleCount=0', speed); } //初始化蛇 function initSnake() { var x = parseInt(Math.random() * (parseInt(maxScope) - 1) + 1); var y = parseInt(Math.random() * (parseInt(maxScope) - 1) + 1); var nowHeadStation = x + "_" + y; snakeBody.push(nowHeadStation); tdState(nowHeadStation); } //配置食品位置 function initFood() { var allCells = new Array(); for (var i = 0; i < maxScope + 1; i++) { for (var j = 0; j < maxScope + 1; j++) { allCells.push(i + '_' + j); } } var addCellsString = allCells.join(',') + ','; for (var i = 0; i < snakeBody.length; i++) { _snakeBodyCell = snakeBody[i] + ','; addCellsString = addCellsString.replace(_snakeBodyCell, ""); } addCellsString = addCellsString.substr(0, addCellsString.length - 1); var _allCells = addCellsString.split(','); foodStation = _allCells[parseInt(Math.random() * (_allCells.length - 1) + 0)] try { foodState(foodStation); } catch (e) { alert(foodStation); } } //接管按钮指令 function document.onkeydown() { cycleCount = cycleCount + 1; if (cycleCount < 2) { switch (event.keyCode) { case 37: if (nowDirection != 'right') { nowDirection = 'left'; } break; case 38: if (nowDirection != 'down') { nowDirection = 'up'; } break; case 39: if (nowDirection != 'left') { nowDirection = 'right'; } break; case 40: if (nowDirection != 'up') { nowDirection = 'down'; } break; } } } //获取单位格坐标 function coordinate(i) { switch (i) { case 'x': return $(snakeBody[0]).id.split('_')[0]; case 'y': return $(snakeBody[0]).id.split('_')[1]; } } //蛇移动 function snakeMove() { foodX = foodStation.split('_')[0]; foodY = foodStation.split('_')[1]; var _xy; switch (nowDirection) { case 'left': _x = coordinate('x'); _y = Math.floor(coordinate('y')) - 1; _xy = _y; break; case 'right': _x = coordinate('x'); _y = Math.floor(coordinate('y')) + 1; _xy = _y; break; case 'up': _x = Math.floor(coordinate('x')) - 1; _y = coordinate('y'); _xy = _x; break; case 'down': _x = Math.floor(coordinate('x')) + 1; _y = coordinate('y'); _xy = _x; break; default: _x = coordinate('x'); _y = Math.floor(coordinate('y')) - 1; _xy = _y; } if (_xy < 0 || _xy > maxScope) { overCoordinate(); } else if (rearEnd(_x, _y)) { rearEndState(); } else if (_x == foodX && _y == foodY) { snakeBody.unshift(_x + '_' + _y); level(snakeBody.length); $('score').innerHTML = snakeBody.length * 10; tdState(snakeBody[0]); initFood(); } else { snakeBody.unshift(_x + '_' + _y); tdState(snakeBody[0]); tdStateBack(snakeBody.pop()); } } //咬到蛇身 function rearEnd(x, y) { var t = x + '_' + y; for (var i = 0; i < snakeBody.length; i++) { if (t == snakeBody[i]) { return true; } } return false; } //咬到蛇身状态变革 function rearEndState() { window.clearInterval(interval); alert('game over') } //碰鼻状态变革 function overCoordinate() { window.clearInterval(interval); alert("game over"); } function tdState(targetTd) { $(targetTd).style.background = "red"; } function foodState(targetTd) { $(targetTd).style.background = "green"; } function tdStateBack(targetTd) { $(targetTd).style.background = ""; } //关卡配置 function level(max) { switch (max) { case 10: levelShow("Second"); break; case 20: levelShow("Third"); break; case 30: levelShow("Forth"); break; case 40: levelShow("Fifth"); break; case 70: window.clearInterval(interval); alert("NB!"); window.close(); break; } } //配置差异关卡速率变革 function levelShow(_show){ window.clearInterval(interval); alert(_show); speed = speed - 50; snakeInterval(); } </script> </head> <body onload="init()"> <table id="table" align="center" bgcolor="pink"> <tbody id="newbody"> </tbody> </table> <table align="center"> <tr> <td style="font-size: 12px"> score:<span id="score">0</span> </td> </tr> </table> </body> </html><br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

　　相干资源：

　　贪吃蛇游戏网页版,基于JavaScript编写代码
　　JavaScript打造的小游戏贪吃蛇(详解)

　　本文来历：http://weiming.cnblogs.com/　

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys