[Asm] 纯文本查看 复制代码 1、申 请 I D：lingsui
2、个人邮箱：[email]794761226@qq.com[/email]
3、原创技术文章：html小游戏 贪吃滑稽
开局会有一个从左向右移动的 称为玩家，通过键盘的上下左右可以控制方向，每3秒会出现一个新的称为食物，当两个相遇的时候玩家会吃掉食物变大自己，如果碰到墙壁会重新开始恢复初始大小，很简单的一个小游戏，代码也比较少 对于新手来说有研究价值，通过超文本浏览框也可以嵌入到易语言中使用
简单的介绍一下项目结构
img/0.jpg中是表情的图片 大家可以替换为自己喜欢的头像 名字和格式相同可以直接替换 否则需要改一下代码的引用
js/jquery.min.js 常用的js类库
index.html 主要页面和代码都在这
主要js代码如下 初始值可以根据需要更改
[XHTML] 纯文本查看 复制代码 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
text-align: center;
}
.wall{
width: 500px;
height: 500px;
margin: 0 auto;
border: 1px solid red;
position: relative;
}
.food{
width: 30px;
height: 30px;
position: absolute;
background: url(img/0.jpg);
}
</style>
</head>
<body>
<div class="wall">
<img src="img/0.jpg" class="top0 food"/>
</div>
<script src="js/jquery.min.js"></script>
<script>
var interval = null//定时器
var direction = 4;//上下左右/1234
var maxWidth = 500;//墙壁宽度
var maxHeight = 500;//墙壁高度
var width = 30;//初始宽度
var height = 30;//初始高度
var user = {width: 30,height: 30};//当前大小
var point = {left: 20,top: 20};//当前位置
var foodList = []//食物集合
var c = 0;//食物数量计数
$(function(){
$(".top").css(user);//设置初始大小
$(".top").css(point);//设置初始位置
interval = setInterval(function(){
controlDirection();
},20);
//3秒新增1个食物
var interval2 = setInterval(function(){
if(foodList.length < 10){//超过10个食物暂停
//取随机位置
var left = Math.floor(Math.random()*500);
if(left > 470){
left = 470;
}
var top = Math.floor(Math.random()*500);
if(top > 470){
top = 470;
}
c++;
$(".wall").append('<img src="img/0.jpg" class="top'+c+' food" style="left: '+left+'px;top: '+top+'px;" />');
foodList.push({left:left,top:top,n: c});
}
},500)
})
//控制方向
function controlDirection(){
if(direction == 1){//上
point.top--;
if(point.top >= maxHeight || point.top < 1){
gameOver();
}
}else if(direction == 2){//下
point.top++;
if(point.top >= maxHeight - 30 || point.top < 1){
gameOver();
}
}else if(direction == 3){//左
point.left--;
if(point.left >= maxHeight || point.left < 1){
gameOver();
}
}else if(direction == 4){//右
point.left++;
if(point.left >= maxHeight - 30 || point.left < 1){
gameOver();
}
}
//判断食物位置
for(var i=0;i<foodList.length;i++){
var topn = 31;//自身范围
if(foodList[i].top > point.top){
topn = foodList[i].top - point.top;
}else{
topn = point.top - foodList[i].top;
}
var leftn = 31;//自身范围
if(foodList[i].left > point.left){
leftn = foodList[i].left - point.left;
}else{
leftn = point.left - foodList[i].left;
}
if(topn < 30 && leftn < 30){//相遇后吃掉食物
console.log("相遇");
$(".top" + foodList[i].n).remove();
foodList.splice(i, 1);
user.width += 5;
user.height += 5;
$(".top0").css(user)
}
}
$(".top0").css(point);//更改位置
}
function gameOver(){
console.log("碰到墙壁");
/* clearInterval(interval);//碰到墙以后结束游戏
alert("Game over"); */
//碰到墙以后重新开始
user = {width: 30,height: 30};
$(".top0").css(user);//回复初始大小
direction = 4;//往右走
point = {left: 20,top: 20};//当前位置=初始位置
}
//监控按键
$(document).keydown(function(event){
console.log(event.keyCode);
if(event.keyCode == 38){
direction = 1;
}else if(event.keyCode == 40){
direction = 2;
}else if(event.keyCode == 37){
direction = 3;
}else if(event.keyCode == 39){
direction = 4;
}
});
</script>
</body>
</html>
附件无法上传请自行下载
| 
吾爱游客
发表于 2021-1-22 09:54
