js编写“贪吃蛇”的小游戏_javascript技巧
程序员文章站
2022-03-18 08:09:17
...
贪吃蛇儿时的回忆,今天刚好学习到这了,就刚好做了一个,也是学习了吧,需要掌握的知识:
');
home.append(snakeDiv);
snakeArr[i] = {r : 10, c : 10 + i, div : snakeDiv, d : direcation};
setPosition(snakeArr[i]);
}
1、JS函数的熟练掌握,
2、JS数组的应用,
3、JS小部分AJAX的学习
4、JS中的splice、shift等一些函数的应用,
基本上就这些吧,下面提重点部分:
前端的页面,这里可自行布局,我这边提供一个我自己的布局:
贪吃蛇
这里是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
上一篇: java中num是什么意思
下一篇: php编程需要用锁吗
推荐阅读
-
详解在Vue.js编写更好的v-for循环的6种技巧
-
javascript简写常用的12个技巧(可以大大减少你的js代码量)
-
用js编写简单的贪吃蛇小游戏
-
20行js代码实现的贪吃蛇小游戏
-
js对数字的格式化使用说明_javascript技巧
-
让textarea自动调整大小的js代码_javascript技巧
-
奉献给JavaScript初学者的编写开发的七个细节_javascript技巧
-
从盛大通行证上摘下来的身份证验证js代码_javascript技巧
-
js removeChild 障眼法 可能出现的错误_javascript技巧
-
Js数组的操作push,pop,shift,unshift等方法详细介绍_javascript技巧