首页 > 代码库 > 使用javascript实现贪吃蛇游戏
使用javascript实现贪吃蛇游戏
当自己用代码实贪吃蛇游戏时，是很有成就感的一件事情。同时在写的过程中也是自己对javascript基本语法的复习与体会。
以下就是代码以及一些代码注释：（bug是有的，浏览器的兼容性，本人的能力无法解决）
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style type="text/css"> div { border: 1px solid #0094ff; width: 20px; height: 20px; background-color: yellow; } table { margin: 10px auto; } </style> <script type="text/javascript"> //全局变量 var colCount = 12; //12列 var rowCount = 14; //14行 //--------------window.onload在这里------------- window.onload=function () { //画小方块12x14 for (var i = 0; i < rowCount; i++) { var createtr = document.createElement("tr"); for (var j = 0; j < colCount; j++) { var createtd = document.createElement("td"); createtd.appendChild(CreateDiv(i, j)); createtr.appendChild(createtd); } document.getElementById("tabMain").appendChild(createtr); } //游戏逻辑方法 GameController(); } //--------------封装的方法以及自定义的类--------------- //获得指定rowIndex和colIndex的div function GetDiv(rowIndex, colIndex) { var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { if (divs[i].getAttribute("rowIndex") == rowIndex && divs[i].getAttribute("colIndex") == colIndex) { return divs[i]; } } return undefined; } //生成小方块的方法 function CreateDiv(rowIndex, colIndex) { var xdiv = document.createElement("div"); //添加自定义属性，为每个单元格做标记. xdiv.setAttribute("rowIndex", rowIndex); xdiv.setAttribute("colIndex",colIndex); xdiv.setAttribute("food", false); return xdiv; } //单元格 var Unit = { colIndex: 0, rowIndex: 0, //单元格方向 dir: "Left", olddir: "Left", Draw: function (rowIndex, colIndex) { GetDiv(rowIndex, colIndex).style.backgroundColor = "red"; }, Wipe: function (rowIndex, colIndex) { GetDiv(rowIndex, colIndex).style.backgroundColor = "yellow"; }, MoveLeft: function () { this.colIndex--; }, MoveRight: function () { this.colIndex++; }, MoveUp: function () { this.rowIndex--; }, MoveDown: function () { this.rowIndex++; } } //存放单元格集合类 var UnitList = { //存放单元格的数组 body: new Array(), //添加三个单元格到数组，这里代码写的不好，本想每次吃到食物就调用AddBody方法的，后来就把这个方法写死了。 AddBody: function () { var unit = Object.create(Unit); unit.rowIndex = 8; unit.colIndex = 8; this.body[this.body.length] = unit; //测试代码 var unit2 = Object.create(Unit); unit2.rowIndex = 8; unit2.colIndex = 9; this.body[this.body.length] = unit2; var unit3 = Object.create(Unit); unit3.rowIndex = 8; unit3.colIndex = 10; this.body[this.body.length] = unit3; }, Draw: function () { for (var i = 0; i < this.body.length; i++) { this.body[i].Draw(this.body[i].rowIndex, this.body[i].colIndex); } }, Wipe: function () { for (var i = 0; i < this.body.length; i++) { this.body[i].Wipe(this.body[i].rowIndex, this.body[i].colIndex); } }, AutoMoveTo: function () { //先擦除 this.Wipe(); //移动 for (var i = 0; i < this.body.length; i++) { switch (this.body[i].dir) { case "Left": this.body[i].MoveLeft(); break; case "Right": this.body[i].MoveRight(); break; case "Down": this.body[i].MoveDown(); break; case "Up": this.body[i].MoveUp(); break; } this.body[i].olddir = this.body[i].dir; if (this.body[i - 1] != undefined) { this.body[i].dir = this.body[i - 1].olddir; } } //重画 this.Draw(); } } //----------------游戏逻辑方法------------- function GameController() { var U = Object.create(UnitList); U.AddBody(); U.Draw(); AddFood(); var set = window.setInterval(function () { MoveMove() }, 500); //移动方法 function MoveMove() { //判断是否能移动 if (IsAbleMove()) { //判断是否吃到自己 if (IsEatMySelf()) { window.clearInterval(set); alert("吃到自己了"); } //判断是否吃到食物 if (IsEatFood()) { //新增一个unit var newU = Object.create(Unit); newU.rowIndex = U.body[U.body.length - 1].rowIndex; newU.colIndex = parseInt(U.body[U.body.length - 1].colIndex) + 1; U.body[U.body.length] = newU; //新增一个食物 AddFood(); } U.AutoMoveTo(); } else { // 关闭setInterval window.clearInterval(set); alert("结束"); } } //判断越界 function IsAbleMove() { var rowIndex = U.body[0].rowIndex; var colIndex = U.body[0].colIndex; switch (U.body[0].dir) { case "Left": colIndex--; break; case "Right": colIndex++; break; case "Down": rowIndex++; break; case "Up": rowIndex--; break; } if (rowIndex < 0 || colIndex < 0 || rowIndex > 13 || colIndex > 11) { return false; } return true; } //生成食物 function AddFood() { var rowIndex; var colIndex; random(); function random() { rowIndex = parseInt(Math.random() * 14); colIndex = parseInt(Math.random() * 12); for (var i = 0; i < U.body.length; i++) { if (rowIndex == U.body[i].rowIndex && colIndex == U.body[i].colIndex) { // alert("haha"); random(); } } }; GetDiv(rowIndex, colIndex).style.backgroundColor = "green"; GetDiv(rowIndex, colIndex).setAttribute("food", true); } //是否吃到食物 function IsEatFood() { if (GetDiv(U.body[0].rowIndex, U.body[0].colIndex).getAttribute("food") == "true") { GetDiv(U.body[0].rowIndex, U.body[0].colIndex).setAttribute("food", false); return true; } return false; } //是否吃到自己 function IsEatMySelf() { var rowIndex = U.body[0].rowIndex; var colIndex = U.body[0].colIndex; for (var i = 1; i < U.body.length; i++) { if (U.body[i].rowIndex == rowIndex && U.body[i].colIndex == colIndex) { return true; } } return false; } //监听键盘事件 window.onkeydown = function () { switch (event.keyCode) { case 37: //alert("你按了左方向键"); if (U.body[0].dir != "Right") { U.body[0].dir = "Left"; } break; case 38: //alert("你按了上"); if (U.body[0].dir != "Down") { U.body[0].dir = "Up"; } break; case 39: //alert("你按了右方向键"); if (U.body[0].dir != "Left") { U.body[0].dir = "Right"; } break; case 40: //alert("你按了下方向键"); if (U.body[0].dir != "Up") { U.body[0].dir = "Down"; } break; } } } </script></head><body> <table id="tabMain"> </table></body></html>
使用javascript实现贪吃蛇游戏
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。