首页
所有分类
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 相关文章推荐
jquery左边浮动到一定位置时显示返回顶部按钮
Jun 05 Javascript
用Jquery选择器计算table中的某一列某一行的合计
Aug 13 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
jquery编写Tab选项卡滚动导航切换特效
Jul 17 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
BootStrap Table 设置height表头与内容无法对齐的问题
Dec 28 Javascript
Js实现中国公民身份证号码有效性验证实例代码
May 03 Javascript
vue父子组件的嵌套的示例代码
Sep 08 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
轻松解决JavaScript定时器越走越快的问题
May 13 Javascript
ES6中Promise的使用方法实例总结
Feb 18 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
求职信(1029) 思想汇报(404) 创业计划书(312) 岗位职责(1324) 心得体会(660) 自荐信(981) 职业生涯规划书(234) 推荐信(292) 自我鉴定(671) 自我评价(886)
You might like
smarty+adodb+部分自定义类的php开发模式
2006/12/31 PHP
PHP过滤★等特殊符号的正则
2014/01/27 PHP
PHP解析RSS的方法
2015/03/05 PHP
js 面向对象的技术创建高级 Web 应用程序
2010/02/25 Javascript
基于jquery的划词搜索实现（备忘）
2010/09/14 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
2013/04/02 Javascript
跟我学习javascript的严格模式
2015/11/16 Javascript
jQuery实现网页顶部固定导航效果代码
2015/12/24 Javascript
jQuery ajax提交Form表单实例(附demo源码)
2016/04/06 Javascript
JS小数运算出现多为小数问题的解决方法
2016/06/02 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
2016/10/14 Javascript
node.js Sequelize实现单实例字段或批量自增、自减
2016/12/08 Javascript
JavaScript中常见的八个陷阱总结
2017/06/28 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
基于vue实现滚动条滚动到指定位置对应位置数字进行tween特效
2019/04/18 Javascript
Vue.js 中的实用工具方法【推荐】
2019/07/04 Javascript
jQuery操作元素追加内容示例
2020/01/10 jQuery
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
Python松散正则表达式用法分析
2016/04/29 Python
对numpy 数组和矩阵的乘法的进一步理解
2018/04/04 Python
Django操作session 的方法
2020/03/09 Python
python利用蒙版抠图(使用PIL.Image和cv2)输出透明背景图
2020/08/04 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
英国IT硬件供应商，定制游戏PC：Mesh Computers
2019/03/28 全球购物
什么是Remote Module
2016/06/10 面试题
证婚人搞笑证婚词
2014/01/10 职场文书
暑期研修感言
2014/02/17 职场文书
师范教师专业大学生职业生涯规划范文
2014/03/02 职场文书
模具专业求职信
2014/06/26 职场文书
运动会演讲稿200字
2014/08/25 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
2015年建筑工程工作总结
2015/05/13 职场文书
党员理论学习心得体会
2016/01/21 职场文书
Python文件的操作示例的详细讲解
2021/04/08 Python
Redis分布式锁Redlock的实现
2021/08/07 Redis