用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 ...
随机推荐
- sudo -s 命令 [oh-my-zsh] 提示检测到不安全目录
运行sudo -s 命令时,[oh-my-zsh] 冒出下面一大堆提示: [oh-my-zsh] Insecure completion-dependent directories detected: ...
- ado.net 面向对象
面向对象:就是一个大的转换器,建立起一条通道通往数据库然后通过通道将所需(方法)数据从转换器往返于外部界面端 1 首先在项目里创建文件夹: 右击项目———添加个文件夹App_Cod 2 ...
- [转载]深度理解Session
什么是session session的官方定义是:Session:在计算机中,尤其是在网络应用中,称为“会话控制”.Session 对象存储特定用户会话所需的属性及配置信息. 说白了session就是 ...
- HTTPoxy漏洞（CVE-2016-5385）复现记录
漏洞介绍: httpoxy是cgi中的一个环境变量:而服务器和CGI程序之间通信,一般是通过进程的环境变量和管道. CGI介绍 CGI 目前由 NCSA 维护,NCSA 定义 CGI 如下:CGI(C ...
- vue原生表格怎样实现动态列及表格数据下载
最近项目经常用到带有合并效果以及动态列的表格,而翻阅iview和element-ui官网没有找到合适的(也有可能自己的水平有限,不会改写),所以只好自己用原生表格写了一个,具体效果如下: 这个表格右侧 ...
- python 中自带的堆模块heapq
import heapq my_heap = [] #使用列表保存数据 #网列表中插入数据,优先级使用插入的内容来表示,就是一个比较大小的操作,越大优先级越高 heapq.heappush(my_he ...
- ApiPost的预执行脚本和后执行脚本
ApiPost的预执行脚本和后执行脚本主要是用来定义变量.但是它们有什么区别呢? 预执行脚本 在当前接口发送请求前执行的脚本,可以理解为beforeSend的时候执行. 一般在这里,我们可以设置一些前 ...
- 2019-2020-1 20199303《Linux内核原理与分析》第七周作业
进程的描述 1.进程概念 进程是进程实体的运行过程,是系统进行资源分配和调度的一个独立单位.进程由程序段.数据段.PCB组成 2.PCB中的信息 ①进程标识符 ②处理机状态 ③进程调度信息 ④进程控制 ...
- Winsock select server 与 client 示例代码
参考 https://www.winsocketdotnetworkprogramming.com/winsock2programming/winsock2advancediomethod5.html ...
- Scala的Higher-Kinded类型
Scala的Higher-Kinded类型 Higher-Kinded从字面意思上看是更高级的分类,也就是更高一级的抽象.我们先看个例子. 如果我们要在scala中实现一个对Seq[Int]的sum方 ...