极乐门资源网 Design By www.ioogu.com
这篇文章主要介绍了如何基于javascript实现贪吃蛇游戏,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
html代码:
<div class="content"> <div class="btn startBtn"> <!-- 开始按钮 --> <button type="button"></button> </div> <div class="btn stopBtn"> <!-- 暂停按钮 --> <button type="button"></button> </div> <div id="snakeWrap"></div> <!-- 主题内容 --> </div>
css代码:
* { margin: 0; padding: 0; } body { background-color: #565F65; width: 100%; height: 10vh; overflow: hidden; } .content { width: 500px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; margin-left: -250px; background-color: #565F65; border: 10px solid #E7E7E7; box-shadow: inset 0px 0px 5px 2px #000; } .btn { width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, .3); /*游戏未开始时和暂停时的遮罩*/ z-index: 2; } .btn button { background: none; border: none; background-size: 100% 100%; cursor: pointer; outline: none; position: absolute; left: 50%; top: 50%; } .startBtn button{ width: 170px; height: 80px; background-image: url(img/startbtn.png); margin-top: -40px; margin-left: -85px; } .stopBtn { display: none; } .stopBtn button{ width: 70px; height: 70px; background-image: url(img/stopbtn.png); margin-top: -35px; margin-left: -35px; } #snakeWrap { width: 500px; height: 500px; position: relative; } .snakeHead { /*蛇头样式*/ background-color: aqua; border-radius: 50%; } .snakeBody { /*蛇身样式*/ background-color: navajowhite; border-radius: 50%; } .food { /*食物样式*/ background-image: url(img/food.png); background-size: cover; }
javascript 代码:
var sw = 20, //一个方块的宽 sh = 20, //一个方块的高 tr = 25, //行数 td = 25; //列数 var snake = null, //蛇的实例 food = null, //食物的实例 game = null; //游戏的实例 function Square(x, y, classname) { this.x = x * sw; //方块实际的位置 this.y = y * sh; //方块实际的位置 this.class = classname; this.viewContent = document.createElement('div'); //方块对应的DOM元素 this.viewContent.className = this.class; this.parent = document.getElementById('snakeWrap'); //方块的父级 } Square.prototype.create = function() { //创建方块 DOM,并添加到页面里 this.viewContent.style.position = 'absolute'; this.viewContent.style.width = sw + 'px'; this.viewContent.style.height = sh + 'px'; this.viewContent.style.left = this.x + 'px'; this.viewContent.style.top = this.y + 'px'; this.parent.appendChild(this.viewContent); }; Square.prototype.remove = function() { this.parent.removeChild(this.viewContent); } //蛇 function Snake() { this.head = null; //存一下蛇头的信息 this.tail = null; //存一下蛇尾的信息 this.pos = []; //存储蛇身上的每一个方块的位置,二维数组 this.directionNum = { //存储蛇走的方向,用一个对象来表示 left : { x : -1, y : 0, rotate : 180 }, right : { x : 1, y : 0, rotate : 0 }, up : { x : 0, y : -1, rotate : -90 }, down : { x : 0, y : 1, rotate : 90 } } } Snake.prototype.init = function() { //创建蛇头 var snakeHead = new Square(2, 0, 'snakeHead'); snakeHead.create(); this.head = snakeHead; // 存储蛇头信息 this.pos.push([2, 0]); //把蛇头的位置存起来 //创建蛇身体 var snakeBody1 = new Square(1, 0, 'snakeBody'); snakeBody1.create(); this.pos.push([1, 0]); //把蛇身1的位置存起来 var snakeBody2 = new Square(0, 0, 'snakeBody'); snakeBody2.create(); this.tail = snakeBody2; //把蛇尾的信息存起来 this.pos.push([0, 0]); //把蛇身1的位置存起来 //让蛇头蛇身形成链表关系 snakeHead.last = null; snakeHead.next = snakeBody1; snakeBody1.last = snakeHead; snakeBody1.next = snakeBody2; snakeBody2.last = snakeBody1; snakeBody2.next = null; //给蛇添加一条属性,用来表示蛇走的方向 this.direction = this.directionNum.right; //默认让蛇往右走 } //这个方法用来获取蛇头的下一个位置对应的元素, 要根据元素做不同的事情 Snake.prototype.getNextPos = function() { var nextPos = [ //蛇头要走的下一个点的坐标 this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y ]; //下一个点是自己,代表撞到了自己,游戏结束 var selfCollind = false; //是否撞到自己 this.pos.forEach(function(value) { if(value[0] == nextPos[0] && value[1] == nextPos[1]) { //如果数组中的两个数据都相等,就说明下一个点在蛇身上里面能找到,代表撞到自己了 selfCollind = true; } }); if(selfCollind) { console.log('撞到自己了!'); this.strategies.die.call(this); return; } //下一个点是墙,游戏结束 if(nextPos[0] < 0 || nextPos[1] < 0 || nextPos[0] > td - 1 || nextPos[1] > tr - 1) { console.log('撞墙了!'); this.strategies.die.call(this); return; } //下一个点是食物,吃 if(food && food.pos[0] == nextPos[0] && food.pos[1] == nextPos[1]) { //如果这个条件成立说明现在蛇头要走的下一个点是食物的那个点 console.log('撞到食物了了!'); this.strategies.eat.call(this); return; } //下一个点什么都不是,走 this.strategies.move.call(this); }; //处理碰撞后要做的事 Snake.prototype.strategies = { move : function(format) { //这个参数用于决定要不要删除最后一个方块(蛇尾), 当传了这个参数后就表示要做的事情是吃 //创建新身体(在蛇头位置) var newBody = new Square(this.head.x/sw, this.head.y/sh, 'snakeBody'); //更新链表关系 newBody.next = this.head.next; newBody.next.last = newBody; newBody.last = null; this.head.remove(); //旧舌头从原来的位置删除 newBody.create(); //创建一个新蛇头(蛇头下一个要走到的点) var newHead = new Square(this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y, 'snakeHead') //更新链表关系 newHead.next = newBody; newHead.last = null; newBody.last = newHead; newHead.viewContent.style.transform = 'rotate('+this.direction.rotate+'deg)'; newHead.create(); //蛇身上每一个方块的坐标也要更新 this.pos.splice(0,0, [this.head.x/sw + this.direction.x, this.head.y/sh + this.direction.y]); this.head = newHead; //还要把this.head的信息更新一下 if(!format) { //如何format 的值为 false, 表示需要删除(除了吃之外的操作) this.tail.remove(); this.tail = this.tail.last; this.pos.pop(); } }, eat : function() { this.strategies.move.call(this, true); createFood(); game.score ++; }, die : function() { game.over(); } } snake = new Snake(); //创建食物 function createFood() { //食物小方块的随机坐标 var x = null; var y = null; var include = true; //循环跳出的条件, true表示食物的坐标在蛇身上(需要继续循环),false表示食物坐标不在蛇身上(不循环了) while(include) { x = Math.round(Math.random() * (td - 1)); //0-29 y = Math.round(Math.random() * (tr - 1)); snake.pos.forEach(function(value) { if(x != value[0] && y != value[1]) { //这个条件成立说明现在随机出来的这个坐标,在蛇身上并没有找到 include = false; } }); } //生成食物 food = new Square(x, y, 'food'); food.pos = [x,y]; //存储一下生成食物的坐标,用于跟蛇头要走的下一个点作对比 var foodDom = document.querySelector('.food'); if(foodDom) { foodDom.style.left = x*sw + 'px'; foodDom.style.top = y*sh + 'px'; }else { food.create(); } } //创建游戏逻辑 function Game() { this.timer = null; this.score = 0; this.speed = 200; } Game.prototype.init = function() { snake.init(); snake.getNextPos(); createFood(); document.onkeydown = function(ev) { //用户按下方向键触发事件 if(ev.which == 37 && snake.direction != snake.directionNum.right) { //用户按下左键是,蛇不能是往右走 snake.direction = snake.directionNum.left; }else if(ev.which == 38 && snake.direction != snake.directionNum.dowm) { snake.direction = snake.directionNum.up; }else if(ev.which == 39 && snake.direction != snake.directionNum.left) { snake.direction = snake.directionNum.right; }else if(ev.which == 40 && snake.direction != snake.directionNum.up) { snake.direction = snake.directionNum.down; } } this.start(); } Game.prototype.start = function() { //开始游戏 this.timer = setInterval(function() { snake.getNextPos(); }, this.speed); } Game.prototype.pause = function() { clearInterval(this.timer); } Game.prototype.over = function() { //开始游戏 clearInterval(this.timer); alert('你的得分为' + this.score); //游戏回到最初的状态 var snakeWrap = document.getElementById('snakeWrap'); snakeWrap.innerHTML = ''; snake = new Snake(); game = new Game(); var startBtnWrap = document.querySelector('.startBtn'); startBtnWrap.style.display = 'block'; } //开启游戏 game = new Game(); var startBtn = document.querySelector('.startBtn button'); startBtn.onclick = function() { startBtn.parentNode.style.display = 'none'; game.init(); }; //暂停 var snakeWrap = document.getElementById('snakeWrap'); var puseBtn = document.querySelector('.stopBtn button') snakeWrap.onclick = function() { game.pause(); puseBtn.parentNode.style.display = 'block'; } puseBtn.onclick =function() { game.start(); puseBtn.parentNode.style.display = 'none'; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
极乐门资源网 Design By www.ioogu.com
极乐门资源网
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
极乐门资源网 Design By www.ioogu.com
暂无如何基于javascript实现贪吃蛇游戏的评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?
更新日志
2024年12月24日
2024年12月24日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]