用js写一个贪吃蛇小游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>贪吃蛇</title>
<style>
body{
margin: 0px;
padding: 0px;
}
#main{
margin: 100px;
}
.btn{
width: 100px;
height: 40px;
}
.gtitle{
font-size: 25px;
font-width: bold;
}
#guan{
color: red;
}
</style>
</head>
<body> <div id="main">
<h1>贪吃蛇</h1>
<input type="button" value="开始游戏" class="btn" id="begin">
<input type="button" value="暂停游戏" class="btn" id="pause">
<span class="gtitle">第<span id="guan">1</span>关</span>
<script>
var main = document.getElementById('main');
var show_canvas = true;//是否开启画布格子
/*
地图对象的构造方法
atom 原子大小宽高是 10px
xnum 水平原子的数量
ynum 竖直方向原子数量
*/
function Map(atom, xnum, ynum) {
this.atom = atom;
this.xnum = xnum;
this.ynum = ynum;
this.canvas = null;
//创建画布
this.create = function () {
this.canvas = document.createElement('div');
this.canvas.style.cssText="position:relative;left:300px;top:40px;" +
"border:1px solid darkred;background:#FAFAFA";
this.canvas.style.width = this.atom * this.xnum + 'px';
this.canvas.style.height = this.atom * this.ynum + 'px';
main.appendChild(this.canvas);
if(show_canvas){
for(var x = 0; x < xnum; x++) {
for(var y = 0; y < ynum; y++) {
var a = document.createElement('div');
a.style.cssText = "position:absolute;border:1px solid yellow;";
a.style.width = this.atom + "px";
a.style.height = this.atom + "px";
a.style.backgroundColor = "green";
a.style.left = x * this.atom +"px";
a.style.top = y * this.atom +"px";
this.canvas.appendChild(a);
}
}
}
}
}
/*
*创建食物的构造方法
*
*/
function Food(map) {
this.width = map.atom;
this.height = map.atom;
this.bgColor = "rgb("+Math.floor(Math.random()*200)+","+Math.floor(Math.random()*200)+"," +
""+Math.floor(Math.random()*200)+")";
this.x = Math.floor(Math.random()*map.xnum);
this.y = Math.floor(Math.random()*map.ynum);
this.flag = document.createElement('div');
this.flag.style.width = this.width + "px";
this.flag.style.height = this.height + "px";
this.flag.style.backgroundColor = this.bgColor;
this.flag.style.borderRadius = '50%';
this.flag.style.position = "absolute";
this.flag.style.left = this.x * this.width + "px";
this.flag.style.top = this.y * this.height + "px";
map.canvas.appendChild(this.flag);
}
/////////////////////////////////////////////////////// function Snake(map) {
//设置宽 高
this.width = map.atom;
this.height = map.atom;
//默认走的方向
this.direction = "right";
this.body =[
{x:2, y:0}, //蛇头
{x:1, y:0}, //蛇身
{x:0, y:0}, //蛇尾
];
//显示蛇
this.display = function () {
for(let i =0;i < this.body.length; i++){
if(this.body[i].x !=null) {
var s = document.createElement('div');
//将蛇的节点保存一个状态变量
this.body[i].flag = s; //设置蛇的属性
s.style.width = this.width + "px";
s.style.height = this.height + "px";
s.style.backgroundColor = "red";
//设置位置rang
s.style.position = "absolute";
s.style.border = "1px solid yellow";
s.style.left = this.body[i].x * this.width + "px";
s.style.top = this.body[i].y * this.height + "px";
//添加到地图中
map.canvas.appendChild(s);
}
}
};
//让蛇运动起来
this.run = function () {
/*
{x:2,y:0}, //蛇头
{x:1,y:0}, //蛇身
{x:0,y:0} //蛇尾
*/
//alert(this.body.length);
for(var i = this.body.length - 1; i > 0; i--){
this.body[i].x = this.body[i-1].x;
this.body[i].y = this.body[i-1].y; }
//默认是right left up down
switch (this.direction) {
case "left": this.body[0].x -=1; break;
case "right": this.body[0].x +=1; break;
case "up": this.body[0].y -=1; break;
case "down": this.body[0].y +=1; break;
}
//吃到食物
if(this.body[0].x == food.x && this.body[0].y == food.y){
//蛇加一节,根据最后节点
this.body.push({x:null, y:null, flag:null});//添加一个空节点
map.canvas.removeChild(food.flag);//删除食物
food = new Food(map);//再随机产生一个食物 //设置级别
if(this.body.length > L.slength){
L.set();
}
} //判断是否出界
if(this.body[0].x <0 || this.body[0].x > map.xnum-1 ||
this.body[0].y <0 || this.body[0].y>map.ynum-1){
clearInterval(timer);
alert("GAME OVER");
restart(map, this);
return false;
} //判断是否吃到自己
for(var i = 4; i< this.body.length; i++){
if(this.body[0].x == this.body[i].x && this.body[0].y == this.body[i].y){
clearInterval(timer);
alert("GAME OVER");
restart(map, this);
return false;
}
} //删除节点
for(let i = 0; i < this.body.length; i++){
if(this.body[i].flag!=null) {//当吃到食物，flag=null
map.canvas.removeChild(this.body[i].flag);
}
} this.display();
}
} //重新开始游戏
function restart(map, snake) {
for(var i=0;i<snake.body.length;i++){
map.canvas.removeChild(snake.body[i].flag)
}
snake.body =[
{x:2, y:0}, //蛇头
{x:1, y:0}, //蛇身
{x:0, y:0}, //蛇尾
];
snake.direction = "right";//初始化方向
map.canvas.removeChild(food.flag);
snake.display();
food = new Food(map);
}
//设置级别对象
function Level() {
this.num = 1;//级别数;
this.speek = 100;
this.slength = 5;// this.set = function () {
this.num++;
if(this.speek <= 50){
this.speek=50;
}else{
this.speek -= 50;
}
this.slength+=1;
start();
this.display();
};
this.display = function (){
document.getElementById('guan').innerHTML = this.num;
}
}
var L = new Level();
L.display();
//创建地图对象;
var map = new Map(20, 40, 20);
map.create();//显示画布
// 创建食物对象
var food = new Food(map); //创建蛇对象
var snake = new Snake(map);
snake.display(); //添加键盘事件，上下左右
window.onkeydown = function (e) {
var event = e || window.event;
// alert(event.keyCode);
switch (event.keyCode) {
case 38:
if(snake.direction != "down") {
snake.direction = "up";
}
break;
case 40:
if(snake.direction != "up")
snake.direction = "down";
break;
case 37:
if(snake.direction != "right")
snake.direction = "left";
break;
case 39:
if(snake.direction != "left")
snake.direction = "right";
break;
}
};
var timer;//变量可以提升； function start(){
clearInterval(timer);
timer = setInterval(function () {
snake.run();
},L.speek);
}
document.getElementById('begin').onclick=function () {
start();
};
document.getElementById('pause').onclick = function () {
clearInterval(timer);
}
</script>
</div>
</body>
</html>
用js写一个贪吃蛇小游戏的更多相关文章
- Java 用java GUI写一个贪吃蛇小游戏
目录 主要用到 swing 包下的一些类 上代码 游戏启动类 游戏数据类 游戏面板类 代码地址 主要用到 swing 包下的一些类 JFrame 窗口类 JPanel 面板类 KeyListener ...
- html5面向对象做一个贪吃蛇小游戏
canvas加面向对象方式的贪吃蛇 2016-08-25 这个小游戏可以增加对面向对象的理解,可以加强js逻辑能力,总之认真自己敲一两遍收获还是不少啊!!适合刚学canvas的同学练习!! 废话不多说 ...
- 原生js写的贪吃蛇网页版游戏特效
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...
- JS高级---案例：贪吃蛇小游戏
案例:贪吃蛇小游戏 可以玩的小游戏,略复杂,过了2遍,先pass吧 先创建构造函数,再给原型添加方法.分别创建食物,小蛇和游戏对象. 食物,小蛇的横纵坐标,设置最大最小值,运动起来的函数,按上下左右键 ...
- 【C/C++】10分钟教你用C++写一个贪吃蛇附带AI功能（附源代码详解和下载）
C++编写贪吃蛇小游戏快速入门 刚学完C++.一时兴起,就花几天时间手动做了个贪吃蛇,后来觉得不过瘾,于是又加入了AI功能.希望大家Enjoy It. 效果图示 AI模式演示 imageimage 整 ...
- Java GUI学习,贪吃蛇小游戏
JAVA GUI练习 贪吃蛇小游戏 前几天虽然生病了,但还是跟着狂神学习了GUI的方面,跟着练习了贪吃蛇的小项目,这里有狂神写的源码点我下载,还有我跟着敲的点我下载,嘿嘿,也就注释了下重要的地方,这方 ...
- C++ 简单的控制台贪吃蛇小游戏
由于比较懒,所以不怎么写,觉得这样不应该.我应该对自己学的做出整理,不管是高端低端,写出来是自己的. // 贪吃蛇.cpp : 定义控制台应用程序的入口点. // #include "std ...
- 贪吃蛇小游戏-----C语言实现
1.分析 众所周知,贪吃蛇游戏是一款经典的益智游戏,有PC和手机等多平台版本,既简单又耐玩.该游戏通过控制蛇头方向吃食物,从而使得蛇变得越来越长,蛇不能撞墙,也不能装到自己,否则游戏结束.玩过贪吃蛇的 ...
- 用GUI实现java版贪吃蛇小游戏
项目结构 新建一个JFrame窗口,作为程序入口 public class GameStart{ public static void main(String[] args) { JFrame jFr ...
随机推荐
- 解析网站爬取腾讯vip视频
今天用油猴脚本vip一件解析看神奇队长.想到了问题,这个页面应该是找到了视频的api的接口,通过接口调用获取到了视频的地址. 那自己找腾讯视频地址多费劲啊,现在越来越多的参数,眼花缭乱的. 那我就找到 ...
- layui table渲染和数据处理
最近在用layui开发管理系统,果然是"累"ui 实现功能:将之前选择的选项勾选,渲染备注信息(原数据为空的列) <table class="layui-hide& ...
- WebApi参数检查验证FluentValidation的使用方法
右键打开NuGet程序包管理,进入浏览,搜索 FluentValidation,点击下载 在Model文件夹添加一个Person类进行校验 校验前,using需要引入相应的命名空间方可使用,Abstr ...
- 小程序里button边框有黑线解决办法(自定义button样式)
.go_to_user::after{ border:1px solid transparent; } button的class为go_to_user button{ padding:; box-si ...
- ERROR 2003 (HY000): Can't connect to MySQL server on '192.168.33.10' (111) 解决方法
谷歌了一下之后,原来是在mysql的my.cnf中有下面一段代码: # Instead of skip-networking the default is now to listen only on ...
- 闲聊http1.1的6个方法
GET :获取资源GET 方法用来请求访问已被 URI 识别的资源.指定的资源经服务器端解析后返回响应内容. POST :传输实体主体POST 方法用来传输实体的主体.虽然用 GET 方法也可以传输实 ...
- python学习10字典
'''''''''字典(Dict)是python语言的一个最大的特征1.定义:是可变的无序集合,以键值对为基本元素,可以存储各种数据类型2.表示:{} 列表:[] 元组 () 字符串 ‘’ “” ‘‘ ...
- 如何在没有安装 Python 的机器上运行 Python 程序
cmd 命令 1. pip install pyinstaller 2. pyinstaller <path to your prog.py> 3. 应用程序在prog.py同路径下的 d ...
- 如何使用Markdown 编写文档
Markdown 是一种轻量级标记语言,用来编写文本文档,一般后缀名为.md.该语言在 2004 由约翰·格鲁伯(John Gruber)创建. 由于Markdown 语法简单,易读易写,变得越来越通 ...
- 将Spring Boot应用程序注册成为系统服务
文章目录 前期准备 打包成可执行jar包 注册成为liunx服务 System V Init Systemd Upstart 在Windows中安装 Windows Service Wrapper J ...