再读《悟透javascript》之四、贪吃蛇

最新推荐文章于 2022-11-16 19:54:45 发布

soldierluo

最新推荐文章于 2022-11-16 19:54:45 发布

阅读量908

点赞数

分类专栏： js与用户体验文章标签： javascript function input server div up

本文链接：https://blog.csdn.net/soldierluo/article/details/5711729

版权

js与用户体验专栏收录该内容

40 篇文章 0 订阅

订阅专栏

前言

贪吃蛇是个很简单的小游戏，但是却很有趣，下面是我用JavaScript写的一个贪吃蛇的代码：

代码如下：

function createCell(x, y){ //创建单元格

var newDiv = document.createElement("div");

newDiv.style.position = "absolute";

newDiv.style.width = cellWidth + "px";

newDiv.style.height = cellWidth + "px";

newDiv.style.background = "#999933";

newDiv.style.border = "solid 1px #666633";

newDiv.style.top = 100 + cellWidth*y + "px";

newDiv.style.left = document.body.clientWidth/2 - boardWidth/2*cellWidth + x*cellWidth + "px";

document.getElementById("content").appendChild(newDiv);

return newDiv;

}

function productFood(){ //随机产生食物

var foodX = Math.round(Math.random()*(boardWidth-1));

var foodY = Math.round(Math.random()*(boardWidth-1));

for(var i=0; i<snake.body.length; i++){

if(snake.body[i].x==foodX && snake.body[i].y==foodY){

productFood();

return;

}

board[foodX][foodY].style.background = "#333300";

board[foodX][foodY].isFood = true;

}

function move(){ //移动——计算下一步的显示区域

var newX, newY;

newX = newY = 0;

switch(snake.way){

case "right" : newX = snake.body[0].x < boardWidth-1 ? snake.body[0].x+1 : 0;

newY = snake.body[0].y;

setStyle();

break;

case "left" : newX = snake.body[0].x > 0 ? snake.body[0].x-1 : boardWidth-1;

newY = snake.body[0].y;

setStyle();

break;

case "up" : newX = snake.body[0].x;

newY = snake.body[0].y > 0 ? snake.body[0].y-1 : boardWidth-1;

setStyle();

break;

case "down" : newX = snake.body[0].x;

newY = snake.body[0].y < boardWidth-1 ? snake.body[0].y+1 : 0;

setStyle();

break;

}

function setStyle(){ //闭包

for(var i=0; i<snake.body.length; i++){

if(snake.body[i].x==newX && snake.body[i].y==newY){

clearInterval(loop);

alert("游戏结束，你吃掉了自己的身体");

return;

}

snake.body.splice(0,0,{x:newX, y:newY});

board[newX][newY].style.background = "#333300";

if(board[newX][newY].isFood){

board[newX][newY].isFood = false;

productFood();

}

else{

var cell = snake.body.pop();

board[cell.x][cell.y].style.background = "#999933";

}

function changeBoard(val){ //更改区域设置

document.body.focus();

board = null;

boardWidth = val;

snake.body = [{x:0, y:0}];

snake.way = "left";

clearInterval(loop);

main();

}

function changeSpeed(val){ //更改速度设置

document.body.focus();

board = null;

snake.moveSpeed = val;

snake.body = [{x:0, y:0}];

snake.way = "left";

clearInterval(loop);

main();

}

var cellWidth = 13; //单元格宽度高度

var boardWidth = 20; //区域宽度高度

var board; //区域

var snake = { //蛇

body:[{x:0, y:0}],

way:"left",

moveSpeed:500

};

var loop; //循环

function main(){

//清空body

if(document.getElementById("content")){

document.getElementById("content").innerHTML = "";

}

else{

var newDiv = document.createElement("div");

newDiv.id = "content";

document.body.appendChild(newDiv);

}

//画盘

board = new Array(boardWidth);

for(var x=0; x<boardWidth; x++){

board[x] = new Array(boardWidth);

for(var y=0; y<boardWidth; y++){

(function(){

var _x = x;

var _y = y;

setTimeout(function(){

board[_x][_y] = createCell(_x, _y);

}, _x*69);

})();

}

//捕获方向键

document.body.onkeydown = function(){

var oldWay = snake.way;

switch(event.keyCode){

case 38 : snake.way = (snake.way=="left" || snake.way=="right") ? "up" : snake.way; break;

case 40 : snake.way = (snake.way=="left" || snake.way=="right") ? "down" : snake.way; break;

case 37 : snake.way = (snake.way=="up" || snake.way=="down") ? "left" : snake.way; break;

case 39 : snake.way = (snake.way=="up" || snake.way=="down") ? "right" : snake.way; break;

}

if(oldWay != snake.way) move();

}

//延迟开始，等待加载

setTimeout(function(){

productFood();

loop = setInterval(function(){

move();

}, snake.moveSpeed);

}, boardWidth*100);

}

window.onload = main;

</script>

</head>

<body>

20*20：<input id="Radio1" name="boardOnly" onclick="changeBoard(20)" checked="checked" type="radio" /><br />

30*30：<input id="Radio2" name="boardOnly" onclick="changeBoard(30)" type="radio" /><br />

拖拉机司机：<input id="Radio4" name="speedOnly" onclick="changeSpeed(300)" checked="checked" type="radio" /><br />

汽车司机：<input id="Radio5" name="speedOnly" onclick="changeSpeed(200)" type="radio" /><br />

火车司机：<input id="Radio6" name="speedOnly" onclick="changeSpeed(100)" type="radio" /><br />

飞机司机：<input id="Radio7" name="speedOnly" onclick="changeSpeed(30)" type="radio" /><br />

飞船司机：<input id="Radio8" name="speedOnly" onclick="changeSpeed(10)" type="radio" /><br />

</div>

</form>

</body>

</html>

soldierluo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
再读《悟透javascript》之四、贪吃蛇

前言贪吃蛇是个很简单的小游戏，但是却很有趣，下面是我用JavaScript写的一个贪吃蛇的代码：代码如下：htmlxmlns="http://www.w3.org/1999/xhtml">贪吃蛇 function createCell(x, y){ //创建单元格 var newDiv = document.createElement("div"); newDiv.style.position = "absolute"; newDiv.s
复制链接

扫一扫