简单贪吃蛇

在游戏开始时,分数为0,游戏结束时会弹出分数。

代码:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
*{padding: 0;margin: 0;}
#layer{border-collapse:collapse; border-spacing:0;}
#layer td{width: 40px;height: 20px;}
#controller{margin-top: 50px;}
#layer td.snake{background-color:green}
#layer td.food{background-color:red}
#show_score{
position:absolute;
top:70px;
left:180px;
width:100px;
height:40px;
}
#button{width:150px;
height:50px}
</style>
<script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
</head>
<body>
<center>

<input id="show_score" type="reset" value="score:0">

<div id="controller">
<!--不知道怎么用button传参数-->

<button onclick="ready()" id="button">开始游戏</button>

<script>

</script>
<table id="layer" background=‘background.jpg‘></table>
</center>
<script>
function ready(){
//绘制地图
var layer={x:20,y:20}
var str=‘‘;
var score = 0;
for (var y = 1; y<=layer.y; y++) {
str+=‘<tr>‘;
for (var x = 1; x<=layer.x; x++) {
str+=‘<td id="‘+x+‘_‘+y+‘"></td>‘;//?
};
str+=‘</tr>‘;
};
$(‘#layer‘).html(str);
//放置小蛇
var moveTime=500;
var sanke=[{//蛇的数组
x:Math.floor(layer.x/2),//得到一个数的整数
y:Math.floor(layer.y/2)
}];

var snakHead=sanke[0].x+‘_‘+sanke[0].y;
$(‘#‘+snakHead).addClass(‘snake‘);

//改变方向
var direction=38;
function go(num){direction=num;}

//监听键盘
$(document).keydown(function(event){ go(event.keyCode); });
//小蛇移动
function snakeMove(){
var nextPoint={};
switch(direction){
case 38://上
nextPoint.x=sanke[0].x;nextPoint.y=sanke[0].y-1;
break;
case 40://下
nextPoint.x=sanke[0].x;nextPoint.y=sanke[0].y+1;
break;
case 37://左
nextPoint.x=sanke[0].x-1;nextPoint.y=sanke[0].y;
break;
case 39://右
nextPoint.x=sanke[0].x+1;nextPoint.y=sanke[0].y;
break;
}
var nextBody=$(‘#‘+nextPoint.x+‘_‘+nextPoint.y);//?

if(nextBody.length>0){
if(nextBody.hasClass(‘snake‘)){
alert(‘自残而死!你的得分为‘+score);clearInterval(timer);
}else{
sanke.unshift(nextPoint);//蛇头增加
nextBody.addClass(‘snake‘);

if(nextBody.hasClass(‘food‘)){
nextBody.removeClass(‘food‘);
makeFood();
//分数
score++;
var show_score = document.getElementById(‘show_score‘);
show_score.value="score:"+score;
}else{
var lastSnake=sanke[sanke.length-1];
$(‘#‘+lastSnake.x+‘_‘+lastSnake.y).removeClass(‘snake‘);
sanke.pop();//删除尾部 
}
}
}else{
alert(‘撞墙而死!你的得分为‘+score);clearInterval(timer);
}
}

//随机产生食物
function makeFood(){
var empty=$(‘#layer td:not(.sanke)‘);
var rnd=Math.floor(Math.random() * (empty.length- 1));
empty.eq(rnd).addClass(‘food‘);
}

//动画
makeFood();
var timer=setInterval(snakeMove,moveTime);
}
</script>

</body>
</html>

时间: 2024-11-20 15:32:09

简单贪吃蛇的相关文章

JavaScript实现简单贪吃蛇小游戏

之前上Web课,学到JavaScript的时候,老师要求写几个静态页面,要用到JavaScript.想了想就写个贪吃蛇吧.其实之前用pygame写过一次GUI的贪吃蛇,素材都是自己拿画图画的,其丑无比.所以这次还是老老实实用字符吧. 首先,是一些全局变量的定义: 1 <script> 2 var state = 0;//0 wait 1 run 2 over 3 var width = 40; 4 var height = 25; 5 var update = false; 6 var dir

java 简单贪吃蛇

说了是简单版贪吃蛇... 就3个类+方向枚举变量(本来想写贪吃蛇斜着走的..想象我的蛇是矩形 斜着难看就没写) 上下左右键控制移动 空格暂停 SnackClient类 package com.xynu.snaker; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.event.ActionEvent; import java.awt.event.ActionListene

简单贪吃蛇游戏js

新手,仿照别人的写的.只能实现简单的功能,代码如下: 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 #box{ 12 position: absolute; 13 left: 0; 14 t

C++简单贪吃蛇实现

#include <iostream> #include <stdlib.h> #include <stdio.h> #include <unistd.h> #include <deque> #include <list> #define _SIZE_ 30 #define _SET_ cout<<"\033[?25l\033[0m" static int flags = 0; typedef int

小游戏●贪吃蛇1(利用二维数组制作)

利用二维数组编写简单贪吃蛇小游戏,由于是初学C#,用的是单线程,所以蛇不会自动前进 代码及简要分析如下: 1 //定义地图,0为空,1为墙,2为蛇,3为食物 2 int[,] map = new int[15, 15]{ 3 {1,1,1,1,1,1,1,1,1,1,1,1,1,1,1}, 4 {1,2,0,0,0,0,0,0,0,0,0,0,0,0,1}, 5 {1,0,0,0,0,0,0,0,0,0,0,0,0,0,1}, 6 {1,0,0,0,0,0,0,0,0,0,0,0,0,0,1},

在ARM版上开发的贪吃蛇

本文主要为贪吃蛇部分代码的实现,开发板的按键以及触屏中断等,本文不做重点讲解 前一阵子学习了mini2440板的开发,并开发了一个简单贪吃蛇的游戏 游戏功能清单:1.游戏开始 2.游戏难度设置(简单,普通,困难) 3.游戏结束 4.蛇的正常运行路线(触碰障碍物或者蛇本身随即游戏结束,不能反方向行动) 5.通过内设时钟,产生随机种子,从而产生随机分布的"食物" 以下为代码解析部分: #include "snake_game.h" #include "adct

javascript之【贪吃蛇系列】第一弹:简单的贪吃蛇实现

参考博客:http://blog.csdn.net/sunxing007/article/details/4187038 以上博客是参考,毕竟第一次做,真让自己盲人摸象做不出来. 不过我在其上做了一些改进,界面等效果看起来更好一些. 下图是在Chrome上运行的效果,但是火狐和IE会不兼容,onkeydown事件不能正确调用 这里用了一张图把贪吃蛇制作过程的思想画了出来,画的有点简陋: 下面就是把代码发上来,上边有详细的解释: <html> <head> <title>

一个简单的“贪吃蛇”小游戏

一个简单的“贪吃蛇”小游戏 页面结构 简单的21x21的方块,页面结构 id为container的div包含所21个class名为row的div,每个row代表贪吃蛇的一整行,每个row中又包含21个div,代表这一行的每一个div方格,如果这个方格是空的话,div的类名为blank,如果这一个方格表示“贪吃蛇”的“食物”,div的类名为food,如果这一个方格表示“蛇”,div的类名为snake. CSS JS 然后我们思考下一个贪吃蛇游戏需要那些参数, 首先,界面中可见的元素无非就是空方格,

简单的贪吃蛇

最近都在忙着复习考试,忙里偷闲,抽出时间写了个贪吃蛇,没时间写详细的思路了,代码里有比较详细的注释,有兴趣的同学可以自己看看.(感觉写的相对来说还是比较简短的,如果有什么写的不好或是不对的地方,欢迎各位指出).在写这个贪吃蛇时,我省去了很多不必要的功能,只实现了最基本的功能,界面也比较粗糙,游戏功能也不见得很完善,只是为了用尽量少的代码来实现主体功能,大家可以在这个基础上进行修改和完善. /*----------------------------------------------------