js编写“贪吃蛇”的小游戏
更新时间:2015年12月17日 10:01 点击:1831
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识:
1、JS函数的熟练掌握,
2、JS数组的应用,
3、JS小部分AJAX的学习
4、JS中的splice、shift等一些函数的应用,
基本上就这些吧,下面提重点部分:
前端的页面,这里可自行布局,我这边提供一个我自己的布局:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <title>贪吃蛇</title> <link rel="stylesheet" type="text/css" href="./css.css"> <script type="text/javascript" src="./jquery-1.7.2.min.js"></script> <script type="text/javascript" src="./js.js"></script> </head> <body> <div id="info"> <div id="score">0</div> <form action="" id="form" name="form"> <input type="radio" name='time' value="500" checked='checked'/>简单 <input type="radio" name='time' value="300"/>中等 <input type="radio" name='time' value="150"/>高级 <input type="radio" name='time' value="50"/>神速 <input type="button" value="开始" class="button" id="start"/> <input type="button" value="重玩" class="button" id="res"/> </form> </div> <div id="main"> <div id="home"> <!--<div style="background:url(./images/snake0.png) no-repeat;"></div> <div style="background:url(./images/snake1.png) no-repeat; left:20px;"></div> <div style="background:url(./images/snake2.png) no-repeat; left:40px;"></div> <div style="background:url(./images/snake3.png) no-repeat; left:60px;"></div>--> </div> <div class="wall left"></div> <div class="wall right"></div> <div class="wall top"></div> <div class="wall bottom"></div> </div> </body> </html>
这里是css代码:
*{padding: 0px; margin: 0px;font-size: 12px} body{background: #ccc} input.button{ width: 60px; cursor: pointer; } #info{ width: 540px; height: 30px; margin: 30px auto 5px; line-height: 30px; } #score{ width: 73px; height: 28px; padding-left: 64px; background: url(./images/score.png) no-repeat; float: left; font-size: 14px; font-weight: 700; font-style:italic; font-family: '微软雅黑'; } #form{ float: right; } #form input{ vertical-align: middle; margin-right: 5px; } #main{ width: 540px; height: 500px; margin: 0 auto; position: relative; /*background: #71a000*/ } #main div{ width: 20px; height: 20px; position: absolute; } #main #home{ width: 500px; height: 460px; left: 20px; top: 20px; position: relative; background: url(./images/background.jpg) no-repeat; } #main #home div{ position: absolute; } #main div.wall{ width: 540px; height: 20px; background: url("./images/div.jpg") repeat-x; position: absolute; } #main div.top{ left:0px; top:0px; } #main div.bottom{ left:0px; top:480px; } #main div.left{ width: 20px; height: 500px; background: url(./images/div.jpg) repeat-y; left:0px; top:0px; } #main div.right{ width: 20px; height: 500px; background: url(./images/div.jpg) repeat-y; left:520px; top:0px; } .l{ -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -webkit-transform:rotate(0deg); transform:rotate(0deg); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=1, M12=0, M21=0, M22=1, SizingMethod='auto expand'); } .t{ -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -webkit-transform: rotate(90deg); transform: rotate(90deg); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=-1.8369701987210297e-16, M12=-1, M21=1, M22=-1.8369701987210297e-16, SizingMethod='auto expand'); } .r{ -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -webkit-transform: rotate(180deg); transform: rotate(180deg); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=-1, M12=1.2246467991473532e-16, M21=-1.2246467991473532e-16, M22=-1, SizingMethod='auto expand'); } .b{ -moz-transform: rotate(270deg); -o-transform: rotate(270deg); -webkit-transform: rotate(270deg); transform: rotate(270deg); /* IE8+ - must be on one line, unfortunately */ -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand')"; /* IE6 and 7 */ filter: progid:DXImageTransform.Microsoft.Matrix( M11=6.123233995736766e-17, M12=1, M21=-1, M22=6.123233995736766e-17, SizingMethod='auto expand'); }
JS公共文件
var home = $('#home'); var snakeArr = []; var direcation = 'l'; var speed = 0; var timer = ''; //460/20 var rows = 23; var cols = 25; var die = false; //用于判断是否game over var food = []; var sorce = 0; //得分的显示
首先要想有snake就必须创造snake,
for( var i=0; i<4; i++ ){ //var snakeDiv = document.createElement("div"); //snakeDiv.style = 'background:url(./images/snake' + i + '.png) no-repeat;'; var snakeDiv = $('<div style="background:url(./images/snake' + i + '.png) no-repeat;z-index:999"></div>'); home.append(snakeDiv); snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation}; setPosition(snakeArr[i]); }
有snake之后,自然就是移动了(move):
function move(){ var timer = setInterval(function(){ for( var i=snakeArr.length -1; i>0; i-- ){ snakeArr[i].c = snakeArr[i-1].c; snakeArr[i].r = snakeArr[i-1].r; snakeArr[i].d = snakeArr[i-1].d; } switch(direcation){ case 'l' : snakeArr[0].c--; snakeArr[0].d = 'l'; break; case 'r' : snakeArr[0].c++; snakeArr[0].d = 'r'; break; case 't' : snakeArr[0].r--; snakeArr[0].d = 't'; break; case 'b' : snakeArr[0].r++; snakeArr[0].d = 'b'; break; } //snake的方向控制 $(window).keydown(function(event){ switch(event.keyCode){ case 37 : direcation = 'l'; break; case 38 : direcation = 't'; break; case 39 : direcation = 'r'; break; case 40 : direcation = 'b'; break; } }); //snake事故 //1. snake撞墙 if( snakeArr[0].c < 0 || snakeArr[0].r < 0 || snakeArr[0].c >= cols || snakeArr[0].r >= rows ){ clearInterval(timer); die = true; alert('GAME OVER'); } //2. snake撞到自己 for( var i=1; i<snakeArr.length; i++ ){ if( snakeArr[0].c == snakeArr[i].c && snakeArr[0].r == snakeArr[i].r ){ clearInterval(timer); die = true; alert('GAME OVER'); } } //snake吃水果 if( snakeArr[0].c == food[0].c && snakeArr[0].r == food[0].r ){ food[0].div.css({background : 'url(./images/snake2.png) no-repeat'}); snakeArr.splice(snakeArr.length - 1, 0, food[0]); food.shift(); sorce += 10; $('#score').html(sorce); } //snake产生水果 if( food.length == 0 ){ createFood(); } for(var i = 0; i < snakeArr.length; i++){ setPosition(snakeArr[i]); } },speed); }
食物的产生:
function createFood(){ var r = parseInt(rows * Math.random()); var c = parseInt(cols * Math.random()); var casrsh = false; //2个水果出现的位置不能一样 while( food.length == 0 ){ //判断snake的位置,不能与snake相撞 for( var i = 0; i < snakeArr.length; i++ ){ if( r == snakeArr[i].r && c == snakeArr[i].c ){ casrsh = true; } } //当位置不重叠的时候,产生水果 if( !casrsh ){ var i = parseInt(4 * Math.random()); var foodDiv = $('<div style="background:url(./images/fruit'+ i +'.png);"></div>'); home.append(foodDiv); food.push({r : r, c : c, div : foodDiv}); setPosition(food[0]); } } }
还有一个重要的功能就是重新设置定位:
function setPosition(obj){ obj.div.css({left : obj.c * 20, top : obj.r * 20}); obj.div.removeClass().addClass(obj.d); } createFood(); //那页面一被加载出来就显示出食物!
希望本文所述对大家学习javascript程序设计有所帮助。
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这篇文章主要介绍了node.js如何操作MySQL数据库,帮助大家更好的进行web开发,感兴趣的朋友可以了解下...2020-10-29
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20