首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

js编写贪吃蛇的小游戏

Posted in Javascript onAugust 24, 2020

贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识：

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经典小游戏汇总

希望本文所述对大家学习javascript程序设计有所帮助。

js编写贪吃蛇的小游戏

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
可插入图片的TEXT文本框
Dec 27 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
Mar 18 Javascript
js实现超酷的照片墙展示效果图附源码下载
Oct 08 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
js Canvas实现的日历时钟案例分享
Dec 25 Javascript
angular实现form验证实例代码
Jan 17 Javascript
Angular将填入表单的数据渲染到表格的方法
Sep 22 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
Puppeteer 爬取动态生成的网页实战
Nov 14 Javascript
浅谈JavaScript中的“!!”作用
Aug 03 Javascript
Vue 3.0中jsx语法的使用
Nov 13 Javascript
javascript实现网页端解压并查看zip文件
Dec 15 #Javascript
探究JavaScript函数式编程的乐趣
Dec 14 #Javascript
jQuery+json实现的简易Ajax调用实例
Dec 14 #Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 #Javascript
JS实现DIV容器赋值的方法
Dec 14 #Javascript
JavaScript中eval()函数用法详解
Dec 14 #Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 #Javascript
连接查询(1) Dijkstra(1) element-ui(1) 动态代理(1) 模板引擎(1) 三角函数(1) Carbon(1) pongo2(1) 迪杰斯特拉(1) 优先队列(1)
You might like
基于python发送邮件的乱码问题的解决办法
2013/04/25 PHP
PHP处理SQL脚本文件导入到MySQL的代码实例
2014/03/17 PHP
php实现粘贴截图并完成上传功能
2015/05/17 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
浅析JS刷新框架中的其他页面 &amp;&amp; JS刷新窗口方法汇总
2013/07/08 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
Bootstrap入门书籍之（四）菜单、按钮及导航
2016/02/17 Javascript
jQuery使用正则表达式限制文本框只能输入数字
2016/06/18 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JavaScript中附件预览功能实现详解（推荐）
2017/08/15 Javascript
详解ES6 扩展运算符的使用与注意事项
2020/11/12 Javascript
[55:11]完美世界DOTA2联赛PWL S2 SZ vs LBZS 第一场 11.26
2020/11/30 DOTA
python实现登陆知乎获得个人收藏并保存为word文件
2015/03/16 Python
python获得两个数组交集、并集、差集的方法
2015/03/27 Python
Jupyter中直接显示Matplotlib的图形方法
2018/05/24 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python DataFrame 取差集实例
2019/01/30 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
python selenium 获取接口数据的实现
2020/12/07 Python
John Varvatos官方网站：设计师男士时装
2017/02/08 全球购物
Old Navy加拿大官网：美式休闲服饰品牌
2017/09/26 全球购物
台湾演唱会订票网站：StubHub台湾
2019/06/11 全球购物
行政经理的岗位职责
2013/11/23 职场文书
简历中个人自我评价范文
2013/12/26 职场文书
2014新年寄语
2014/01/20 职场文书
竞聘演讲稿
2014/04/24 职场文书
怀念母亲教学反思
2014/04/28 职场文书
中班上学期幼儿评语
2014/04/30 职场文书
初中教师业务学习材料
2014/05/12 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
医院科室评语
2015/01/04 职场文书
北京故宫的导游词
2015/01/31 职场文书
教师节座谈会主持词
2015/07/03 职场文书
小学运动会加油词
2015/07/18 职场文书
Python利用folium实现地图可视化
2021/05/23 Python
html,css,javascript是怎样变成页面的
2023/05/07 HTML / CSS