juery实现贪吃蛇的游戏
今天用juery做了一个贪吃蛇的游戏，代码比较简陋，不过作为这些天学习juery的成果，非常有成就感。另外关于代码内容如有雷同不胜荣幸。
更改了下 让头和身子的颜色不一样 这样好区分些，虽然还是不怎么好看
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
#all_show{
text-align: center;
margin:0 auto;
width: 1200px;
height: 100%;
}
#top{
width:100%
}
.c_blue{
background-color: blue;
}
.c_red{
background-color: red;
}
.c_black{
background-color: #000000;
}
#content td{
width:5px;
height: 5px;
}
#content{
margin-top: 50px;;
borderr-color:green;
width:100%;
}
</style>
<script type="text/javascript">
var r_tr=$("<tr>");
var r_td = $("<td>");
var all_ele = new Array();
var start_ele;
var last_key_val=3;
var key_val=3;
var cols = 0;
var tcs_time=1000;
var tcs_mov_con;
//正常前进事件 nele 为新的元素
function normal_t(nele ,flag){
if(!flag){
$(all_ele[all_ele.length-1]).removeClass();
all_ele.pop();
}
nele.removeClass()
all_ele.reverse()
all_ele.push(nele)
nele.addClass("c_red")
//nele.addClass("c_blue")
//为开始的元素赋值
start_ele =nele
all_ele.reverse();
if(all_ele.length > 1){
all_ele[1].removeClass();
all_ele[1].addClass("c_blue");
}
if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){
build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black");
} }
//放入一个juery对象随机返回一个juery对象
function build_tag(source){
return $(source).eq(parseInt(Math.random()*($(source).size())));
}
//动起来根据key_val 选择下一个元素
function tcs_next_ele(next_val){
if(next_val == 1){
return $(start_ele).prev();
}else if(next_val == 2){
return $("#"+(parseInt($(start_ele).prop("id"))-cols))
}else if(next_val == 3){
return $(start_ele).next();
}else if(next_val == 4){
return $("#"+(parseInt($(start_ele).prop("id"))+cols))
}
}
//对取到的值验证
function tcs_check_ele(keyvalue){
var next_ele = tcs_next_ele(keyvalue)
if($(next_ele).prop("id") == undefined ){
return false
}else{
if($(next_ele).hasClass("c_black")){
normal_t($(next_ele),true)
}else if($(next_ele).hasClass("c_blue")){
//当回头时 让他继续往前
if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){
key_val=last_key_val;
if(keyvalue == last_key_val){
return false;
}else {
return tcs_check_ele(last_key_val)
}
}else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){
return false
}
normal_t($(next_ele),false)
}else{
normal_t($(next_ele),false)
}
}
return true;
}
//执行 游戏入口
function tcs_move(){
if(!tcs_check_ele(key_val)){
alert("游戏结束")
return ;
}
tcs_mov_con =setTimeout("tcs_move()",tcs_time)
}
$(function(){
//初始化
function tcs_init(){
all_ele.length=0;
start_ele = undefined;
//初始化表格
if($("#top #time").val() != "")
tcs_time = $("#top #time").val();
$("#tcs>tbody td").removeClass()
}
//开始前准备
function tcs_start_init(){
var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2);
start_ele = $("#"+start_id.toString())
start_ele.addClass("c_red")
all_ele.push(start_ele)
build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
}
$("#top :button:eq(0)").click(function () {
$("#tcs>tbody").empty()
tcs_init()
b_r = $("#top #rows").val();
b_c = $("#top #cols").val();
cols = parseInt(b_c);
//生成表单
var num = 1;
for(var i = 0; i < b_r ; i ++ ){
var btr = r_tr.clone();
for(var j = 0 ; j < b_c ; j ++ ){
var btd = r_td.clone();
btd.prop("id",num);
btd.appendTo(btr);
num++
}
btr.appendTo($("#tcs>tbody"))
}
//生成起点
})
$("#top :button:eq(1)").click(function(){
//动起来
if($(this).val()=="开始游戏"){
tcs_init()
tcs_start_init()
tcs_move()
$(this).val("重新开始")
}else{
if(tcs_mov_con != undefined){
clearTimeout(tcs_mov_con)
}
tcs_init()
$(this).val("开始游戏")
}
})
$(document).keydown(function (event){
var ab = event.keyCode-36
if(ab < 5 && ab > 0){
if(key_val != ab){
last_key_val = key_val;
key_val=parseInt(ab);
}
}
})
})
</script>
</head>
<body>
<div id="all_show">
<div id = "top" >
<table >
<tr>
<td>行数：</td>
<td><input id="rows" type="text"></td>
<td>列数：</td>
<td><input id="cols" type="text"></td>
<td>时间：</td>
<td><input id="time" type="text"></td>
</tr>
<tr>
<td><input type="button" value="生成表格"></td>
<td><input type="button" value="开始游戏"></td>
</tr>
</table>
</div> <div id="content">
<table id="tcs" border="1px"cellspacing="1" cellpadding="1">
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
修改了下让它可以在碰壁后从另一侧出来
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<style type="text/css">
#all_show{
text-align: center;
margin:0 auto;
width: 1200px;
height: 100%;
}
#top{
width:100%
}
.c_blue{
background-color: blue;
}
.c_red{
background-color: red;
}
.c_black{
background-color: #000000;
}
#content td{
width:5px;
height: 5px;
}
#content{
margin-top: 50px;;
borderr-color:green;
width:100%;
}
</style>
<script type="text/javascript">
var r_tr=$("<tr>");
var r_td = $("<td>");
var all_ele = new Array();
var start_ele;
var last_key_val=3;
var key_val=3;
var cols = 0;
var tcs_time=1000;
var tcs_mov_con;
var b_c
var b_r
//正常前进事件 nele 为新的元素
function normal_t(nele ,flag){
if(!flag){
$(all_ele[all_ele.length-1]).removeClass();
all_ele.pop();
}
nele.removeClass()
all_ele.reverse()
all_ele.push(nele)
nele.addClass("c_red")
//nele.addClass("c_blue")
//为开始的元素赋值
start_ele =nele
all_ele.reverse();
if(all_ele.length > 1){
all_ele[1].removeClass();
all_ele[1].addClass("c_blue");
}
if($("#tcs>tbody tr").find("td[class*=c_black]").size()==0){
build_tag($("#tcs>tbody td").not("td[class*=c_]")).addClass("c_black");
} }
//放入一个juery对象随机返回一个juery对象
function build_tag(source){
return $(source).eq(parseInt(Math.random()*($(source).size())));
}
//动起来根据key_val 选择下一个元素
function tcs_next_ele(next_val){
if(next_val == 1){
//判断是否到头了
if($(start_ele).prev().prop("id") == undefined){
return $(start_ele).parent().find("td:last-child");
}
return $(start_ele).prev();
}else if(next_val == 2){
if( $("#"+(parseInt($(start_ele).prop("id"))-cols)).prop("id") == undefined){
return $("#"+(parseInt($(start_ele).prop("id"))+((b_r-1)*b_c)));
}
return $("#"+(parseInt($(start_ele).prop("id"))-cols))
}else if(next_val == 3){
if($(start_ele).next().prop("id") == undefined){
return $(start_ele).parent().find("td:first-child")
}
return $(start_ele).next();
}else if(next_val == 4){
if($("#"+(parseInt($(start_ele).prop("id"))+cols)).prop("id") == undefined){
return $("#"+(parseInt($(start_ele).prop("id"))-((b_r-1)*b_c)));
}
return $("#"+(parseInt($(start_ele).prop("id"))+cols))
}
}
//对取到的值验证
function tcs_check_ele(keyvalue){
var next_ele = tcs_next_ele(keyvalue)
if($(next_ele).prop("id") == undefined ){
return false
}else{
if($(next_ele).hasClass("c_black")){
normal_t($(next_ele),true)
}else if($(next_ele).hasClass("c_blue")){
//当回头时 让他继续往前
if($(next_ele).prop("id") == $(all_ele[1]).prop("id")){
key_val=last_key_val;
if(keyvalue == last_key_val){
return false;
}else {
return tcs_check_ele(last_key_val)
}
}else if($(next_ele).prop("id") != $(all_ele[all_ele.length-1]).prop("id")){
return false
}
normal_t($(next_ele),false)
}else{
normal_t($(next_ele),false)
}
}
return true;
}
//执行 游戏入口
function tcs_move(){
if(!tcs_check_ele(key_val)){
alert("游戏结束")
return ;
}
tcs_mov_con =setTimeout("tcs_move()",tcs_time)
}
$(function(){
//初始化
function tcs_init(){
all_ele.length=0;
start_ele = undefined;
//初始化表格
if($("#top #time").val() != "")
tcs_time = $("#top #time").val();
$("#tcs>tbody td").removeClass()
}
//开始前准备
function tcs_start_init(){
var start_id = parseInt((b_r)/2)*b_c+parseInt(b_c/2);
start_ele = $("#"+start_id.toString())
start_ele.addClass("c_red")
all_ele.push(start_ele)
build_tag($("#tcs>tbody td").not("td[class]")).addClass("c_black");
}
$("#top :button:eq(0)").click(function () {
$("#tcs>tbody").empty()
tcs_init()
b_r = $("#top #rows").val();
b_c = $("#top #cols").val();
cols = parseInt(b_c);
//生成表单
var num = 1;
for(var i = 0; i < b_r ; i ++ ){
var btr = r_tr.clone();
for(var j = 0 ; j < b_c ; j ++ ){
var btd = r_td.clone();
btd.prop("id",num);
btd.appendTo(btr);
num++
}
btr.appendTo($("#tcs>tbody"))
}
//生成起点
})
$("#top :button:eq(1)").click(function(){
//动起来
if($(this).val()=="开始游戏"){
tcs_init()
tcs_start_init()
tcs_move()
$(this).val("重新开始")
}else{
if(tcs_mov_con != undefined){
clearTimeout(tcs_mov_con)
}
tcs_init()
$(this).val("开始游戏")
}
})
$(document).keydown(function (event){
var ab = event.keyCode-36
if(ab < 5 && ab > 0){
if(key_val != ab){
last_key_val = key_val;
key_val=parseInt(ab);
}
}
})
})
</script>
</head>
<body>
<div id="all_show">
<div id = "top" >
<table >
<tr>
<td>行数：</td>
<td><input id="rows" type="text"></td>
<td>列数：</td>
<td><input id="cols" type="text"></td>
<td>时间(毫秒)：</td>
<td><input id="time" type="text"></td>
</tr>
<tr>
<td><input type="button" value="生成表格"></td>
<td><input type="button" value="开始游戏"></td>
</tr>
</table>
</div> <div id="content">
<table id="tcs" border="1px"cellspacing="1" cellpadding="1">
<tbody>
</tbody>
</table>
</div>
</div>
</body>
</html>
编写过程中遇到的问题：
//1、当函数内部不使用var 的时候是作为一个全局变量声明的，但是如果没执行这个函数的时候 这个全局变量是不存在的。
//2、$(a).addClass()的时候$(a).find(a[class])是可以找到的，$(a).removeClass() 也会认为它有class属性 但是没值。
juery实现贪吃蛇的游戏的更多相关文章
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- Unity 3D游戏-贪吃蛇类游戏源码：重要方法和功能的实现
贪吃蛇类游戏源码 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 1 头部移动方式 2 生成 Shit 道具 ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
- JavaScript-简单的贪吃蛇小游戏
实现逻辑: //获取Html中的格子(行,列) //建立数组存储所有格子(x,y) //建立数组用于存储蛇身(x,y) //生成随机坐标(x,y)的函数 //随机创建蛇身并存储到蛇身数组 //创建食物 ...
- 原生JS制作贪吃蛇小游戏
感情都在代码里,来,干了!... <!doctype html> <html> <head> <meta http-equiv="Content-T ...
随机推荐
- PHP相关笔记
扩展包(相关链接):https://packagist.org/: 插件postman主要应用于web开发时get.post请求时查看其响应:
- 2.sort 排序命令讲解
sort命令 sort:文本排序,仅仅是对显示文件的排序,而不影响源文件的顺序,是根据ASSII码 的字符升序来排列的. -n:安装数值大小从小到大排列 ,默认是升序. ...
- [已解决]Windows10 系统下HDMI 显示器 没有声音输出的奇怪问题
今天想用一下显示器自带的喇叭,忽然发现声音输出选项里HDMI的声音设备没了.之前开始使用这台显示器的时是用过一段时间的. 百度了一番,没发现什么线索.后来去谷歌找到这么一段文字: I'm not su ...
- CODE[VS]1372DNA
Description 为了进一步分析外星生物,专家们决定对 DNA 进行切割.限制性核酸内切酶是基因工程中的重要的工具酶.它会识别一段碱基序列(说白了就是只包含 ATGC 的序列)并且切割开.Eco ...
- 通过form表单的形式下载文件。
在项目中遇到问题,要求动态拼接uri下载文件.但是由于项目的安全拦截导致window.location.href 和 window.open等新建窗口的方法都不行. 无意间百度到了通过form表单来下 ...
- maven/gradle 打包后自动上传到nexus仓库
前提: nexus的相关repository必须设置允许redeploy,参考下图: maven项目: pom.xml中增加以下节点: <distributionManagement> & ...
- [LeetCode] Rotate Image 旋转图像
You are given an n x n 2D matrix representing an image. Rotate the image by 90 degrees (clockwise). ...
- 滤镜 filter：gray 变灰色
.gray { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); ...
- PRINCE2特征（三）
提到不确定性,可能很多从事项目管理相关工作的人都会感同身受,一系列临时性问题,比如:变更.延期.调整.计划赶不上变化.团队调整等的出现,都是项目中再正常不过的内容.但正常不等于合理,我们还是要去思考一 ...
- iOS中获取当前时间，设定时间，并算出差值
NSDate *date = [NSDate date];//获取当前时间 NSTimeZone *zone = [NSTimeZone systemTimeZone];//修改时区 NSIntege ...