用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 ...
随机推荐
- 使用 PyHamcrest 执行健壮的单元测试
在 测试金字塔 的底部是单元测试.单元测试每次只测试一个代码单元,通常是一个函数或方法. 通常,设计单个单元测试是为了测试通过一个函数或特定分支的特定执行流程,这使得将失败的单元测试和导致失败的 bu ...
- Java 网络编程 -- 基于TCP 实现聊天室 群聊 私聊
分析: 聊天室需要多个客户端和一个服务端. 服务端负责转发消息. 客户端可以发送消息.接收消息. 消息分类: 群聊消息:发送除自己外所有人 私聊消息:只发送@的人 系统消息:根据情况分只发送个人和其他 ...
- 认证与授权】Spring Security系列之认证流程解析
上面我们一起开始了Spring Security的初体验,并通过简单的配置甚至零配置就可以完成一个简单的认证流程.可能我们都有很大的疑惑,这中间到底发生了什么,为什么简单的配置就可以完成一个认证流程啊 ...
- Zookeepe的安装和集群的配置
Zookeepe的安装和集群的配置 一.Zookeeper的简介 Zookeeper是个框架 二.Zookeeper在Linux上安装 官方提供的下载服务器 地址1:http://mirror.bit ...
- 测试Thread中的常用方法
package com.yhqtv.java; /* *测试Thread中的常用方法: * 1.start():启动当前线程:调用当前线程的run() * 2.run():通常需要重写Thread类的 ...
- 解决Lost connection to MySQL server during query错误方法/Mysql关闭严格模式
使用Navicat 导入MySQL数据库的时候,出现了一个严重的错误,Lost connection to MySQL server during query,字面意思就是在查询过程中丢失连接到MyS ...
- css3 文本控制自动换行
text-overflow:ellipsis; white-space:nowrap; overflow:hidden;
- Samba远程Shell命令注入执行漏洞
CVE:CVE-2007-2447 原理: Samba中负责在SAM数据库更新用户口令的代码未经过滤便将用户输入传输给了/bin/sh.如果在调用smb.conf中定义的外部脚本时,通过对/bin/s ...
- 关于用C-free进行C语言编程在电脑中生成的.exe和.o文件
在使用C-free进行C语言编程时,程序运行后会自动在电脑文件中生成以.exe和.o为后缀名的文件: 1,生成的.exe文件为系统自动打包完成的应用程序,该程序可直接在其他无C-free环境的电脑上运 ...
- Element UI表格组件技巧：如何简洁实现跨页勾选、跨页统计功能
业务场景 在使用Element UI的Table组件时,常常面对这样的业务需求: 表格数据的每一项都要提供勾选框,当切换分页时,能够记忆所有页面勾选的数据,以实现批量提交不同页面勾选数据的功能.并且, ...