首页
所有分类
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 相关文章推荐
点弹代码 点击页面任何位置都可以弹出页面效果代码
Sep 17 Javascript
jQuery中(function(){})()执行顺序的理解
Mar 05 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
Jul 22 Javascript
js实现带有动画的返回顶部
Aug 09 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
Vue实现菜单切换功能
Nov 08 Javascript
使用AutoJs实现微信抢红包的代码
Dec 31 Javascript
Ajax常用封装库——Axios的使用
May 08 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) 无线电(12) 收音机(62) 广播(8) 中学科技(1) 下载(1) 电台频率(32) 短波(8) 保养(1) 长波(3)
You might like
php UTF8 文件的签名问题
2009/10/30 PHP
浅析linux下apache服务器的配置和管理
2013/08/10 PHP
PHP实现视频文件上传完整实例
2014/08/28 PHP
培养自己的php编码规范
2015/09/28 PHP
制作个性化的WordPress登陆界面的实例教程
2016/05/21 PHP
php mongodb操作类 带几个简单的例子
2016/08/25 PHP
PHP实现递归的三种方法
2020/07/04 PHP
PHP网站常见安全漏洞，及相应防范措施总结
2021/03/01 PHP
jquery 页面全选框实践代码
2010/04/02 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
javascript中的继承实例代码
2011/04/27 Javascript
精心挑选的15个jQuery下拉菜单制作教程
2012/06/15 Javascript
JavaScript高级程序设计 阅读笔记（十二） js内置对象Math
2012/08/14 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
javascript 3d 逐侦产品展示(核心精简)
2014/03/26 Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
2015/09/19 Javascript
jQuery通过写入cookie实现更换网页背景的方法
2016/04/15 Javascript
快速解决jquery.touchSwipe左右滑动和垂直滚动条冲突
2016/04/15 Javascript
基于Bootstrap的后台管理面板 Bootstrap Metro Dashboard
2016/06/17 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
vue-hook-form使用详解
2017/04/07 Javascript
jquery 校验中国身份证号码实例详解
2017/04/11 jQuery
JavaScript数据结构之二叉树的删除算法示例
2017/04/13 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
vue中,在本地缓存中读写数据的方法
2018/09/21 Javascript
在vue中使用express-mock搭建mock服务的方法
2018/11/07 Javascript
基于vue实现一个神奇的动态按钮效果
2019/05/15 Javascript
Python实现两个list求交集，并集，差集的方法示例
2018/08/02 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
解决python文件双击运行秒退的问题
2019/06/24 Python
Python JSON编解码方式原理详解
2020/01/20 Python
Python字符串split及rsplit方法原理详解
2020/06/29 Python
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
HTML5+CSS3实现拖放(Drag and Drop)示例
2014/07/07 HTML / CSS
班级文化建设标语
2014/06/23 职场文书
安全责任协议书范本
2016/03/23 职场文书