新建网页 //① 绘制地图 function Map() { //私有成员(不会随便发生变化) var w = 800; var h = 400; //成员方法，绘制地图 this.showmap = function () { //创建p、设置css样式、追加给body var tu = document.createElement('p'); tu.style.width = w + "px"; tu.style.height = h + "px"; tu.style.backgroundImage = "url(./12.jpg)"; document.body.appendChild(tu); } } //② 绘制食物 function Food() { var len = 20; //把食物(权值)坐标声明为公开的，以便在外部访问 this.xFood = 0; this.yFood = 0; this.piece = null; //页面上唯一的食物对象 //绘制 this.showfood = function () { //创建p、设置css样式、追加给body if (this.piece === null) { this.piece = document.createElement('p'); this.piece.style.width = this.piece.style.height = len + "px"; this.piece.style.backgroundColor = "green"; this.piece.style.position = "absolute"; document.body.appendChild(this.piece); } //食物设置绝对定位(position/left/top) //食物位置“随机”摆放 //移动步进值：20px //食物“权值”坐标： X轴(0-39) Y轴(0-19) //食物真实坐标：权值坐标 * 步进值 this.xFood = Math.floor(Math.random() * 40); //0-39的随机数 this.yFood = Math.floor(Math.random() * 20); //0-19的随机数 this.piece.style.left = this.xFood * len + "px"; this.piece.style.top = this.yFood * len + "px"; } } //③ 小蛇 function Snake() { var len = 20; this.redirect = "right"; //默认向右边移动 //后期snakebody要变化，因此声明为公开的(每个蛇节：[x坐标，y坐标，颜色，蛇节对象]) this.snakebody = [[0, 1, 'green', null], [1, 1, 'green', null], [2, 1, 'green', null], [3, 1, 'red', null]]; //a.绘制小蛇 this.showsnake = function () { //遍历小蛇的各个蛇节，并依次创建即可 for (var i = 0; i < this.snakebody.length; i++) { //this.snakebody[i]//代表每个蛇节 //创建蛇节p if (this.snakebody[i][3] === null) {//判断没有创建对应的蛇节 this.snakebody[i][3] = document.createElement('p'); //设置css样式(宽度、高度、颜色) this.snakebody[i][3].style.width = this.snakebody[i][3].style.height = len + "px"; this.snakebody[i][3].style.backgroundColor = this.snakebody[i][2]; //绝对定位及位置 this.snakebody[i][3].style.position = "absolute"; //把蛇节追加给body document.body.appendChild(this.snakebody[i][3]); } this.snakebody[i][3].style.left = this.snakebody[i][0] * len + "px"; this.snakebody[i][3].style.top = this.snakebody[i][1] * len + "px"; } } //b.移动小蛇 this.movesnake = function () { //非蛇头蛇节(当前蛇节的新坐标 是"下个蛇节"的旧坐标) for (var i = 0; i < this.snakebody.length - 1; i++) { this.snakebody[i][0] = this.snakebody[i + 1][0]; this.snakebody[i][1] = this.snakebody[i + 1][1]; } if (this.redirect == "right") { //蛇头x坐标递增 this.snakebody[this.snakebody.length - 1][0] += 1; } if (this.redirect == "left") { //蛇头x坐标递减 this.snakebody[this.snakebody.length - 1][0] -= 1; } if (this.redirect == "up") { //蛇头y坐标递减 this.snakebody[this.snakebody.length - 1][1] -= 1; } if (this.redirect == "down") { //蛇头y坐标递增 this.snakebody[this.snakebody.length - 1][1] += 1; } //判断蛇头碰到食物 //蛇头坐标 var xSnake = this.snakebody[this.snakebody.length - 1][0]; var ySnake = this.snakebody[this.snakebody.length - 1][1]; //食物坐标food.xFood/food.yFood; if (xSnake == food.xFood && ySnake == food.yFood) { //吃食物增加蛇节 var newjie = [this.snakebody[0][0], this.snakebody[0][1], 'green', null]; this.snakebody.unshift(newjie);//把newjie放到数组的第一个位置去 //原食物消失，重新生成一个食物 food.showfood(); } //控制小蛇在地图范围内移动 if (xSnake 39 || ySnake 19) { alert('game over'); clearInterval(mytime); return false; } //吃到自己判断(蛇头坐标与其他蛇节坐标一致) for (var k = 0; k < this.snakebody.length - 1; k++) { if (this.snakebody[k][0] == xSnake && this.snakebody[k][1] == ySnake) { alert('game over kill you by yourself'); clearInterval(mytime); return false; } } //根据新坐标绘制小蛇 this.showsnake(); } } window.onload = function () { var map = new Map(); map.showmap(); food = new Food();//声明为全局的以便在该加载事件函数外部访问 food.showfood(); snake = new Snake();//声明为全局的snake对象 snake.showsnake(); //移动小蛇 //setInterval(全局变量，时间) mytime = setInterval("snake.movesnake()", 200); //设置键盘事件，控制器小蛇移动方向 document.onkeydown = function (evt) { var num = evt.keyCode;//通过事件对象获得数值码，进而知道被触发键子 if (num == 38) { snake.redirect = "up"; } if (num == 40) { snake.redirect = "down"; } if (num == 37) { snake.redirect = "left"; } if (num == 39) { snake.redirect = "right"; } } } body { margin: 0; }
本文展示了js实现简易版贪吃蛇小游戏的相关代码，更多相关内容请关注喷绘创想鸟。
相关推荐：
简易 PHP+MySQL 分页类
HTML转Excel，并实现打印，下载功能
两个不用递归的树形数组构造函数
以上就是JS实现简易版贪吃蛇小游戏的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1546316.html
微信扫一扫 
支付宝扫一扫 
