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 ...
随机推荐
- 网页变灰的CSS代码
body *{ -webkit-filter: grayscale(100%); /* webkit */ -moz-filter: grayscale(100%); /*firefox*/ -ms- ...
- hbase 权威指南笔记（二）
这次我们先来讨论hbase的重试机制,为什么呐,因为最近公司最近也在做这方面的优化,所以就今天研究的一些成功记录一下. configuration.setInt("hbase.client. ...
- 第28章 java反射机制
java反射机制 1.类加载机制 1.1.jvm和类 运行Java程序:java 带有main方法的类名 之后java会启动jvm,并加载字节码(字节码就是一个类在内存空间的状态) 当调用java命令 ...
- 第10章 Shell编程（3）_字符处理命令和条件判断
3. 字符处理命令 3.1 排序命令:sort (1)sort命令:#sort [选项] 文件名 选项 作用 -f 忽略大小写 -n 以数值型进行排序,默认使用字符串型排序 -r 反向排序 -t 指定 ...
- 升级xcode8之后出现报错提示，提示swift版本问题
最近Xcode升级了,出现了各种蛋疼的错误提示,今天遇到个导入框架出现了提示Swift版本的问题,具体如下: "Use Legacy Swift Language Version" ...
- jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the install tool.
jBPM4.4 no jBPM DB schema: no JBPM4_EXECUTION table. Run the create.jbpm.schema target first in the ...
- 使用WCF传输DataTable：DataTable和Xml格式的字符串相互转换（C#）
背景:项目中要用到客户端向服务端传数据,使用WCF,绑定webHttpBinding,做了一个小例子. 业务逻辑简介:客户端在a表中添加了几条数据,从SQL Server数据库直接取出新添加的数据(D ...
- SQLite3源程序分析之分析器的生成
1.概述 Lemon是一个LALR(1)文法分析器生成工具,与bison和yacc类似,是一个可以独立于SQLite使用的开源的分析器生成工具.而且它使用与yacc(bison)不同的语法规则,可以减 ...
- Android开发之Activity横竖屏切换生命周期重建问题
当进行横竖屏切换的时候Activity的生命周期会重建,从而导致Activity崩溃等问题,为了避免这一问题,需要在AndroidManifest.xml文件中设置: <activity and ...
- C# Webbrowser 常用方法及多线程调用
设置控件的值 /// <summary> /// 根据ID,NAME双重判断并设置值 /// </summary> /// <param name="tagNa ...