首页
所有分类
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 相关文章推荐
javascript 闭包
Sep 15 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
May 11 Javascript
javascript操作select元素实例分析
Mar 27 Javascript
JavaScript计算某一天是星期几的方法
Aug 05 Javascript
node.js连接mongoDB数据库 快速搭建自己的web服务
Apr 17 Javascript
JavaScript中的工厂函数(推荐)
Mar 08 Javascript
js+html制作简单日历的方法
Jun 27 Javascript
让div运动起来 js实现缓动效果
Jul 06 Javascript
bootstrap-Treeview实现级联勾选
Nov 23 Javascript
Vue2.0 v-for filter列表过滤功能的实现
Sep 07 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
Vue Element-ui表单校验规则实现
Jul 09 Vue.js
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
uniapp(4) element-china-area-data(1) Flutter(2) Apache(17) Navigator(1) capture(1) SpringBoot(22) tabBar(1) self(1) 数据重复(1)
You might like
新版mysql+apache+php Linux安装指南
2006/10/09 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
PHP在同一域名下两个不同的项目做独立登录机制详解
2017/09/22 PHP
可兼容php5与php7的cURL文件上传功能实例分析
2018/05/11 PHP
更换select下拉菜单背景样式的实现代码
2011/12/20 Javascript
文本框input聚焦失焦样式实现代码
2012/10/12 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
A标签中通过href和onclick传递的this对象实现思路
2013/04/19 Javascript
JavaScript中圆括号()和方括号[]的特殊用法疑问解答
2013/08/06 Javascript
实现51Map地图接口(示例代码)
2013/11/22 Javascript
js获取所有checkbox的值的简单实例
2016/05/30 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
2017/06/19 Javascript
Express + Node.js实现登录拦截器的实例代码
2017/07/01 Javascript
AngularJS实时获取并显示密码的方法
2018/02/06 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
vue3.0 上手体验
2020/09/21 Javascript
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
django基础之数据库操作方法(详解)
2017/05/24 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python格式化日期时间操作示例
2018/06/28 Python
python正则表达式之对号入座篇
2018/07/24 Python
Python切片操作深入详解
2018/07/27 Python
浅谈pyqt5在QMainWindow中布局的问题
2019/06/21 Python
python数据归一化及三种方法详解
2019/08/06 Python
python中wheel的用法整理
2020/06/15 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
CSS3中设置3D变形的transform-style属性详解
2016/05/23 HTML / CSS
英国旅行箱包和行李箱购物网站：Travel Luggage & Cabin Bags
2019/08/26 全球购物
NYX Professional Makeup英国官网：美国平价专业彩妆品牌
2019/11/13 全球购物
nohup的用法
2012/11/26 面试题
编辑找工作求职信范文
2013/12/16 职场文书
档案检查欢迎词
2014/01/13 职场文书
入学生会自荐书范文
2014/02/05 职场文书
重阳节座谈会主持词
2015/07/03 职场文书
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android