javascript学习-贪吃蛇

贪吃蛇的例子：
在此例子中，利用snake数组的第0个元素和direction对象中的x值和y值做加法，算出蛇的下一个位置。利用间隔函数，不停的修改类名来进行渲染操作，感觉是一个很灵活的例子。
style.css

*{margin: 0;padding: 0;box-sizing: border-box;
}.page{width: 100vw;height: 100vh;position: absolute;left: 0;top: 0;
}
body{font-size: 0.16rem;
}
.startGame{/* display: none; */background: purple;display: flex; justify-content: center;align-items: center;
}.startBtn,.reStartBtn{width:2rem;height: 0.5rem;text-align: center;line-height: 0.5rem;background: deepskyblue;color: #fff;
}.endGame{display: none;/* display:flex; */flex-direction: column;justify-content: center;align-items: center;background: lightsalmon;
}
.endGame h1{margin: 1rem 0;color: #fff;
}.gaming{display: none;background: black;color: #fff;}
.gaming .score{display: flex;justify-content: space-between;height: 0.5rem;align-items: center;width: 100vw;padding: 0 0.25rem;
}.gaming .score .pauseBtn{width: 0.8rem;height: 0.3rem;line-height: 0.3rem;background: #999;text-align: center;}.gaming .mainGame{/* 15*20 */width: 3.45rem;height:4.6rem ;background: #555;margin: 0.3rem auto;display: flex;flex-wrap: wrap;border-top: 1px solid #ccc;border-left: 1px solid #ccc;box-sizing: content-box;
}
.gaming .mainGame .gezi{width: 0.23rem;height: 0.23rem;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;
}
.gaming .mainGame .gezi.snake{width: 0.23rem;height: 0.23rem;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;background-color: #fff;
}
.gaming .mainGame .gezi.food{width: 0.23rem;height: 0.23rem;border-right: 1px solid #ccc;border-bottom: 1px solid #ccc;/* background-color: orangered; */
}.gaming .mainGame .gezi.food:before{width: 100%;height: 100%;content: "";display: block;background:yellow;animation: food 1s alternate infinite ;box-shadow: 0 0 10px #ffffcc;
}
.gaming .mainGame .gezi.food[data-food=redStar]:before{background:deeppink;
}
@keyframes food{from{transform: scale(1) rotate(0deg);}to{transform: scale(0.5) rotate(360deg);}
}.gaming .mainGame .gezi.snake:before{content:"" ;display: block;width: 100%;height: 100%;background: #ccc;animation: snake 0.4s;box-sizing: border-box;
}
@keyframes snake{from{background: #fff;box-shadow:0 0 15px rgba(255,255,255,1);}to{background: #ccc;box-shadow:0 0 15px rgba(255,255,255,0.5);}
}

index.js主要实现了所有的贪吃蛇的页面的各种操作

var startBtn = document.querySelector(".startBtn")
var startPage = document.querySelector(".page.startGame")
var gamingPage = document.querySelector(".gaming")
var endGamePage = document.querySelector(".endGame")
var mainGame = document.querySelector(".mainGame")
var numDom = document.querySelector(".score .left .num")
var endGameScore = document.querySelector(".endGame .num")
var reStartBtn = document.querySelector('.reStartBtn');
var pauseBtn=document.querySelector(".pauseBtn");var snake = [{x:0,y:1},{x:1,y:1},{x:2,y:1}];
var snakeFood = {x:10,y:10
}
//初始化得分
var score = 0;
var interId;
var ispaused=false;
//定义蛇运动的方向
//从右向左{x:-1,y:0}
//从左向右{x:1,y:0}
//从上到下{x:0,y:1}
//从下到上{x:0,y:-1}
var direction = {x:-1,y:0}startBtn.onclick = function(){startPage.style.display = "none"gamingPage.style.display = "block"gameIng()
}function renderGezi(){for(var i=0;i<20;i++){for(var j=0;j<15;j++){var gezi = document.createElement("div");gezi.className = "gezi";gezi.id = 'x'+j+'y'+i;mainGame.appendChild(gezi)}}
}renderGezi()
//随机创建蛇，
function createSnake(){var randomX =  parseInt(Math.random()*13)var randomY = parseInt(Math.random()*20)snake = [];for(var i= 0;i<3;i++){snake.push({x:randomX+i,y:randomY})}}function renderSnake(){snake.forEach(function(item,i){var snakeBody = document.querySelector("#x"+item.x+"y"+item.y);snakeBody.className = "gezi snake";})
}//渲染食物
function renderFood(){var randomX =  parseInt(Math.random()*15)var randomY = parseInt(Math.random()*20)var foodDiv = document.querySelector("#x"+randomX+"y"+randomY)if(foodDiv.className == "gezi snake"){renderFood()}else{foodDiv.className = "gezi food"}}createSnake()renderFood()
renderSnake()function gameIng(){interId = setInterval(function(){var headerX = snake[0].x + direction.x;var headerY = snake[0].y + direction.y;if(headerX<0){headerX = 14;}if(headerX>14){headerX = 0;}if(headerY<0){headerY = 19;}if(headerY>19){headerY = 0;}var snakeHeader = {x:headerX,y:headerY};isSnake(snakeHeader) if(!isFood(snakeHeader)) {//将删除的蛇，找到相对应的dom，将其class类名修改成正常的gezivar snakeFooter = snake.pop()//返回删除的对象var snakeFooterDiv = document.querySelector("#x"+snakeFooter.x+"y"+snakeFooter.y);snakeFooterDiv.className = "gezi";}snake.unshift(snakeHeader)//在数组最前面加入renderSnake()},100)
}function isSnake(snakeHeader){var newHeader = document.querySelector("#x"+snakeHeader.x+"y"+snakeHeader.y)if(newHeader.className == "gezi snake"){clearInterval(interId);gamingPage.style.display = "none"endGamePage.style.display = "flex"endGameScore.innerHTML = score;return true;}else{return false;}
}function isFood(snakeHeader){var newHeader = document.querySelector("#x"+snakeHeader.x+"y"+snakeHeader.y)if(newHeader.className == "gezi food"){score ++;numDom.innerHTML = score;renderFood()return true;}else{return false;}
}var body = document.bodybody.addEventListener("keydown",function(e){console.log(e)//方向不能直接颠倒向上时原来不能是向下的。if(e.key == "ArrowUp"&&direction.y!=1){direction = {x:0,y:-1}}if(e.key=="ArrowRight"&&direction.x!=-1){direction = {x:1,y:0}}if(e.key == "ArrowDown"&&direction.y!=-1){direction = {x:0,y:1}}if(e.key=="ArrowLeft"&&direction.x!=1){direction = {x:-1,y:0}}
})ylEvent.init(body);
body.addEvent("swiperLeft",function(){if(direction.x!=1){direction = {x:-1,y:0}}
})body.addEvent("swiperRight",function(){if(direction.x!=-1){direction = {x:1,y:0}}
})body.addEvent("swiperTop",function(){if(direction.y!=1){direction = {x:0,y:-1}}
})body.addEvent("swiperBottom",function(){if(direction.y!=-1){direction = {x:0,y:1}}
})reStartBtn.onclick = function(){location.reload();
}
pauseBtn.onclick=function(){if(ispaused){ispaused=false;gameIng();}else{ispaused=true;clearInterval(interId);}
}

js辅助式响应.js

(function(){function xys(){var userAgent=navigator.userAgentvar html=document.querySelector("html");//userAgent.indexOf("iPhone")通过此方法可以获取iPhone在字符串中的索引值(开头位置)//没有找到返回-1html.className="";if((userAgent.indexOf("iPhone"))!=-1){html.classList.add("iphone");}else if((userAgent.indexOf("Android"))!=-1){html.classList.add("android");}else if((userAgent.indexOf("iPad"))!=-1){html.classList.add("ipad");}else{html.classList.add("pc");}if(window.innerWidth<640){html.classList.add('lt640');html.classList.add('lt960');html.classList.add('lt1200');}else if(window.innerWidth<960){html.classList.add('lt960');html.classList.add('lt1200');html.classList.add('gt640');}else if(window.innerWidth<1200){html.classList.add('lt1200');html.classList.add('gt640');html.classList.add('gt960');}else{html.classList.add('gt640');html.classList.add('gt960');html.classList.add('gt1200');}var screenWidth = window.innerWidth;var danwei = screenWidth/3.75;//屏幕的宽度/设计稿占满全屏的宽度为多少remvar html = document.querySelector("html")html.style.fontSize = danwei + 'px';}xys();window.onresize=function(){xys();}})()

swiperEvent.js

var ylEvent = {eventAll:{//"自定义的事件名称":['事件要触发执行的函数1','事件要触发执行的函数2','事件要触发执行的函数3']},init:function(dom){dom.eventAll = {},dom.addEvent = this.addEvent;dom.emit = this.emit;dom.removeEvent = this.removeEventdom.touchData = {};//body.emit('swiperLeft',"msg")dom.addEventListener("touchstart",function(e){//console.log(e)this.touchData.startX = e.touches[0].pageX;this.touchData.startY = e.touches[0].pageY})dom.addEventListener('touchmove',function(e){this.touchData.endX = e.touches[0].pageX;this.touchData.endY = e.touches[0].pageY;})dom.addEventListener("touchend",function(e){//console.log(e)var x = this.touchData.endX - this.touchData.startX;var y = this.touchData.endY - this.touchData.startYif( (Math.abs(x) > Math.abs(y)) && Math.abs(x)>100){if(x>0){//console.log('向右滑动')e.swiperDir =  'swiperRight'body.emit('swiperRight',e)}else{//console.log('向左滑动')e.swiperDir =  'swiperLeft'body.emit('swiperLeft',e)}}else if((Math.abs(x) < Math.abs(y)) && Math.abs(y)>100){if(y>0){//console.log('向下滑动')e.swiperDir =  'swiperBottom'body.emit('swiperBottom',e)}else{//console.log('向上滑动')e.swiperDir =  'swiperTop'body.emit('swiperTop',e)}}})},addEvent:function(eventName,callBackFn){if(this.eventAll[eventName]==undefined){this.eventAll[eventName] = []}this.eventAll[eventName].push(callBackFn)},emit:function(eventName,eventMsg){if(this.eventAll[eventName]!=undefined){this.eventAll[eventName].forEach(function(item,i){item(eventMsg)})}},removeEvent:function(eventName,callBackFn){var that  = thisthis.eventAll[eventName].forEach(function(item,i){if(item==callBackFn){that.eventAll[eventName].splice(i,1)}})},}

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><script src="js/js辅助式响应.js" type="text/javascript" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="css/style.css"/></head><body><!-- 1、贪吃蛇页面结构和样式2、能够绘制蛇3、能够绘制食物4、让蛇运动起来5、蛇能够吃食物6、蛇碰到自己就会失败--><div class="page startGame"><div class="startBtn">开始游戏</div></div><div class="page gaming"><div class="score"><div class="left">score:<span class="num">0</span></div><div class="pauseBtn">暂停</div></div><div class="mainGame"></div></div><div class="page endGame"><h1>您最终获取分数是<span class="num">0</span>分</h1><div class="reStartBtn">重新开始</div></div><script src="js/swiperEvent.js" type="text/javascript" charset="utf-8"></script><script src="js/index.js" type="text/javascript" charset="utf-8"></script></body>
</html>

结果：

javascript学习-贪吃蛇相关推荐

原生JavaScript抒写——贪吃蛇小游戏
原生JavaScript抒写--贪吃蛇小游戏文章目录原生JavaScript抒写--贪吃蛇小游戏前言一.需求分析二.效果展示三.具体逻辑代码分析 1.首先创建一个html文件,然后我们利用 ...
【无标题】学习贪吃蛇代码
学习贪吃蛇代码
用JavaScript实现贪吃蛇游戏_艾孜尔江撰
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>J ...
javascript写贪吃蛇
在简书上看到大白有褶子写的贪吃蛇,自己敲了一遍,用博客做个记录,以后再来看. <!DOCTYPE html> <html> <head><title>S ...
JavaScript写贪吃蛇游戏，代码思路都有，想学的自己看
JavaScript写一个贪吃蛇的游戏(附源码) javascript群内每日课题-今日课题:JavaScript写一个贪吃蛇的游戏 PS:最近群内很多伙伴想要做游戏学学,练练自己的JavaScrip ...
html+JavaScript 实现贪吃蛇程序
<!doctype html> <html> <head>  < ...
html5+JavaScript实现贪吃蛇游戏（可查看排行榜和个人历史记录）
先看结果截图(界面很丑,但是主要是为了贪吃蛇游戏算法设计和历史记录.排行榜功能的实现,希望以后不被产品经理打,哈哈) 功能描述: 1.开始游戏页面之前输入玩家姓名 2.历史记录:可以查看之前自己玩过的 ...
JavaScript实现贪吃蛇小游戏（网页单机版）
文章目录项目地址项目介绍游戏开始游戏暂停游戏模式游戏死亡重新开始结尾今天使用 JavaScript 实现了一个网页版的贪吃蛇小游戏. 项目地址 Github: https://git ...
基于单片机的贪吃蛇游戏设计_前端入门，基于html,css,javascript的贪吃蛇游戏
源代码: 贪吃蛇 .box1{ font-size: 15px; float:left; display: block; margin-right: 150px; } .box2{ font-size ...

javascript学习-贪吃蛇

javascript学习-贪吃蛇相关推荐

最新文章

热门文章