首页 > 代码库 > 做一个简单的贪吃蛇游戏
做一个简单的贪吃蛇游戏
这是一个贪吃蛇游戏,你可以忽略他的外表,好了,先上html代码
<style type="text/css"> * {margin: 0;padding: 0;} #container {width: 1000px;height: 550px;border: 1px solid #000;margin: 0 auto;} #container #ground {width: 1000px;height: 500px;background-color:#eeeeee;position: relative;} button {width: 80px;height: 30px;} .block {width: 20px;height: 20px;background-color: paleturquoise;float: left;} .snakeBody { width: 20px;height: 20px;box-sizing: border-box;padding: 1px; background-color: yellow;position: absolute;top: 60px; -webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px; } .snake-block { background: yellow;position: absolute; -webkit-border-radius: 7px;-moz-border-radius: 7px;border-radius: 7px; } .food-block { background: red;position: absolute; -webkit-border-radius: 12px;-moz-border-radius: 12px;border-radius: 12px; } </style> <div id="container"> <div id="ground"></div> <div id="gameControl"> <span>获得分数:<span id="nums">0</span></span> <button id="start">开始</button> <button id="pause">暂停</button> </div> </div>
接下来是js代码
//草坪盒子 var oGround = getId("ground"); //创建蛇--- var snakeBody = new Array(); //创建食物并放置在草坪区 var food = createFood(); //蛇移动direction方向 默认情况下向右移动 var direction = "right"; //游戏开始按钮 var oBtnStart = getId("start"); //定时器 var timer = null; //暂停键 var oPause =getId("pause"); var num = getId("nums"); function getId(n){ return document.getElementById(n) } //创建草坪由50*25个小格组成 for(var i = 0; i < 50; i++) { for(var j = 0; j < 25; j++) { var oDiv = document.createElement("div"); oDiv.className = "block"; oGround.appendChild(oDiv); } } //初始状态为3节 蛇身数组 确保snakeBody[0]为蛇头 for(var i = 3; i > 0; i--) { var oDiv = document.createElement("div"); oDiv.className = "block snakeBody"; oDiv.style.left = i * 20 + "px"; //蛇头 if(i == 3) { oDiv.style.backgroundColor = "blueviolet"; } oGround.appendChild(oDiv); //向蛇身数组添加蛇身 snakeBody.push(oDiv); } oBtnStart.onclick = function() { clearInterval(timer); //每隔300毫秒就移动一个格子 1000毫秒=1秒 timer = setInterval(function() { move(direction); num.innerHTML = snakeBody.length -3; }, 300); } oPause.onclick = function() { clearInterval(timer); } //控制蛇转向 document.onkeydown = function(e) { e = e || window.event; var keyCode = e.which || e.keyCode; //键码 switch(keyCode) { //左 case 37: if(direction != ‘right‘) { direction = ‘left‘; move(direction); } break; //上 case 38: if(direction != ‘down‘) { direction = ‘up‘; move(direction); } break; //右 case 39: if(direction != ‘left‘) { direction = ‘right‘; move(direction); } break; //下 case 40: if(direction != ‘up‘) { direction = ‘down‘; move(direction); } break; } }; //蛇移动的方法 function move(dir) { //取出蛇头 var snakeHead = snakeBody[0]; //snakeBody.length 3 个数从右向左数 for(var i = snakeBody.length - 1; i > 0; i--) { snakeBody[i].style.left = snakeBody[i - 1].offsetLeft + "px"; snakeBody[i].style.top = snakeBody[i - 1].offsetTop + "px"; } switch(dir) { case "left": snakeHead.style.left = snakeHead.offsetLeft - 20 + "px"; break; case "up": snakeHead.style.top = snakeHead.offsetTop - 20 + "px"; break; case "right": snakeHead.style.left = snakeHead.offsetLeft + 20 + "px"; break; case "down": snakeHead.style.top = snakeHead.offsetTop + 20 + "px"; break; } //判断蛇是否吃到墙 if(snakeHead.offsetLeft == -20 || snakeHead.offsetTop == -20 || snakeHead.offsetLeft == 1000 || snakeHead.offsetTop == 500) { alert("撞墙了吧~"); clearInterval(timer); //页面保持刷新 location.reload(); } //如果蛇吃身体 for(var i = 1; i < snakeBody.length; i++) { if(snakeHead.offsetLeft == snakeBody[i].offsetLeft && snakeHead.offsetTop == snakeBody[i].offsetTop) { alert("连自己都吃,还能不能好好做条蛇"); clearInterval(timer); } } //如果蛇吃食物 if(snakeHead.offsetLeft == food.offsetLeft && snakeHead.offsetTop == food.offsetTop) { food.className = "block snake-block"; switch("direction") { case "right": food.style.left = snakeBody[snakeBody.length - 1].offsetLeft - 20 + "px"; break; case "down": food.style.top = snakeBody[snakeBody.length - 1].offsetTop - 20 + "px"; break; case "left": food.style.left = snakeBody[snakeBody.length - 1].offsetLeft + 20 + "px"; break; case "up": food.style.top = snakeBody[snakeBody.length - 1].offsetTop + 20 + "px"; break; } //蛇吃到食物 snakeBody.push(food); //重新生成食物 food = createFood(); } } //生成食物 function createFood() { var oFood = document.createElement("div"); oFood.className = "block food-block"; var iLeft = 0; var iTop = 0; do { //一个标识,表示是否找到食物合适的位置 var bFound = true; //在0~1000中取一个随机的整数 iLeft = Math.floor(Math.random() * 1000); //随机产生食物的位置 让食物的x坐标为20的倍数,因为草坪是20像素为一格 iLeft = iLeft - iLeft % 20; iTop = Math.floor(Math.random() * 500); iTop = iTop - iTop % 20; for(var i = 0; i < snakeBody.length; i++) { //判断食物的那个格子是否与蛇身占有的格子重合 if(snakeBody[i].offsetLeft == iLeft && snakeBody[i].offsetTop == iTop) {
//表示食物与蛇身重合 bFound = false; break; } } oFood.style.left = iLeft + "px"; oFood.style.top = iTop + "px"; oGround.appendChild(oFood); } while (!bFound); return oFood; }
大致是这样吧,后续还待改善,要直接看到实例的效果,你可以狠狠的点击这里
做一个简单的贪吃蛇游戏
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。