首页
所有分类
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 相关文章推荐
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
Struts2的s:radio标签使用及用jquery添加change事件
Apr 08 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
Sep 29 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
js实现的万能flv网页播放器代码
Apr 30 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
JavaScript实现简易的天数计算器实例【附demo源码下载】
Jan 18 Javascript
zTree树形菜单交互选项卡效果的实现方法
Dec 25 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
如何能分清npm cnpm npx nvm
Jan 17 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
JavaScript This指向问题详解
Nov 25 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
C/C++(1) python-pcl(1) 间隙锁(2) 历史记录(1) Anaconda(2) html标准库(1) 经纬度(1) innoDB(3) ctypes(1) dll(1)
You might like
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP字符串函数系列之nl2br()，在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
如何用PHP做到页面注册审核
2017/03/02 PHP
PHP实现PDO操作mysql存储过程示例
2019/02/13 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
2014/10/30 Javascript
js实现照片墙功能实例
2015/02/05 Javascript
jQuery层级选择器用法分析
2015/02/10 Javascript
javascript实现Email邮件显示与删除功能
2015/11/21 Javascript
初步使用bootstrap快速创建页面
2016/03/03 Javascript
js实现上一页下一页的效果【附代码】
2016/03/10 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
B/S(Web)实时通讯解决方案分享
2017/04/06 Javascript
给vue项目添加ESLint的详细步骤
2017/09/29 Javascript
JS实现简单的星期格式转换功能示例
2018/07/23 Javascript
全面解析vue router 基本使用(动态路由，嵌套路由)
2018/09/02 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
一个基于flask的web应用诞生 组织结构调整（7）
2017/04/11 Python
Python实现针对中文排序的方法
2017/05/09 Python
Python调用C# Com dll组件实战教程
2017/10/12 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
python 按钮点击关闭窗口的实现
2020/03/04 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
用Python实现童年贪吃蛇小游戏功能的实例代码
2020/12/07 Python
法拉利英国精品店：Ferraris Boutique UK
2019/07/20 全球购物
上海微创软件面试题
2012/06/14 面试题
食品安全工作实施方案
2014/03/26 职场文书
基层党员对照检查材料
2014/09/24 职场文书
什么是创业计划书？什么是商业计划书？这里一一解答
2019/07/12 职场文书
Python中super().__init__()测试以及理解
2021/12/06 Python
Nginx安装配置详解
2022/06/25 Servers