本文详细介绍了如何使用HTML5、CSS和JavaScript构建一个简单的贪吃蛇游戏，并借助Eclipse将其打包成Android应用。游戏界面包含开始、退出按钮以及四个方向键。游戏逻辑包括蛇的移动、碰撞检测和食物生成。尽管存在一些局限性，如不适应所有手机尺寸和粗糙的按键设计，但这个项目仍可供学习者参考和改进。
本文是基于JS框架中Jquery搭建的适用于手机安装的apk文件，从而实现可直接进入的app。首先该文档是一个html5程序文件，然后借助Eclipse打包成一个android安装文件，具体如何打包，这里不再赘述，感兴趣的朋友可搜索关键词“如何将html5程序打包成Android应用”。
界面如下：
html实现代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equip="Content_Type" content="text/html;charset=utf-8"/>
<title>贪吃蛇</title>
<meta name="viewport" content="width=device-width,shrink-to-fit=no">
<link rel="stylesheet" href="file:///android_asset/css/index.css"/>
</head>
<body>
<div class="background">
<p class="score">您的成绩：<span>0</span></p>
<div class="snake start"></div>
</div>
<div class="begin">
<ul>
<li><input type="button" id="btn_begin" value="开始"/></li>
<li><input type="button" id="btn_exit" value="退出"/></li>
</ul>
</div>
<div class="GameOver">
<h1>GAME OVER</h1>
</div>
<div class="direction_div up_direction">
<button class="up">上</button>
</div>
<div class="direction_div left_direction">
<button class="left">左</button>
</div>
<div class="direction_div down_direction">
<button class="down">下</button>
</div>
<div class="direction_div right_direction">
<button class="right">右</button>
</div>
<script type="text/javascript" src="file:///android_asset/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="file:///android_asset/js/index.js"></script>
</body>
</html>css实现代码：
*{
margin: 0px;
padding: 0px;
list-style: none;
}
body{
position: relative;
}
.background{
position: relative;
top: 20px;
z-index: -1;
margin: 20px auto;
width: 600px;
height: 200px;
border: solid 2px ;
background-color: bisque;
}
.snake{
display: inline-block;
border: solid 1px;
width: 5px;
height: 5px;
background-color: saddlebrown;
border-radius: 40%;
position: absolute;
z-index: 10px;
}
.start{
top:100px;
left: 100px;
}
.snake_boby{
display: inline-block;
border: solid 1px;
width: 5px;
height: 5px;
background-color: yellowgreen;
position: absolute;
border-radius: 40%;
z-index: 10px;
}
.food{
display: inline-block;
border: solid 0.5px;
width: 5px;
height: 5px;
background-color:red;
border-radius:50%;
position: absolute;
z-index: 10px;
}
.score{
position: absolute;
font-size: 10px;
top: -20px;
left: 0px;
}
.begin {
position: absolute;
top: 90px;
left:320px;
transform: translateX(-50%);
border: solid 1px;
background-size: 300px ;
width: 150px;
height: 100px;
}
.begin ul li input{
width: 150px;
height: 50px;
line-height: 30px;
border: none;
background-color: #7dbb32;
cursor: pointer;
border-radius: .3em;
box-shadow: 0 1px white inset;
text-align: center;
text-shadow: 0 1px 1px black;
color:white;
font-weight: bold;
outline: none;
}
.GameOver{
display: none;
}
.GameOver h1{
text-align: center;
margin-top: -60px;
margin-left: 360px;
color:red;
font-size: 18px;
font-weight: bold;
text-shadow: 2px 2px 0 white;
position: absolute;
}
.direction_div{
position:relative;
width: 30px;
height: 30px;
}/*left*/
.left_direction {
top: 5%;
left:35%;
}
/*bottom*/
.down_direction{
top:-29px;
left: 45%;
}
/*right*/
.right_direction{
top:-60px;
left:52%;
}
/*top*/
.up_direction{
top: 2%;
left: 45%;
}
.left{
width: 50px;
height: 30px;
background: green;
border: none;
font-size: 18px;
border-radius:10px;
color:white;
}
.down{
width: 30px;
height: 30px;
background: green;
border: none;
font-size: 18px;
border-radius:10px;
color:white;
}
.up{
width: 30px;
height: 30px;
background: green;
border: none;
font-size: 18px;
border-radius:10px;
color:white;
}
.right{
width: 50px;
height: 30px;
background: green;
border: none;
font-size: 18px;
border-radius:10px;
color:white;
}js实现代码：
var $background = $('.background') //该全局变量用于获取背景图，因为背景图在游戏中不会发生变化，可在最开始获取就行
var coordinate_x = new Array() //创建一个数组，用于存放蛇的每个身体节点的x坐标值
var coordinate_y = new Array() //创建一个数组，用于存放蛇的每个身体节点的y坐标值
var status = 'Right' //该全局变量用于存放贪吃蛇行走的方向，默认为向右走
var Time //该全局变量用于存放setInterval(Auto_walk,$grade)，用于游戏停止
var $grade=100 //该全局变量用于存在游戏等级的数字变量，主要用于设置行走的快慢
var $score = 0 //建个全局变量用于存放分数
var food_y
var food_x
$(document).ready(function () {
$('.start').hide() //页面加载后，在游戏未开始前隐藏蛇头
$('#btn_begin').click(function () {
//为开始游戏按钮添加单击事件
$('.start').show()
Create_start_snake_boby()
Create_snake_boby()
create_food()
Time = setInterval(Auto_walk,$grade) //使用setInterval()方法，实现蛇的自动行走
$('.begin').hide()
$('.direction_div').show()
})
$('#btn_exit').click(function () {
//为退出按钮添加单击事件，实现当前窗口关闭
window.close()
})
$('.up').click(function () {
move_top()
if (status != 'Bottom') {
//判断将要移动的方向是否与现在的移动方向相反，相反则status不变
status = 'Top'
}
})
$('.down').click(function () {
move_bottom()
if (status != 'Top') {
status = 'Bottom'
}
})
$('.left').click(function () {
move_left()
if (status != 'Right') {
status = 'Left'
}
})
$('.right').click(function () {
move_right()
if (status != 'Left') {
status = 'Right'
}
})
})
// 游戏初始化时创建一节蛇身
function Create_start_snake_boby() {
var $newSnake_boby = $("<div class='snake_boby'></div>") //创建一个新节点（蛇身）
var $snakes = $('.background>div') //获取全部的蛇身
var L_left = parseInt($snakes.eq($snakes.length - 1).css('left')) - 5 + 'px' //查到蛇尾节点，获取x,y坐标值，赋给新建的蛇身节点
var L_Top = $snakes.eq($snakes.length - 1).css('top')
$newSnake_boby.css('left', L_left)
$newSnake_boby.css('top', L_Top)
$background.append($newSnake_boby) //把新建的蛇身节点添加到背景中
}
// 创建一节蛇身
function Create_snake_boby() {
var $newSnake_boby = $("<div class='snake_boby'></div>")
var $snakes = $('.background>div')
var Last_boby_x = parseInt($snakes.eq($snakes.length - 1).css('left')) //获取蛇尾的坐标
var LastButOne_boby_x = parseInt($snakes.eq($snakes.length - 2).css('left')) //获取倒数第二节蛇身的坐标
var Last_boby_y = parseInt($snakes.eq($snakes.length - 1).css('top'))
var LastButOne_boby_y = parseInt($snakes.eq($snakes.length - 2).css('top'))
//判断最后两节蛇身是否处在垂直
if (Last_boby_x == LastButOne_boby_x) {
//通过判断最后两节蛇身的y坐标来确定新蛇身的添加方向
if (Last_boby_y > LastButOne_boby_y) {
$newSnake_boby.css('left', Last_boby_x)
$newSnake_boby.css('top', Last_boby_y + 5 + 'px')
} else if (Last_boby_y < LastButOne_boby_y) {
$newSnake_boby.css('left', Last_boby_x)
$newSnake_boby.css('top', Last_boby_y - 5 + 'px')
}
} else if (Last_boby_y == LastButOne_boby_y) {
if (Last_boby_x > LastButOne_boby_x) {
$newSnake_boby.css('left', Last_boby_x + 5 + 'px')
$newSnake_boby.css('top', Last_boby_y)
} else if (Last_boby_x < LastButOne_boby_x) {
$newSnake_boby.css('left', Last_boby_x - 5 + 'px')
$newSnake_boby.css('top', Last_boby_y)
}
}
$background.append($newSnake_boby)
}
// 生成食物
function create_food() {
var status = true //新建一个变量用来判断是否生成新的食物
var $snakes = $('.background>div')
do {
this.food_x = Math.floor(Math.random() * 80) * 5 //随机生成一个坐标值
this.food_y = Math.floor(Math.random() * 30) * 5
for (var i = 0; i < $snakes.length; i++) {
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
if (
food_x != parseInt(coordinate_x[i]) &&
food_y != parseInt(coordinate_y[i])
) {
//判断新坐标值是否跟蛇身重叠
status = false //不存在重叠，转化status的值，跳出循环
}
}
} while (status)
var $food = $("<span class='food'></span>")
$food.css('top', food_y + 'px')
$food.css('left', food_x + 'px')
$background.append($food)
}
// 依照当前前进方向自动行走
function Auto_walk() {
if (status == 'Right') {
move_right()
} else if (status == 'Left') {
move_left()
} else if (status == 'Top') {
move_top()
} else if (status == 'Bottom') {
move_bottom()
}
}
function move_right() {
var $snakes = $('.background>div')
var $H_Top = parseInt($snakes.eq(0).css('top'))
var $H_Left = parseInt($snakes.eq(0).css('left'))
for (var i = 0; i < $snakes.length; i++) {
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
}
if (
!(
$H_Top == parseInt(coordinate_y[1]) &&
$H_Left + 5 == parseInt(coordinate_x[1])
)
) {
$snakes.eq(0).css('left', $H_Left + 5 + 'px')
for (var i = 1; i < $snakes.length; i++) {
$snakes.eq(i).css('top', coordinate_y[i - 1])
$snakes.eq(i).css('left', coordinate_x[i - 1])
}
eat()
collide_dead()
} else {
return false
}
}
// 左转
function move_left() {
var $snakes = $('.background>div')
var $H_Top = parseInt($snakes.eq(0).css('top'))
var $H_Left = parseInt($snakes.eq(0).css('left'))
// 获取当前贪吃蛇全部蛇身及蛇头的坐标
for (var i = 0; i < $snakes.length; i++) {
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
}
// 贪吃蛇移动一次
// 首先判断本次移动是否回头
// 如果不是回头，则进行移动
if (
!(
$H_Top == parseInt(coordinate_y[1]) &&
$H_Left - 5 == parseInt(coordinate_x[1])
)
) {
$snakes.eq(0).css('left', $H_Left - 5 + 'px')
for (var i = 1; i < $snakes.length; i++) {
$snakes.eq(i).css('top', coordinate_y[i - 1])
$snakes.eq(i).css('left', coordinate_x[i - 1])
}
// 移动完成后判断是否发生碰撞
collide_dead()
eat()
} else {
return false
}
}
// 上转
function move_top() {
var $snakes = $('.background>div')
var $H_Top = parseInt($snakes.eq(0).css('top'))
var $H_Left = parseInt($snakes.eq(0).css('left'))
for (var i = 0; i < $snakes.length; i++) {
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
}
if (
!(
$H_Top - 5 == parseInt(coordinate_y[1]) &&
$H_Left == parseInt(coordinate_x[1])
)
) {
$snakes.eq(0).css('top', $H_Top - 5 + 'px')
for (var i = 1; i < $snakes.length; i++) {
$snakes.eq(i).css('top', coordinate_y[i - 1])
$snakes.eq(i).css('left', coordinate_x[i - 1])
}
collide_dead()
eat()
} else {
return false
}
}
// 下转
function move_bottom() {
var $snakes = $('.background>div')
var $H_Top = parseInt($snakes.eq(0).css('top'))
var $H_Left = parseInt($snakes.eq(0).css('left'))
for (var i = 0; i < $snakes.length; i++) {
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
}
if (
!(
$H_Top + 20 == parseInt(coordinate_y[1]) &&
$H_Left == parseInt(coordinate_x[1])
)
) {
$snakes.eq(0).css('top', $H_Top + 5 + 'px')
for (var i = 1; i < $snakes.length; i++) {
$snakes.eq(i).css('top', coordinate_y[i - 1])
$snakes.eq(i).css('left', coordinate_x[i - 1])
}
collide_dead()
eat()
} else {
return false
}
}
// 吃动作
function eat() {
var $snakes = $('.background>div')
var $H_Top1 = parseInt($snakes.eq(0).css('top')) //获取蛇头的坐标
var $H_Left1 = parseInt($snakes.eq(0).css('left'))
if ($H_Top1 == food_y && $H_Left1 == food_x) {
//判断蛇头的坐标和食物的坐标是否重叠，重叠，添加一节蛇身，新建一个食物，分数加一，刷新分数
$('.food').remove()
Create_snake_boby()
create_food()
++$score
$('.score span').html($score)
}
}
// 碰撞死亡判定
function collide_dead() {
var $snakes = $('.background>div')
var $H_Top1 = parseInt($snakes.eq(0).css('top')) //获取蛇头坐标
var $H_Left1 = parseInt($snakes.eq(0).css('left'))
for (var i = 0; i < $snakes.length; i++) {
//遍历全部蛇身节点坐标
coordinate_y[i] = $snakes.eq(i).css('top')
coordinate_x[i] = $snakes.eq(i).css('left')
}
for (var j = 1; j < $snakes.length; j++) {
//判断蛇头坐标是否跟蛇身任意节点坐标重叠，重叠则认为吃到自己，清空setInterval，显示GameOver
if (
$H_Top1 == parseInt(coordinate_y[j]) &&
$H_Left1 == parseInt(coordinate_x[j])
) {
clearTimeout(Time)
window.location.reload()
$('.begin').show()
return false
}
//判断是否超出边界
if ($H_Top1 > 195 || $H_Top1 < 0 || $H_Left1 > 595 || $H_Left1 < 0 ) {
clearTimeout(Time)
window.location.reload()
$('.begin').show()
return false
}
}
}划重点！问题集中在html实现代码！
1. 本文使用的jquery.js文件是离线的，放在程序的文件夹中；
2. 因html的代码是从上到下执行的，切记要把所有的js文件放在最后，如文中所示的位置；
3.因打包需要，一定要把文件地址标识清楚，否则打包出来的apk文件是没有渲染和执行，例如：
<link rel="stylesheet" href="file:///android_asset/css/index.css"/>
<script type="text/javascript" src="file:///android_asset/js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="file:///android_asset/js/index.js"></script>
总结：
说实在话，这是一个简单的，基本上完整的游戏app，但还是有些bug，比如不能适用全部尺寸的android手机，上下左右按键过于粗糙，同时结束后不能重玩，都需要后续完善。我还是想分享出来，让各位同学朋友互相借鉴学习。
210
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
