js编写“贪吃蛇”的小游戏
作者：bea
贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识： 1、JS函数的熟练掌握， 2、JS数组的应用， 3、JS小部分AJAX的学习 4、JS中的splice、shift等一些函数的应用， 基本上就这些吧，下面提重点部分： 前端的页面，这里可自行布局，我这边提供一个我自己的布局： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/
贪吃蛇儿时的回忆，今天刚好学习到这了，就刚好做了一个，也是学习了吧，需要掌握的知识：
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程序设计有所帮助。
有用 | 无用
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程序设计有所帮助。
有用 | 无用
猜你喜欢
您可能感兴趣的文章:
- javascript实现拖放效果
- js判断手机访问或者PC的几个例子(常用于手机跳转)
- Jquery插件easyUi实现表单验证示例
- 解决WordPress使用CDN后博文无法评论的错误
- JavaScript中Textarea滚动条不能拖动的解决方法
- jQuery进行组件开发完整实例
- JavaScript组件开发完整示例
- jQuery获取DOM节点实例分析(2种方式)
- JavaScript为事件句柄绑定监听函数实例详解
- JavaScript获取当前cpu使用率的方法
- js简单网速测试方法完整实例
- JQuery中Ajax()的data参数类型实例分析
- 理解javascript闭包
- jQuery检测滚动条是否到达底部
- js实现根据身份证号自动生成出生日期
- 浅析javascript的return语句
- 轻松学习Javascript闭包函数
- Javascript基于AJAX回调函数传递参数实例分析
- javascript实现html页面之间参数传递的四种方法实例分析